Transpile BEM Components to valid CSS
npm install postcss-atrule-bematrule-bem
---



_Efficiently create BEM components._
css
@block btn {
background-color: var(--primary);
border: .0625rem solid var(--primary-constrast);
color: var(--black); @element icon {
color: var(--primary-contrast-high)
}
@modifier transparent {
background-color: transparent;
border-color: transparent
}
}
`$3
`css
.btn {
background-color: var(--primary);
border: .0625rem solid var(--primary-constrast);
color: var(--black)
}
.btn__icon {
color: var(--primary-contrast-high)
}
.btn--transparent {
background-color: transparent;
border-color: transparent
}
`Options
####
strictType:
BooleanDefault:
trueDisallows improperly formed components
- Block's can only have: Elements and Modifiers.
- Elements can only have Modifiers.
- Modifiers cannot house any types.
_Side Effect: turning off
strict turns off warnings_####
warnType:
BooleanDefault:
trueTurns on warnings for imporperly formed components
####
shortcutsType:
BooleanDefault:
false####
separatorsType:
ObjectDefault:
{Usage
Add atrule-bem to your build tool:
`bash
npm install --save-dev postcss-atrule-bem
`#### Node
`js
import atRuleBem from 'postcss-atrule-bem';atRuleBem.process(/ your css /);
`#### PostCSS
Add PostCSS to your build tool:
`bash
npm install postcss --save-dev
`Load atrule-bem as a PostCSS plugin:
`js
import atRuleBem from 'postcss-atrule-bem';postcss([ atRuleBem() ])
.process(/ your css /, / options /);
`$3
`css
/ you can chain selectors with commas , // input: /
@block foo {
@element bar, baz {}
}
/ output: /
.foo {}
.foo__bar, .foo__baz {}
`$3
Open for pull requests in the following areas:
- Collision detection
- throw a warning and don't compile when:
- a block is created twice (name collisions)
- a block makes reference to another block
Updating 3.0 for CommonJS users.
I added a babel plugin to correctly adapt the default export to the expected CommonJS type.To upgrade change
const atRuleBem = require('postcss-atrule-bem').default; to const atRuleBem = require('postcss-atrule-bem');`