# postcss-react-css-optimizer

> Optimization of CSS by React components

Latest version **0.0.2** (published 2016-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-react-css-optimizer
pnpm add postcss-react-css-optimizer
yarn add postcss-react-css-optimizer
bun add postcss-react-css-optimizer
```

## 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.0.2 |
| Published | 2016-01-25 |
| First published | 2016-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | ori livni |
| Maintainers | orisomething |
| Keywords | css, postcss, postcss-plugin, optimization, react |

## Links

- npm: https://www.npmjs.com/package/postcss-react-css-optimizer
- Repository: https://github.com/oriSomething/postcss-react-css-optimizer
- Homepage: https://github.com/oriSomething/postcss-react-css-optimizer#readme
- Issues: https://github.com/oriSomething/postcss-react-css-optimizer/issues
- npm.io page: https://npm.io/package/postcss-react-css-optimizer

## Dependencies (7)

- [glob](https://npm.io/package/glob.md) ^6.0.4
- [lodash](https://npm.io/package/lodash.md) ^4.0.0
- [recast](https://npm.io/package/recast.md) ^0.11.0
- [postcss](https://npm.io/package/postcss.md) ^5.0.14
- [esprima-fb](https://npm.io/package/esprima-fb.md) ^15001.1001.0-dev-harmony-fb
- [jscodeshift](https://npm.io/package/jscodeshift.md) ^0.3.12
- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^1.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2016-01-25

## README

# React CSS Optimizer (PostCSS plugin)

**It's still in experimental stage**

Remove unused CSS classes by analyzing `React.Component`s JavaScript files.
It's also support the use of the module `classnames`.


## But what about `CSS modules`?

`CSS modules` is super cool! But I disagree about the way is solves the problem.

1. `CSS modules` is more about preventing naming conflicts. While I prefer no uniqueness and more CSS classes shared between components (some references: [cssguidelines](http://cssguidelin.es/), ["The Top 5 Mistakes of Massive CSS"](https://www.youtube.com/watch?v=j6sAm7CLoCQ))
2. I don't like the idea of importing CSS in my JavaScript. And then find myself having more complexity in JavaScript and both CSS
3. it's difficult to set the order of the rules when you import both CSS both in CSS files and JavaScript files


## Usage

Installing from CLI:
```
 npm i --save-dev https://github.com/oriSomething/postcss-react-css-optimizer
```

Using it PostCSS:
```js
const postcss = require("postcss");
const postcssReactCSSOptimizer = require("postcss-react-css-optimizer");

postcss([postcssReactCSSOptimizer({
  files: "react-component-file.js"
})]).process(/* ··· */);
// ···
```

### Input:

`component.js`:

```js
import ReactDOM from "react-dom";

export default function SomeComponent() {
  return <div class="will-exist" />;
}
```

`component.css`:
```css
.will-exist { ··· }

.will-drop { ··· }
```

### Output:

`component.css`:
```css
.will-exist { ··· }
```


## Roadmap

- support pseudo and state selectors
- support parent child relation CSS classes (example: `.parent .child` / `.parent > .child`)
- show report of classes that have being dropped
- support for more complex ways to extract CSS classes (example `.selector-*`. `*` is for everythig)
- caching
- non JSX support
- maybe, changing the CSS tree and the JavaScript files, so many optimizations for CSS and CSS related in JavaScript files could be made
- support of CSS classes with special characters (example `.😁`)

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