cl

cssobjects-loader

npm i cssobjects-loader

Readme

cssobjects-loader

load StyleSheets as JS-Objects

Build Status npm version devDependencies Status Known Vulnerabilities
Maintenance PRs Welcome

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)

Jump To

v0.5.0 released
what is it?
how to use it?
issues
v1 roadmap