babel-plugin-css-modules
A lean, framework agnostic (S)CSS (modules) in JS library.
Why should you use babel-plugin-css-modules?
It's very lightweight -- nearly all work is done at compile time. The entire runtime shipped is only five lines of unminized JavaScript code.
{ var ss = document; ssinnerHTML = ``; documenthead;};
That's 107 bytes minimized.
Why should you not use babel-plugin-css-modules?
If you ever plan to server-side render -- or if you want to export a standard .css
file. Those two issues are not in scope of babel-plugin-css-modules as of now.
But what does it look like?
The minimal example is:
let classes = styles` body { margin: 0 } .container { h1 { font-size: 50px; } :before { content: "1. "; } }`; documentbodyinnerHTML = ` This is a triumph. `;
Installing
npm i -D babel-plugin-css-modules
Now, how do I use it?
With Babel! You must have this placed in your .babelrc