❤
npm
Sign UpSign In

css-selector-loader

0.1.0 • Public • Published

npm node

CSS Selector Loader

Load CSS selectors and their styles into JS

Install

npm install css-selector-loader --save-dev

Usage

It's recommended to combine css-selector-loader with the postcss-loader

file.css

.foo {
    width: 100px;
    height: 100px;
}
 
.bar {
    width: var(--w)px;
    height: var(--h)px;
}

component.js

import {
    getFoo as getFooStyle
    getBar as getBarStyle
} from './file.css'
 
fooElement.style.cssText = getFooStyle();
barElement.style.cssText = getBarStyle({
    w: 50,
    h: 50
});
 

webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "css-selector-loader" },
          { loader: "postcss-loader" }
        ]
      }
    ]
  }
}

Options

Name Type Default Description
root {String} ./ helps inline local url(...)'s as data-uri's
camelCase {Boolean} true Enable/disable transfering css selectors into camel-case
useVarTemplate {Boolean} true Enable/disable use function arguments to replace with css variables

root

webpack.config.js

{
  loader: 'css-selector-loader',
  options: {
    root: path.resolve(__dirname, 'css')
  }
}

camelCase

webpack.config.js

{
  loader: 'css-selector-loader',
  options: {
    camelCase: false
  }
}

useVarTemplate

webpack.config.js

{
  loader: 'css-selector-loader',
  options: {
    useVarTemplate: false
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i css-selector-loader

Repository

github.com/terrykingcha/css-selector-loader

Homepage

github.com/terrykingcha/css-selector-loader#readme

Weekly Downloads

2

Version

0.1.0

License

MIT

Last publish

Collaborators

  • terrykingcha
Try on RunKit
Report malware