search

microsoft / fast

The adaptive interface system for modern web experiences.
https://www.fast.design
Other
9.22k stars 589 forks source link

Provide a solution to minify tagged template literals in Webpack #3457

Open radium-v opened 4 years ago

radium-v commented 4 years ago

As mentioned in #3452, a Webpack-specific version of the template literals transformers would allow compressing css and html tagged template literals in bundles. This would be a good addition for our sites packages as well as for those who use fast in their own projects.

ghost commented 3 years ago

Hi @radium-v , Is there any update on this task?

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

hajo-travanto commented 2 years ago

any update on this one?

a workaround for css files could be to minify them beforehand and/or use imports with a loader that minifies them, e.g. sass-loader with scss files. webpack seems to automatically minify those files for production builds before passing the imported content string to FAST css.

for the template parts there is no such possibility as far as i know. the referenced issue #3452 provides a first version of a rollup-plugin, but i am locked to webpack due to other configurational demands.

thanks in advance :)

hodgef commented 1 year ago

any update on this one?

a workaround for css files could be to minify them beforehand and/or use imports with a loader that minifies them, e.g. sass-loader with scss files. webpack seems to automatically minify those files for production builds before passing the imported content string to FAST css.

for the template parts there is no such possibility as far as i know. the referenced issue #3452 provides a first version of a rollup-plugin, but i am locked to webpack due to other configurational demands.

thanks in advance :)

You can create an AST transformer plugin in Typescript (using ts-patch) to minify template literals. Once you come across a template literal in your transformer, you can run it through these functions: https://github.com/microsoft/fast/blob/master/build/transform-fragments.js

Thanks to @radium-v for making us aware of these useful functions in the FAST codebase. Regards