Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/huyng12/matocss

(Experimenting) Transform CSS Modules to enable Atomic CSS benefits 🌱
https://github.com/huyng12/matocss

atomic-css css-modules webpack

Last synced: 10 days ago
JSON representation

(Experimenting) Transform CSS Modules to enable Atomic CSS benefits 🌱

Awesome Lists containing this project

README

        

# MatoCSS

Transform CSS Modules to enable Atomic CSS benefits

_Please note that it is still experimenting. I do not recommend using this in production._

![](./images/comparison.png)

## Usage

MatoCSS only supports Webpack now.

### Webpack

You need to install our loader first.

```
npm install @matocss/webpack
```

Update `webpack.config.js` to add our loader for CSS Modules files.

Make sure you put the loader in the last to work.

See the example [here](./examples/create-react-app/config/webpack.config.js#L507-L527).

```javascript
{
test: cssModuleRegex,
use: [
// ... another loaders
{ loader: "@matocss/webpack" },
],
},
```

## License

[MIT](./LICENSE) License © 2022-Present [Huy Nguyen](https://github.com/huyng12)