https://github.com/nitive/babel-plugin-css-modules-react
https://github.com/nitive/babel-plugin-css-modules-react
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/nitive/babel-plugin-css-modules-react
- Owner: Nitive
- Created: 2016-02-10T06:31:21.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-01-28T18:58:37.000Z (over 9 years ago)
- Last Synced: 2025-04-07T13:40:38.336Z (about 1 year ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Babel Plugin CSS Modules React
[](https://circleci.com/gh/Nitive/babel-plugin-css-modules-react)
[](https://codecov.io/github/Nitive/babel-plugin-css-modules-react?branch=master)
## What's the Problem?
webpack css-loader itself has several disadvantages:
- You have to use camelCase CSS class names.
- Mixing CSS Modules and global CSS classes is cumbersome.
- Reference to an undefined CSS Module resolves to undefined without a warning.
### Babel Plugin React CSS Modules make all work for you
#### Use classes as usual
```javascript
import styles from './styles.css'
class Button extends React.Component {
render() {
return { this.props.children }
}
}
```
Will be converted into:
```javascript
import styles from './styles.css'
class Button extends React.Component {
render() {
return { this.props.children }
}
}
```
#### Easy use global CSS
```javascript
import styles from './styles.css'
const Button = ({ children }) => (
{ children }
)
```
#### Get warnings when you are mistaken
```javascript
import styles from './styles.css'
const Button = ({ children }) => (
{ children } // Warning: Class .erroneous-class is not specified in your css file
)
```
### Requirements
You *must* keep your classes map inside `styles` variable
## Future plans
Load styles with decorator syntax
```javascript
@modulize('./styles.css')
class Button extends React.Component {
render() {
return { this.props.children }
}
}
```