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
• write testscripts, DocBlocks, Comments
• ES6 (/dist + buildScript)