postcss-attribute-selector-prefix
Version:
A attribute selector prefixer for postcss
122 lines (94 loc) • 3.52 kB
Markdown
> [PostCSS](https://github.com/postcss/postcss) plugin adds a namespace/prefix to attribute selector.
[](https://travis-ci.org/GitScrum/postcss-attribute-selector-prefix)[](https://ci.appveyor.com/project/GitScrum/postcss-attribute-selector-prefix)[]()[](https://www.npmjs.com/package/postcss-attribute-selector-prefix)[](https://david-dm.org/gitscrum/postcss-attribute-selector-prefix)[](https://github.com/sindresorhus/xo)[](https://coveralls.io/r/GitScrum/postcss-attribute-selector-prefix)
[](https://www.npmjs.com/package/postcss-attribute-selector-prefix)[](https://www.npmjs.com/package/postcss-attribute-selector-prefix)[](https://greenkeeper.io/)
Needs to escape from the third-party frameworks.
```bash
$ npm install postcss-attribute-selector-prefix
```
> **Note:** This project is compatible with node v6+
```js
// Dependencies
var fs = require('fs');
var postcss = require('postcss');
var attrSelectorPrefix = require('postcss-attribute-selector-prefix');
// CSS to be processed
var css = fs.readFileSync('css/input.css', 'utf8');
// Process css
var output = postcss()
.use(attrSelectorPrefix({prefix: 'test-'}))
.process(css)
.css;
console.log(output);
```
```css
/* input.css */
.class,
[],
[] {
color:red;
}
```
```css
/* Output example */
.class,
[],
[] {
color:red;
}
```
Type: `string`
Default: ``
Description: *add prefix to attribute selector*
Type: `Array`
Default: `[]`
Description: *attribute selector to which we must add the prefix*
Example: `['class', 'id']`
```css
/* input.css */
.class,
[],
[],
[] {
color: red;
}
```
```css
/* Output example */
.class,
[],
[],
[] {
color: red;
}
```
Type: `Array`
Default: `[]`
Description: *ignored attribute selector*
Example: `['type', 'alt']`
```css
/* input.css */
.class,
[],
[],
[] {
color: red;
}
```
```css
/* Output example */
.class,
[],
[],
[] {
color: red;
}
```