Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 🌱
- Host: GitHub
- URL: https://github.com/huyng12/matocss
- Owner: huyng12
- License: mit
- Created: 2022-09-03T09:32:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-06T06:50:58.000Z (over 2 years ago)
- Last Synced: 2024-10-31T00:24:46.634Z (about 2 months ago)
- Topics: atomic-css, css-modules, webpack
- Language: TypeScript
- Homepage:
- Size: 1.12 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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)