Skip to content

Commit 4f2d6de

Browse files
author
DoubleU23
committed
updated "issues" and "tobedone"; added css subClass to example; added additional information
1 parent 47504fb commit 4f2d6de

File tree

1 file changed

+39
-15
lines changed

1 file changed

+39
-15
lines changed

README.md

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,27 @@
55
* webpack loader
66
* per [nativeCss](https://github.com/raphamorim/native-css)
77
* transforms css-properties to camelCase
8-
* very handy for react/material-ui style injections
8+
* very handy for react style injections
99

1010
### usage
1111
```npm install cssobjects-loader --save```
1212

13+
__your.so__
1314
```Stylus
14-
// test.styl
1515
.test
1616
font-size 20px
1717
#anotherTest
1818
padding-top 5px
1919
.test23
2020
font-size 23px
21-
21+
.testInner
22+
font-decoration none
2223
```
2324

25+
__your.js__
2426
```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+
2729
console.log(style);
2830
// {
2931
// test: {
@@ -34,25 +36,47 @@ console.log(style);
3436
// },
3537
// test23: {
3638
// 'fontSize': '23px'
39+
// testInner: { // atm: only 1 lvl deep
40+
// 'fontDecoration': 'none'
41+
// }
3742
// }
3843
// }
3944
```
4045

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+
```
4262

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+
```
4472

4573
### issues
4674
* for objectformat and enhanced usage go to [nativeCss](https://github.com/raphamorim/native-css)
4775
* 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: {}}
5178

5279
### to be done
53-
* check loader arguments (params, query, ...)
54-
* react usage (native-css --react)
80+
* inject style's subclasses recursively
5581
* write testscripts, DocBlocks, Comments
56-
* clean dependecies
57-
* enhanced 'transform' handling
58-
* ES6 ?
82+
* ES6 (/dist + buildScript)

0 commit comments

Comments
 (0)