https://github.com/nitive/posthtml-bem-sugar
PostHTML plugin for support to simplify the maintenance of BEM naming structure in jade.
https://github.com/nitive/posthtml-bem-sugar
Last synced: 4 months ago
JSON representation
PostHTML plugin for support to simplify the maintenance of BEM naming structure in jade.
- Host: GitHub
- URL: https://github.com/nitive/posthtml-bem-sugar
- Owner: Nitive
- Created: 2016-05-27T05:01:00.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-01-28T18:58:26.000Z (over 9 years ago)
- Last Synced: 2025-08-26T04:52:04.212Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PostHTML-bem-sugar
[](https://travis-ci.org/rajdee/posthtml-bem?branch=master) [](https://github.com/semantic-release/semantic-release)
[PostHTML](https://github.com/posthtml/posthtml) plugin for support to simplify the maintenance of [BEM](http://bem.info) naming structure in jade. It is works on top of [posthtml-bem](https://github.com/rajdee/posthtml-bem).
## Install
```
$ npm install --save-dev posthtml-jade posthtml-bem posthtml-bem-sugar
```
##Features
### Blocks
```jade
.-MadTeaParty
| Mad Tea Party
```
This would render like
```html
Mad Tea Party
```
### Elements
```jade
.-MadTeaParty
.__march-hare March Hare
```
This would render like
```html
March Hare
```
### Modifiers
```jade
.-MadTeaParty
.__march-hare._type_mad March Hare
.__march-hare._mad March Hare
```
This would render like
```html
March Hare
March Hare
```
## Usage
```javascript
var posthtml = require('posthtml');
// It is default config
var config = {
blockPrefix: '-',
elemPrefix: '__',
modPrefix: '_',
modDlmtr: '_',
};
var jade = [
'.-mad-tea-party',
' .__march-hare._type_mad March Hare',
' .__hatter._type_mad Hatter',
' .__dormouse._state_sleepy Dormouse'
].join('\n')
posthtml()
.use(require('posthtml-jade')())
.use(require('posthtml-bem-sugar')(config))
.use(require('posthtml-bem')())
.process(jade)
.then(function (result) {
console.log(result.html);
});
```
## With Gulp
```javascript
var gulp = require('gulp'),
rename = require('gulp-rename'),
posthtml = require('gulp-posthtml');
gulp.task('default', function () {
return gulp.src('before.jade')
.pipe(posthtml([
require('posthtml-jade')(),
require('posthtml-bem-sugar')({
// defaults
blockPrefix: '-',
elemPrefix: '__',
modPrefix: '_',
modDlmtr: '_',
}),
require('posthtml-bem')(),
]))
.pipe(rename('after.html'))
.pipe(gulp.dest('.'));
});
```