@stackr23/styleobjects-loader

webpack loader for stackr23/styleobjects

Usage no npm install needed!

<script type="module">
  import stackr23StyleobjectsLoader from 'https://cdn.skypack.dev/@stackr23/styleobjects-loader';
</script>

README

@stackr23/styleobjects-loader

load StyleSheets as JS-Objects (webpack-loader)

Build Status npm version devDependencies Status Known Vulnerabilities Greenkeeper badge
Maintenance PRs Welcome

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