Registry / serialization / babel-plugin-transform-postcss

babel-plugin-transform-postcss

library0.3.0jsnpmunverified

A Babel plugin that transforms CSS imports by processing them through PostCSS, enabling CSS Modules to generate JavaScript objects mapping class names to hashed strings. At version 0.3.0, it supports both synchronous and asynchronous PostCSS plugins and uses postcss-load-config for configuration. Unlike alternatives like css-modules-transform or css-modules-require-hook, it works with any PostCSS plugin and integrates with babelify for Browserify. It does not include CSS in the output; separate CSS extraction is required. Active development appears stalled, with no major releases since 2018, and it depends on PostCSS v6.

serialization web-framework

npm install babel-plugin-transform-postcss

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-postcss

serializationjavascriptv0.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

default (plugin)

✓ import postcssTransform from 'babel-plugin-transform-postcss'

✗ const postcssTransform = require('babel-plugin-transform-postcss')

This is a Babel plugin, not typically imported directly; it's used in .babelrc or babel.config.js as a string.

Babel configuration with the plugin and a postcss.config.js using postcss-modules to extract CSS module class names into JS object.

// .babelrc { "presets": [ ["env", { "targets": { "node": "current" } }] ], "plugins": [ "transform-postcss", ["transform-postcss", { "config": "postcss.config.js" }] ] } // postcss.config.js module.exports = (ctx) => ({ plugins: [ require('postcss-modules')({ getJSON: ctx.extractModules || (() => {}), }), ], }); // source.js import styles from './styles.css'; console.log(styles.example);

Debug

Known issues

gotchaCSS files are not included in the JavaScript bundle. You must separately process your CSS using the same PostCSS config (e.g., with postcss-cli) to generate actual CSS output.

fix

Ensure a separate build step for CSS (e.g., postcss-cli) is in place alongside this Babel plugin.

affects: >=0.1.0

gotchaCache is stored in /tmp/bptp-UNIQUE_ID and is only invalidated when CSS file content changes, not when postcss.config.js changes. This can lead to stale output if config changes.

fix

Manually delete the cache directory (/tmp/bptp-*) when changing PostCSS configuration.

affects: >=0.1.0

deprecatedDependency on PostCSS v6, which is outdated. Current PostCSS is v8. The plugin may need updates for compatibility.

fix

Use a more actively maintained plugin like 'devsnek/babel-plugin-transform-css-modules' or consider upgrading PostCSS manually (requires fork).

affects: >=0.1.0, <0.4.0

gotchaThe plugin requires 'postcss-load-config' to be installed, but it's not listed as a dependency. Ensure it's in your project.

fix

Install postcss-load-config: npm install --save-dev postcss-load-config

affects: >=0.1.0

Errors

Common errors & fixes

Error: Cannot find module 'postcss-load-config'

Missing required dependency for reading postcss.config.js.

fix

Run: npm install --save-dev postcss-load-config

Error: PostCSS plugin postcss-modules requires PostCSS 8. Update your PostCSS.

Plugin 'postcss-modules' requires PostCSS 8, but babel-plugin-transform-postcss pins PostCSS 6.

fix

Use an older version of postcss-modules that supports PostCSS 6 (e.g., v1.1.0), or switch to a different Babel plugin.

Module not found: Can't resolve './styles.css'

Webpack or bundler cannot handle CSS imports; this plugin only transforms the import syntax but does not bundle CSS.

fix

Add a CSS loader to your bundler (e.g., css-loader for Webpack) to handle .css files, or ensure the transform runs before bundling.

Upgrade

Version history

0.3.0latest on npm

Audit

Dependencies

postcssrequiredpeer dependency required to process CSS

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/wbyoung/babel-plugin-transform-postcss ↗

packagehttps://www.npmjs.com/package/babel-plugin-transform-postcss ↗