Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajdee/posthtml-classes
PostHTML-plugin to retrieve a list of classes from html
https://github.com/rajdee/posthtml-classes
Last synced: 2 months ago
JSON representation
PostHTML-plugin to retrieve a list of classes from html
- Host: GitHub
- URL: https://github.com/rajdee/posthtml-classes
- Owner: rajdee
- License: mit
- Created: 2015-10-12T17:36:08.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-05-06T14:47:43.000Z (over 8 years ago)
- Last Synced: 2024-10-18T09:14:31.538Z (3 months ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 21
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PostHTML-classes
[](http://badge.fury.io/js/posthtml-classes)
[](https://travis-ci.org/rajdee/posthtml-classes?branch=master)
[PostHTML](https://github.com/posthtml/posthtml)-plugin to retrieve a list of classes from html file(s) with support of nested structure (PostCSS, Stylus, SASS, SCSS, LESS)
## Install
```
$ npm install --save-dev posthtml-classes
```
## Usage
```javascript
var posthtml = require('posthtml'),
config = {
fileSave: true,
filePath: './classList.css',
overwrite: false,
eol: '\n',
nested: false,
curlbraces: true,
elemPrefix: '__',
modPrefix: '_',
modDlmtr: '_'
},
html = '
Nose';
posthtml()
.use(require('posthtml-classes')(config))
.process(html);
```
```css
/*classList.css*/
.animal {}
.animal__nose {}
.animal__nose_size_long {}
.elephant__trunk {}
.elephant__trunk_size_short {}
.elephant__trunk_color_brown {}
```
or with support of nested structure
```javascript
var posthtml = require('posthtml'),
config = {
fileSave: true,
filePath: './classList.css',
overwrite: false,
eol: '\n',
nested: false,
curlbraces: true,
elemPrefix: '__',
modPrefix: '_',
modDlmtr: '_'
},
html = '
Nose';
posthtml()
.use(require('posthtml-classes')(config))
.process(html);
```
```css
/*classList.css*/
.animal {
&__nose {
&_size_long {}
}
}
.elephant {
&__trunk {
&_size_short {}
&_color_brown {}
}
}
```
## Options
#### `fileSave`
Type: `boolean`
Default: `true`
Set `true` if you want to save the file, or `false` if you want to copy to clipboard (Mac/Win/Linux).
#### `filePath`
Type: `string`
Default: `./classList.css`
The filename and path of the saved file
#### `overwrite`
Type: `boolean`
Default: `false`
Set `true` if you want to save to the same file - the data in this file will be overwritten, or `false` if you want to save to a different file each time - the file will be have random id (i.e. classList_0394.css)
#### `eol`
Type: `string`
Default: `\n`
Characters that are added to the end of the CSS rule
#### `nested`
Type: `boolean`
Default: `false`
Set `true` if you want to generate css file with support of nested structure, which supported by PostCSS, Stylus, SCSS or LESS preprocessor, or `false` if you want to generate standard css.
#### `curlbraces`
Type: `boolean`
Default: `true`
Set `true` if you want to use curly braces, or `false` if you want to generate without them, for example for SASS or Stylus
#### `elemPrefix`
Type: `string`
Default: `__`
Characters that can be used for delimiter of element
#### `modPrefix`
Type: `string`
Default: `_`
Characters that can be used for delimiter of modifiers
#### `modDlmtr`
Type: `string`
Default: `_`
Characters that can be used for the separator modifier values
## With Gulp
```javascript
var gulp = require('gulp'),
posthtml = require('gulp-posthtml');
gulp.task('default', function () {
return gulp.src('test.html')
.pipe(posthtml([
require('posthtml-classes')({
fileSave: true,
filePath: './classList.css',
overwrite: false,
eol: '\n',
nested: false
})
]));
});
```
## License
MIT