/cssobjects-loader

Load Style-Definitions as JS-Objects

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

cssobjects-loader (deprecated)

load StyleSheets as JS-Objects

Build Status npm version devDependencies Status Known Vulnerabilities

cssobjecs-loader maintenance is closed!
v1.0.0 will be released as scoped package @stackr23/styleobjects-loader


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)