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.