load StyleSheets as JS-Objects
- webpack loader
- per nativeCss
- transforms css-properties to camelCase
- very handy for react style injections
npm install cssobjects-loader --save
your.so
.test
font-size 20px
#anotherTest
padding-top 5px
.test23
font-size 23px
.testInner
font-decoration none
your.js
let style = require('cssobjects-loader!stylus-loader!./your.so');
console.log(style);
// {
// test: {
// 'fontSize': '20px'
// },
// anotherTest: {
// 'paddingTop': '5px'
// },
// test23: {
// 'fontSize': '23px'
// testInner: { // atm: only 1 lvl deep
// 'fontDecoration': 'none'
// }
// }
// }
additional information
to keep the style properties as they are, pass the query 'transform=false' to the loader
let style = require('cssobjects-loader?transform=false!stylus-loader!./your.so');
for pure css just use
let style = require('cssobjects-loader!./your.css');
for other style preprocessor syntax (less, sass, scss, ...) just add the realated loader (the loader has to output css!)
let style = require('cssobjects-loader!sass-loader!./your.sass');
for ES6/7 usage, define loaders in the webpack config
{
test: /\.(so)$/, // .so = custom file extension
loader: 'cssobjects-loader?transform=true!stylus-loader'
}
// so you can just
// import yourStyleObject from '/styles/your.so'
- for objectformat and enhanced usage go to nativeCss
- loader related issues or PR's are welcome
- style's subclasses recognized only 1 lvl deep
- others are defined as followed: {parentClass__subClass1__subClass2: {}}
- inject style's subclasses recursively
- use humps for objectKeys
- write testscripts, DocBlocks, Comments
- ES6 (/dist + buildScript)