babel-plugin-stylis is a babel plugin to precompile a style string into a minified and optimized version. For so it uses the
stylis
package.
$ npm i babel-plugin-stylis # or yarn add babel-plugin-stylis
Add the plugin to your .babelrc
:
{
"plugins": [
[
"babel-plugin-stylis",
{
/* options */
}
]
]
}
From now on the css
tagged template expression will be available in your code:
var s = css`
.some-class {
display: flex;
}
`;
And transforms your css to a minified and optimized version:
var s = ".some-class{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}";