vessp / classnames-loader

classnames-loader

Function Approach to CSS Loader (with Webpack)

Table of Contents

• Install
• Usage
• License

Install

This project uses node and npm.

$ npm install classnames-loader
$ # OR
$ yarn add classnames-loader

Usage

In webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          ... // other loaders (ex. style loader)
          {
            loader: 'classnames-loader', // Insert classnames-loader right before css-loader
          },
          {
            loader: 'css-loader', // Translates CSS into CommonJS
            options: {
              modules: true, // Enable/Disable CSS Modules and setup mode
              // Note: localIdentName option is also supported
            },
          },
          ... // other loaders (ex. sass-loader)
        ]
      }
   }
}

styles.css

  .foo { color: red; }
  .bar { color: green; }
  .bar.active { color: blue; }

In JS

import styles from './styles.css' // import styles file

console.log(styles.foo) // foo
console.log(styles('foo')) // foo
console.log(styles('foo', { bar: false })) // foo
console.log(styles('foo', { bar: false, active: true })) // foo active
console.log(styles('foo', { bar: false}, { active:true })) // foo active
console.log(styles('foo', { bar: false}, { active:true })) // foo active
console.log(styles('foo', () => 'bar', { active:() => true })) // foo bar active
console.log(styles('foo', null, undefined, '', [])) // foo

License

ISC