Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tbremer/postcss-atrule-bem
CSS At Rules for writing semantic BEM components.
https://github.com/tbremer/postcss-atrule-bem
bem css frontend postcss
Last synced: about 18 hours ago
JSON representation
CSS At Rules for writing semantic BEM components.
- Host: GitHub
- URL: https://github.com/tbremer/postcss-atrule-bem
- Owner: tbremer
- License: mit
- Created: 2016-10-13T05:39:18.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T12:28:37.000Z (almost 2 years ago)
- Last Synced: 2024-11-11T19:31:37.547Z (3 days ago)
- Topics: bem, css, frontend, postcss
- Language: JavaScript
- Size: 317 KB
- Stars: 11
- Watchers: 3
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
atrule-bem
---
[](https://travis-ci.org/tbremer/postcss-atrule-bem)
[](https://www.npmjs.com/package/postcss-atrule-bem)
[](https://github.com/tbremer/postcss-atrule-bem/blob/master/LICENSE)
_Efficiently create BEM components._
## Input / Output
### Put in:
```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
}
}
```
### Get out:
```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
#### `strict`
Type: `Boolean`
Default: `true`
**Disallows 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_
#### `warn`
Type: `Boolean`
Default: `true`
**Turns on warnings for imporperly formed components**
#### `shortcuts`
Type: `Boolean`
Default: `false`
#### `separators`
Type: `Object`
Default: `{
element: '__',
modifier: '--'
}`
## 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 */);
```
### Examples
```css
/* you can chain selectors with commas `,` */
/* input: */
@block foo {
@element bar, baz {}
}
/* output: */
.foo {}
.foo__bar, .foo__baz {}
```
### Pull requests welcome.
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');`