File tree 1 file changed +45
-4
lines changed 1 file changed +45
-4
lines changed Original file line number Diff line number Diff line change 1
1
# React CSS components
2
2
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.
5
4
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 ` :
7
37
8
38
Label {
9
39
color: red;
40
+
41
+ :hover {
42
+ color: white;
43
+ }
10
44
}
11
45
12
- Then :
46
+ And consume them like regular React components :
13
47
14
48
import {Label} from './styles.react.css'
15
49
16
50
<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
You can’t perform that action at this time.
0 commit comments