Async Transformers

[kaaninel]

I was using Compiler API and basically changed program.emit at host.afterProgramCreate just like examples and hooked my transformers into emit function. But one thing i couldn't find anywhere is a async transformer. Im using PostCSS and some other stuff like that and implementing those to a single typescript compiler but some plugins are async in postcss and i cant use them at the moment. Is there any way to implement this that im missing or undocumented ? And in case somebody offers to use webpack my code is mostly javascript based and i need really good static analysis for it with type data included that's also reason i use typescript's api instead of using babel which have those cases mostly covered with plugins. I'm implementing all-in-one solution for my company/community project so ideally it needs to be inside typescript compiler.

[DanielRosenwasser]

Can you give a concrete example of why the transformations/emit themselves being synchronous is a problem?

[j-oliveras]

@DanielRosenwasser I think he want to integrate an async transform into the compiler, but the compiler expects all transforms to be synchronous.

[kaaninel]

Basically i need

const Template = node.initializer.template as ts.NoSubstitutionTemplateLiteral;
PostCSS.process({ [(Cls as any).Tag]: Template.text }).then(p => {
  node.initializer.template = ts.createNoSubstitutionTemplateLiteral(p.css);
});

instead of

const Template = node.initializer.template as ts.NoSubstitutionTemplateLiteral;
const p = PostCSS.process({ [(Cls as any).Tag]: Template.text });
node.initializer.template = ts.createNoSubstitutionTemplateLiteral(p.css);

Tbh I dont think this is really necessary if i was writing whole system sync is more than enough but for 3rd party solutions i need this.

[weswigham]

You could walk the tree, process all the postCSS tags asynchronously and save the results, then start a compilation/transform pass and perform the transformations synchronously using the saved results, no?

[kaaninel]

It would feel like a dirty hack but its possible. I will try it out and comment results. I hope it wont mess with watcher.

[longlho]

@kaaninel FWIW, we did what @weswigham suggested and pre-process all CSS into json and inline with https://github.com/longlho/ts-transform-json. The JSONs are then also feed into other toolchain like jest or webpack and prevents things like className gets generated differently. (We regenerate/filter certain class name bc of adblocker)

[kaaninel]

I implemented it ( in more basic way )
I basically scanned all of the typescript files and generated one big css file and processed it with postcss. Downside is I cant implement string interpolation.
Linker/CSSCompiler (Where i collect all css source)
Linker/CustomElements (Where i detect css sources)
Linker/Compiler (Where I process postcss and emit)