cssobjects-loader

Load Style-Definitions as JS-Objects

Showing:

Popularity

Downloads/wk

33

GitHub Stars

6

Maintenance

Last Commit

3yrs ago

Contributors

6

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

cssobjects-loader (deprecated)

load StyleSheets as JS-Objects

Build Status npm version devDependencies Status Known Vulnerabilities

DEPRECATED - use @stackr23/styleobjects-loader!

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)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial