This Babel plugin minifies CSS code embedded within a template literal. Simply tag the template literal with a leading /* css */ comment to activate the plugin.

Input

const css = /*css*/`
  body {
    height: 100%;
  }
`;

Output

const css = /*css*/`body{height: 100%;}`;

The plugin doesn't require any configuration in itself. Your .babelrc file can be as simple as this:

.babelrc

{ "plugins": ["babel-plugin-template-css-minifier"] }

Due to Babel's first-to-last plugin ordering, this plugin should be placed at or near the beginning of the list of plugins so that it runs before template literals are transformed by another plugin.