babel-plugin-remove-stylename

0.1.0 verified Fri May 01 auth: no javascript

A Babel plugin that removes styleName props from React JSX elements at build time. Developed to silence React warnings about unknown DOM props when using react-css-modules in test environments. Version 0.1.0 is the current and only stable release. This plugin is a niche utility for testing setups, with no updates since its initial release. It differs from alternatives that mock CSS modules by operating on the AST level, ensuring styleName props are completely removed from the output.

Common errors

error ReferenceError: [BABEL] unknown: Unknown plugin "remove-stylename" specified in ... ↓

cause Plugin not installed or Babel cannot find it.

fix

Run 'npm install babel-plugin-remove-stylename --save-dev' and ensure node_modules is present.

error Jest encountered an unexpected token when processing JSX after adding the plugin. ↓

cause Babel configuration with plugin but missing @babel/preset-react.

fix

Add '@babel/preset-react' to your Babel presets in test environment.

error The styleName attribute is not being removed in output. ↓

cause Plugin not applied in the correct environment (e.g., test only).

fix

Verify the plugin is in the 'test' env section of Babel config and that Jest uses babel-jest.

Warnings

gotcha Jest caches Babel transformations aggressively; you may need to run with --no-cache after installing or modifying this plugin. ↓

fix Run jest with --no-cache flag or clear cache manually.

gotcha Plugin name in Babel config must be 'remove-stylename', not the full package name 'babel-plugin-remove-stylename'. ↓

fix Use 'remove-stylename' as the plugin name.

gotcha Plugin only affects JSX elements with styleName attribute; it does not handle CSS module imports or class name resolution. ↓

fix Combine with other CSS module mocking in tests if needed.

Install

npm install babel-plugin-remove-stylename

yarn add babel-plugin-remove-stylename

pnpm add babel-plugin-remove-stylename

Imports

default

wrong

plugins: ["babel-plugin-remove-stylename"]

correct

// In .babelrc or babel.config.js
plugins: ["remove-stylename"]

The plugin name is 'remove-stylename', not the full npm package name.

with options

wrong

plugins: ["remove-stylename", {}]

correct

plugins: [["remove-stylename", { /* options */ }]]

Options must be in a nested array.

Quickstart

Babel configuration to remove styleName props only in test environment.

// Install first: npm install babel-plugin-remove-stylename --save-dev
// Then configure Babel (e.g., in package.json):
"babel": {
  "env": {
    "test": {
      "plugins": ["remove-stylename"]
    }
  }
}
// Example input: <div styleName="container">Hello</div>
// Output: <div>Hello</div>