# react-css-modulizer

> A CLI to convert className string literals into CSS Modules

Latest version **0.1.6** (published 2020-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-css-modulizer
pnpm add react-css-modulizer
yarn add react-css-modulizer
bun add react-css-modulizer
```

Provides the command `react-css-modulizer`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2020-03-19 |
| First published | 2020-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Emmanuel |
| Maintainers | exifers |

## Links

- npm: https://www.npmjs.com/package/react-css-modulizer
- npm.io page: https://npm.io/package/react-css-modulizer

## Dependencies (9)

- [css](https://npm.io/package/css.md) ^2.2.4
- [glob](https://npm.io/package/glob.md) ^7.1.6
- [global](https://npm.io/package/global.md) ^4.4.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^8.1.0
- [inquirer](https://npm.io/package/inquirer.md) ^7.0.2
- [minimist](https://npm.io/package/minimist.md) ^1.2.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.7.7
- [context-sequence](https://npm.io/package/context-sequence.md) ^1.0.0
- [babel-plugin-react-transform-classname-to-css-modules](https://npm.io/package/babel-plugin-react-transform-classname-to-css-modules.md) ^0.1.0

## Recent versions

- 0.1.6 (latest) — 2020-03-19
- 0.1.5 — 2020-03-07
- 0.1.4 — 2020-03-07
- 0.1.3 — 2020-03-07
- 0.1.2 — 2020-03-07
- 0.1.1 — 2020-03-07
- 0.1.0 — 2020-03-07

## README

# react-css-modulizer
[![npm version](https://img.shields.io/npm/v/react-css-modulizer.svg?style=flat-square)](https://www.npmjs.com/package/react-css-modulizer)
[![downloads](https://img.shields.io/npm/dm/react-css-modulizer.svg?style=flat-square)](https://npm-stat.com/charts.html?package=react-css-modulizer)

A CLI to convert classnames attributes in React into CSS Modules.

## Table of Contents
- [Motivation](#motivation)
- [Supported className expressions](#supported-classname-expressions)
- [Install](#install)
- [Usage](#usage)
- [className expression output format](#classname-expression-output-format)

## Motivation
CSS Modules are neat. If you have an (old) React project using plain string ```className``` attributes with CSS files, and you want to migrate it to CSS Modules, there was no automated way of doing it.
You may manage to do some stuff with [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules) but it requires adding import statements if you don't have them already on each file.

With this CLI, in a single command you can do the conversion.

## Supported className expressions
Currently it supports two types of className expressions :
- String Literal :
```jsx harmony
<div className='alert alert-primary'/>
``` 
- String Literal inside a JSX Expression Container
```jsx harmony
<div className={'alert alert-primary'}/>
```

## Install
```bash
// npm
npm install -g react-css-modulizer

// yarn
yarn global add react-css-modulizer
```

## Usage
Go into the project you want to convert to CSS Modules. Assuming all your sources are under a ```src/``` folder, run :
```bash
react-css-modulizer --path='src'
```

This will :
 - search among all files under ```src/```
 - read ```className``` attributes in ```*.js``` and ```*.jsx``` files
 - read classes in ```*.css``` files
 - figure out which className attribute refers to which css file
 - copy whole ```src/``` folder under a ```modulized/``` folder
 - apply conversion to CSS Modules under ```modulized/```, modifying ```className``` attributes and adding ```import``` statements for css files

### Command line options
| Name       | Descritpion                        | Type   | Default value   |
|------------|------------------------------------|--------|-----------------|
| path       | Project relative path              | string | src/            |
| jsxPath    | React files globbing pattern       | string | **/{*.js,*.jsx} |
| stylesPath | CSS files globbing pattern         | string | **/*.css        |
| outPath    | Modulized project copy output path | string | modulized/      |
| debug      | Run in debug if set                | string | false           |

## className expression output format
Currently the output form is always the same :
- Single class attribute :

input:
```jsx harmony
<div className={'alert'}/>
```
output:
```jsx harmony
import styles from 'css/alerts.css';

/* ... */

<div className={styles.alert}/> // it gives a simple member expression
```
- Multiple classes attribute :


input:
```jsx harmony
<div className={'alert alert-primary'}/>
```
output:
```jsx harmony
import styles from 'css/alerts.css';

/* ... */

<div className={`${styles.alert} ${styles.alertPrimary}`}/> // it uses a template litteral
```

---
_Source: https://npm.io/package/react-css-modulizer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._