babel-plugin-react-remove-classname

1.0.0 verified Sat Apr 25 auth: no javascript

A Babel plugin (v1.0.0, last updated 2018) that removes CSS class names from JSX className attributes based on a configurable prefix (default "test-"). Useful for stripping test-only classes in production builds. Minimal configuration, no dependencies. Works with Babel 7 (v1.x) and Babel 6 (v0.x).

Common errors

error Error: Cannot find module 'babel-plugin-react-remove-classname' ↓

cause Plugin not installed or not in node_modules.

fix

Run npm install --save-dev babel-plugin-react-remove-classname

error ReferenceError: [BABEL] unknown: Unknown option: .prefix ↓

cause Incorrect configuration format in .babelrc.

fix

Use array syntax: ["react-remove-classname", { "prefix": "custom-" }]

Warnings

breaking v1.0.0 drops support for Node.js <6 and requires Babel 7. ↓

fix Upgrade to Babel 7 and Node.js >=6, and update .babelrc to use 'react-remove-classname' (no babel-plugin- prefix) for Babel 7.

Install

npm install babel-plugin-react-remove-classname

yarn add babel-plugin-react-remove-classname

pnpm add babel-plugin-react-remove-classname

Imports

default plugin
```
module.exports = { plugins: ['react-remove-classname'] }
```
Used in .babelrc or babel.config.js as a string reference.

with options

wrong

module.exports = { plugins: ['babel-plugin-react-remove-classname'] }

correct

const plugin = require('babel-plugin-react-remove-classname'); module.exports = { plugins: [[plugin, { prefix: 'e2e-' }]] }

Specify options using array syntax with the required module.

ESM import (for tools that support it)

wrong

import { reactRemoveClassname } from 'babel-plugin-react-remove-classname'

correct

import removeClassname from 'babel-plugin-react-remove-classname'; export default { plugins: [[removeClassname, { prefix: 'test-' }]] }

The plugin is CommonJS only; ESM import is a default import.

Quickstart

Configure Babel to remove class names starting with 'test-' from JSX className attributes.

// .babelrc
{
  "plugins": [
    ["react-remove-classname", { "prefix": "test-" }]
  ]
}

// Input: <div className="test-a hello test-b"></div>
// Output: <div className="hello"></div>