Bemy-style-loader NPM

Bemy-style-loader

Webpack loader which allows to use bemy-class-builder in a nicer way.

Quick start

Install dependencies:

npm i bemy-class-builder
npm i -D bemy-style-loader

Put bemy-style-loader on top of your css loaders chain (don't forget to enable css modules feature)

{
  test: /.css$/,
  use: [
    {
      loader: 'bemy-style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        modules: true 
      }
    }
  ]
}

Enjoy :)

import styles from './styles.css'

const myBlockClassName = styles()
// Or
const myElementClassName = styles.myFancyElementName()

Options

Parameter	Type	Description	Default
`baseAppPath`	`string`	Allows `bemy-class-builder` to notify you about misused styles
`delims`	`object`	Defines delimeters for elem and/or mods
`delims.elem`	`string`	Separates element's name from block.	`__`
`delims.mod`	`string`, `{ name: string, val: string }`	Separates modifier from block or element.	`_`
`delims.mod.name`	`string`	Separates a modifier name from a block or an element.	`_`
`delims.mod.val`	`string`	Separates the value of a modifier from the modifier name.	`_`
`wordPattern`	`string`	Defines which characters can be used in names of blocks, elements, and modifiers.	`[a-z0-9]+(?:-[a-z0-9]+)*`

Note: delims and wordPattern sections represent options for bemNaming which is used to parse class names, feel free to check their docs for actual settings and good examples.

Have any troubles?

Bug reports and questions are welcomed here

webpack css-loader css-modules

loader-utils

@everything-registry/sub-chunk-1226 @zalastax/nolb-bem

7 years ago

7 years ago

7 years ago

7 years ago