css-loader-dashed-class-names

Transform CSS camel-case class names to dashed-case in css-loader.

This library relies on getLocalIdent of css-loader, which requires webpack >= 2.2.1.

How to use

$3

``
npm i --save-dev css-loader-dashed-class-names
`

$3

webpack.config.js

`js
const precss = require('precss')
const autoprefixer = require('autoprefixer')
const postcssModuleValues = require('postcss-modules-values')
const { dashedCssClassName } = require('css-loader-dashed-class-names')

// put css-loader in module.rules
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: '1',
localIdentName: '[name]-[local]',
getLocalIdent: dashedCssClassName,
},
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
precss,
autoprefixer,
postcssModuleValues,
],
},
},
],
},
`

$3

AwesomeComponent.css

`css
.myRoot {
color: #f00;
}
`

AwesomeComponent.js

`js
import React, { Component } from 'react'
import styles from './AwesomeComponent.css'

export default class AwesomeComponent extends Component {
render() {
return (



)
}
}
`

$3

`css
.awesome-component-my-root {
color: #f00;
}
``