cssobjects-loader

load StyleSheets as JS-Objects

v0.5.0 released

stable version with webpack 4 compatibility

what is it?

• webpack loader
• per nativeCss
• transforms css-properties to camelCase
• very handy for react style injections

how to use it?

npm install cssobjects-loader --save-dev

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'
//      }
// 	}
// }

what else to know?

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'

issues

• for objectformat and enhanced usage go to nativeCss
• loader related issues or PR's are welcome
• known issues:
  • native-css not found (issue #18)

v1 roadmap

• [x] inject style's subclasses recursively
• [ ] use humps for objectKeys
• [ ] write testscripts, DocBlocks, Comments
• [ ] ES6 (/dist + buildScript)