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}";

MIT