@stackr23/styleobjects-loader

load StyleSheets as JS-Objects (webpack-loader)

v0.7.0 released

stable version with webpack 4 compatibility

usage

npm install @stackr23/styleobjects-loader --save-dev

your.csso

.test23
  font-size 23px
  .testInner
    font-decoration none

your.js

import styleobject from '@stackr23/styleobjects-loader!stylus-loader!./your.csso'

styleobject

{
  test23: {
  'fontSize': '23px',
  testInner: {'fontDecoration': 'none'}
}

advanced usage

for ES6/7 usage, define loaders in the webpack config

// webpack.config.js
module: {rules: [...yourLoaders, {
  test:   /\.(csso)$/,
  use:    ['@stackr23/styleobjects-loader', 'stylus-loader']
}]}
// yourComponent.js
import yourStyleObject from '/styles/your.csso'

for other style preprocessor syntax (less, sass, scss, ...) just add the realated loader (the loader has to output css!)

let style = require('@stackr23/styleobjects-loader!sass-loader!./your.sass');

for pure css just use

let style = require('@stackr23/styleobjects-loader!./your.css');

v1 roadmap

• stackr23/styleobjects#3
• handle loader options
• ES6 (/dist + buildScript)

issues

• for objectformat and enhanced usage go to styleobjects
• webpack/loader related issues or PR's are welcome