Registry / devops / babel-plugin-template-css-minifier

babel-plugin-template-css-minifier

library1.0.0jsnpmunverified

A Babel plugin (v1.0.0) that minifies CSS code embedded in template literals at build time. It identifies template literals prefixed with a `/* css */` comment and applies CSS minification using an internal minifier. Minimal configuration: just add to Babel plugins list. Different from runtime CSS-in-JS solutions, this operates at compile time with zero runtime overhead. Requires Node >=12 and a Babel environment. No updates since initial release — considered stable but low maintenance.

devops

npm install babel-plugin-template-css-minifier

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TEMPL

babel-plugin-template-css-minifier

devopsjavascriptv1.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

babel-plugin-template-css-minifier

✓ Add to Babel config: plugins: ['babel-plugin-template-css-minifier']

✗ const plugin = require('babel-plugin-template-css-minifier')

This is a Babel plugin, not typically imported in source code. Configure via .babelrc, babel.config.js, or programmatic API.

default

✓ module.exports = { plugins: ['babel-plugin-template-css-minifier'] }

✗ module.exports = { plugins: [require('babel-plugin-template-css-minifier')] }

Always reference by string name in Babel config.

Plugin object

✓ import plugin from 'babel-plugin-template-css-minifier'

✗ import { templateCssMinifier } from 'babel-plugin-template-css-minifier'

The plugin exports a function directly. Use default import or require().

Demonstrates setup with Babel config and CSS template minification from input to output.

// Install: npm install --save-dev babel-plugin-template-css-minifier // babel.config.js module.exports = { plugins: ['babel-plugin-template-css-minifier'] }; // Input: source.js const styles = /*css*/` body { margin: 0; padding: 0; } `; // Output (after Babel transform): // const styles = /*css*/`body{margin:0;padding:0;}`;

Debug

Known issues

gotchaPlugin order matters: Babel runs plugins from first to last. Place this plugin early in the plugins array to run before other plugins that transform template literals (e.g., @babel/plugin-transform-template-literals).

fix

In your Babel config, list this plugin before any other plugin that modifies template literals.

affects: *

gotchaThe plugin only activates on template literals immediately preceded by a `/* css */` comment. Omitting the comment will skip minification.

fix

Ensure every CSS template literal has the `/* css */` comment directly before it (no newline).

affects: *

gotchaThe plugin does not validate the CSS; it assumes valid CSS input. Malformed CSS may produce unexpected output or errors.

fix

Run a separate CSS validator before the Babel step, or ensure source CSS is correct.

affects: *

gotchaThis plugin modifies AST at build time; source maps may be affected if not configured properly.

fix

Enable Babel source maps (sourceMaps: true) and test that CSS line numbers correlate correctly.

affects: *

Errors

Common errors & fixes

Error: babel-plugin-template-css-minifier: CSS minification failed: ...

Invalid CSS syntax in the template literal (e.g., missing braces, unclosed strings).

fix

Correct the CSS syntax. The plugin uses a simple minifier that expects valid CSS.

TypeError: Cannot read properties of undefined (reading 'type')

Babel plugin ordering conflict: another plugin consumed or transformed the template literal AST node before this plugin runs.

fix

Move this plugin earlier in the plugins array, before any plugin that transforms template literals.

SyntaxError: Unexpected token (1:6) ... while parsing template literal

The `/* css */` comment is missing or not immediately adjacent to the template literal.

fix

Ensure the comment is directly before the backtick without any whitespace or other tokens.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/nsaunders/babel-plugin-template-css-minifier ↗

packagebabel-plugin-template-css-minifier ↗

homepagehttps://github.com/nsaunders/babel-plugin-template-css-minifier#readme ↗