Async Transformers #29100

Activity

1. DanielRosenwasser commented on Dec 19, 2018

   

   Daniel Rosenwasser (DanielRosenwasser)

   on Dec 19, 2018

   Member

   More actions

   Can you give a concrete example of why the transformations/emit themselves being synchronous is a problem?
2. j-oliveras commented on Dec 20, 2018

   

   Jordi Oliveras Rovira (j-oliveras)

   on Dec 20, 2018

   Contributor

   More actions

   Daniel Rosenwasser (@DanielRosenwasser) I think he want to integrate an async transform into the compiler, but the compiler expects all transforms to be synchronous.
3. kaaninel commented on Dec 20, 2018

   

   Kaan İnel (kaaninel)

   on Dec 20, 2018

   Last edited by kaaninel

   Author

   More actions

   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.
4. weswigham commented on Dec 20, 2018

   

   Wesley Wigham (weswigham)

   on Dec 20, 2018

   Member

   More actions

   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?
5. kaaninel commented on Dec 20, 2018

   

   Kaan İnel (kaaninel)

   on Dec 20, 2018

   Author

   More actions

   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.
6. Wesley Wigham (weswigham)

   added

   QuestionAn issue which isn't directly actionable in codeAn issue which isn't directly actionable in code

   Domain: APIRelates to the public API for TypeScriptRelates to the public API for TypeScript

   SuggestionAn idea for TypeScriptAn idea for TypeScript

   Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureThis means we'd like to hear from more people who would be helped by this feature

   and removed

   QuestionAn issue which isn't directly actionable in codeAn issue which isn't directly actionable in code

   on Dec 20, 2018
7. longlho commented on Mar 24, 2019

   

   Long Ho (longlho)

   on Mar 24, 2019

   Contributor

   More actions

   Kaan İnel (@kaaninel) FWIW, we did what Wesley Wigham (@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)
8. kaaninel commented on Mar 25, 2019

   

   Kaan İnel (kaaninel)

   on Mar 25, 2019

   Author

   More actions

   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)