Nested Parenthetical Madness

    cssobjects-loader

    0.6.0 • Public • Published

    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)

    Install

    npm i cssobjects-loader

    DownloadsWeekly Downloads

    6

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    43.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • doubleu23