css-module-transformer-beta

A CSS Module Transformer is a NPM package designed to transform classnames in JSX attributes to use CSS modules. This plugin replaces className="example" with className={styles.example} for static classnames and className={dynamicClassName} with className={styles[dynamicClassName]} for dynamic classnames.

Features

• Automatic Transformation: The plugin detects and transforms classnames containing hyphens to use CSS modules.

• Static Classnames: Replaces static classnames defined in JSX attributes with the corresponding CSS module syntax.

• Dynamic Classname Support: Seamlessly handle both static and dynamic classnames in JSX

• Preserve other JSX attributes while transforming classnames

Installation

Install my-project with npm

npm install -g css-module-transformer-beta

Usage

Transform a React or Next.js component file:

npx transform-classes ./path/to/YourComponent.js

Examples

Input:

import './YourComponent.css'; function YourComponent() { return ( <div className="container"> <h1 className="title">Hello, CSS Modules!</h1> </div> ); } export default YourComponent;

output

import styles from './YourComponent.module.css'; function YourComponent() { return ( <div className={styles.container}> <h1 className={styles.title}>Hello, CSS Modules!</h1> </div> ); } export default YourComponent;