5
5
* webpack loader
6
6
* per [ nativeCss] ( https://github.com/raphamorim/native-css )
7
7
* transforms css-properties to camelCase
8
- * very handy for react/material-ui style injections
8
+ * very handy for react style injections
9
9
10
10
### usage
11
11
``` npm install cssobjects-loader --save ```
12
12
13
+ __ your.so__
13
14
``` Stylus
14
- // test.styl
15
15
.test
16
16
font-size 20px
17
17
#anotherTest
18
18
padding-top 5px
19
19
.test23
20
20
font-size 23px
21
-
21
+ .testInner
22
+ font-decoration none
22
23
```
23
24
25
+ __ your.js__
24
26
``` Javascript
25
- // in your JS
26
- let style = require ( ' cssobjects-loader!stylus-loader!./test.styl ' );
27
+ let style = require ( ' cssobjects-loader!stylus-loader!./your.so ' );
28
+
27
29
console .log (style);
28
30
// {
29
31
// test: {
@@ -34,25 +36,47 @@ console.log(style);
34
36
// },
35
37
// test23: {
36
38
// 'fontSize': '23px'
39
+ // testInner: { // atm: only 1 lvl deep
40
+ // 'fontDecoration': 'none'
41
+ // }
37
42
// }
38
43
// }
39
44
```
40
45
41
- > to keep the properties as they are, pass the query 'transform=false' to the loader
46
+ __ additional information__
47
+ > to __ keep the style properties__ as they are, pass the query 'transform=false' to the loader
48
+ ``` Javascript
49
+ let style = require (' cssobjects-loader?transform=false!stylus-loader!./your.so' );
50
+ ```
51
+
52
+ > for __ pure css__ just use
53
+ ``` Javascript
54
+ let style = require (' cssobjects-loader!./your.css' );
55
+ ```
56
+
57
+ > for __ other style preprocessor__ syntax (less, sass, scss, ...)
58
+ > just add the realated loader (the loader has to output css!)
59
+ ``` Javascript
60
+ let style = require (' cssobjects-loader!sass-loader!./your.sass' );
61
+ ```
42
62
43
- > for ES6/7 usage, define loaders in the webpack config
63
+ > for ES6/7 usage, __ define loaders in the webpack config__
64
+ ``` Javascript
65
+ {
66
+ test: / \. (so)$ / , // .so = custom file extension
67
+ loader: ' cssobjects-loader?transform=true!stylus-loader'
68
+ }
69
+ // so you can just
70
+ // import yourStyleObject from '/styles/your.so'
71
+ ```
44
72
45
73
### issues
46
74
* for objectformat and enhanced usage go to [ nativeCss] ( https://github.com/raphamorim/native-css )
47
75
* loader related issues or PR's are welcome
48
- * subClass structure
49
- * stabilize 'injectSubClasses'
50
- * if transform = false, 'injectSubClasses' isn't called
76
+ * style's subclasses recognized only 1 lvl deep
77
+ * others are defined as followed: {parentClass__ subClass1__ subClass2: {}}
51
78
52
79
### to be done
53
- * check loader arguments (params, query, ...)
54
- * react usage (native-css --react)
80
+ * inject style's subclasses recursively
55
81
* write testscripts, DocBlocks, Comments
56
- * clean dependecies
57
- * enhanced 'transform' handling
58
- * ES6 ?
82
+ * ES6 (/dist + buildScript)
0 commit comments