Skip to content

Commit d2338bd

Browse files
committed
doc: update README
1 parent dd3e8d5 commit d2338bd

File tree

1 file changed

+45
-4
lines changed

1 file changed

+45
-4
lines changed

README.md

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,57 @@
11
# React CSS components
22

3-
React CSS components is a CSS based module format to define styled React DOM
4-
components.
3+
**PREVIEW:** This package is not yet released on npm and is not ready to be used.
54

6-
Example `styles.react.css`:
5+
A React centric convention for [CSS modules][].
6+
7+
(Currently only Webpack is supported but support for other build system can be
8+
added later.)
9+
10+
## Motivation
11+
12+
Provide a simplified component based API for consuming CSS modules which
13+
abstracts the call site from being dependent on CSS classes.
14+
15+
## Installation & Usage
16+
17+
Install from npm:
18+
19+
% npm install react-css-components
20+
21+
Configure in `webpack.config.js`:
22+
23+
module.exports = {
24+
...
25+
module: {
26+
loaders: [
27+
{
28+
test: /\.react.css$/,
29+
loader: 'babel-loader!react-css-components/webpack',
30+
}
31+
]
32+
}
33+
...
34+
}
35+
36+
Now you can author React components in `Styles.react.css`:
737

838
Label {
939
color: red;
40+
41+
:hover {
42+
color: white;
43+
}
1044
}
1145

12-
Then:
46+
And consume them like regular React components:
1347

1448
import {Label} from './styles.react.css'
1549

1650
<Label /> // => <div className="<autogenerated classname>">...</div>
51+
52+
## TODO
53+
54+
* [ ] Support variants (generic pseudoclasses which can be toggled via JS).
55+
* [ ] Support adding PostCSS transform to build pipeline (think autoprefixer).
56+
57+
[CSS modules]: https://github.com/css-modules/css-modules

0 commit comments

Comments
 (0)