1 | # inline-css-loader
|
2 | Webpack loader for Radium Style Tag
|
3 |
|
4 | It only modifies the module.export object.
|
5 | It allows you to use seperate files for CSS Objects to use in Radiums Style Component.
|
6 | It allows you to use known Less/Sass Features.
|
7 |
|
8 | Currently Supported:
|
9 | * nested Objects
|
10 | * comma seperator
|
11 | * &
|
12 |
|
13 | # Example
|
14 | ```
|
15 | export default {
|
16 | '.foo': {
|
17 | '.bar': {
|
18 | width: 100
|
19 | },
|
20 | '&.batz': {
|
21 | width: 200
|
22 | },
|
23 | 'img, a': {
|
24 | backgroundColor: 'red'
|
25 | }
|
26 | }
|
27 | }
|
28 | ```
|
29 | Radium can not process this Object as it has nested CSS Selector. Once loaded with this loader it will look like this:
|
30 | ```
|
31 | export default {
|
32 | '.foo .bar': {
|
33 | width: 100
|
34 | },
|
35 | '.foo.batz': {
|
36 | width: 200
|
37 | },
|
38 | '.foo img': {
|
39 | backgroundColor: 'red'
|
40 | },
|
41 | '.foo a': {
|
42 | backgroundColor: 'red'
|
43 | }
|
44 | }
|
45 | ```
|
46 | Now you have an Object Radium can use as Rules for a Style tag.
|
47 |
|
48 | # Note
|
49 | The loader can only handle ES5.
|
50 | Please use babel before this loader.
|
51 | I've just used ES6 export style for readability
|