https://github.com/mini-eggs/babel-plugin-css-modules
A lean, framework agnostic (S)CSS (modules) in JS library.
https://github.com/mini-eggs/babel-plugin-css-modules
css css-in-js cssinjs styles styling
Last synced: 7 months ago
JSON representation
A lean, framework agnostic (S)CSS (modules) in JS library.
- Host: GitHub
- URL: https://github.com/mini-eggs/babel-plugin-css-modules
- Owner: mini-eggs
- License: mit
- Created: 2018-12-18T00:46:41.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-23T15:01:11.000Z (about 7 years ago)
- Last Synced: 2025-06-16T03:32:22.577Z (9 months ago)
- Topics: css, css-in-js, cssinjs, styles, styling
- Language: JavaScript
- Homepage:
- Size: 195 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# babel-plugin-css-modules
A lean, framework agnostic (S)CSS (modules) in JS library.
#### Why should you use babel-plugin-css-modules?
It's very lightweight -- nearly all work is done at compile time. The entire runtime shipped is only five lines of unminized JavaScript code.
```javascript
(function() {
var ss = document.createElement("style");
ss.innerHTML = `${styles}`;
document.head.appendChild(ss);
})();
```
That's 107 bytes minimized.
#### Why should you not use babel-plugin-css-modules?
If you ever plan to server-side render -- or if you want to export a standard `.css` file. Those two issues are not in scope of babel-plugin-css-modules as of now.
#### But what does it look like?
The minimal example is:
```javascript
let classes = styles`
body {
margin: 0
}
.container {
h1 {
font-size: 50px;
}
:before {
content: "1. ";
}
}
`;
document.body.innerHTML = `
This is a triumph.
`;
```
#### Installing
```bash
npm i -D babel-plugin-css-modules
```
#### Now, how do I use it?
With [Babel](https://babeljs.io/)! You must have this placed in your `.babelrc`
```json
{
"plugins": ["css-modules"]
}
```