nano-css
nano-css copied to clipboard
streamich
Webpack plugin for extract
Is there any plugin for Webpack to extract static CSS?
The current solution to extract CSS using Node script is very inconvenient because it cannot be added to Webpack build.
I was looking into this a bit to possibly make my own plugin, but unfortunately it seems like nano-css isn't really statically analyzable, which makes it difficult to put together into a webpack plugin.
Looking at the example, the nano-css/addon/extract addon relies on the code to actually execute for the addon to generate the CSS. I don't think there's really a way for this to work nicely inside a webpack plugin to my knowledge.
I don't have too much experience with webpack plugins, so perhaps there's another, better way to go about this?
A "simple" way of achieving it would be:
- Put all
nano-cssstyling in separate files, with*.css.jsextension. - Write a script or a Webpack plugin that executes all
*.css.jsfiles. - Once executed, you will have raw CSS in
nano.rawproperty.
As a side not, you may not need to "extract" CSS into a separate *.css file. If you do static file generation or server side rendering you may want to consider inlining the CSS by simply:
const html = `
<html>
...
<style>${nano-raw}</style>
...
</html>
`;
It's quite possible to make one. I made one for Rollup: https://bitbucket.org/TheBosZ/rollup-plugin-nano-css/
I've created a loader that does the same thing as my Rollup plugin: https://www.npmjs.com/package/nano-css-loader