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
- inject style's subclasses recursively
- use humps for objectKeys
- write testscripts, DocBlocks, Comments
- ES6 (/dist + buildScript)