PostCSS plugin adds a namespace/prefix to attribute selector.

Why ?

Needs to escape from the third-party frameworks.

Install

$ npm install postcss-attribute-selector-prefix

Note: This project is compatible with node v6+

Usage

// Dependencies
import fs from 'fs';
import postcss from 'postcss';
import attrSelectorPrefix from 'postcss-attribute-selector-prefix';
// CSS to be processed
const css = fs.readFileSync('css/input.css', 'utf8');
// Process css
const output = postcss()
  .use(attrSelectorPrefix({prefix: 'test-'}))
  .process(css)
  .css;
console.log(output);

Example

/* input.css */
.class,
[type="text"],
[class*="lorem"] {
color:red;
}

/* Output example */
.class,
[type="text"],
[class*="test-lorem"] {
    color:red;
}

Options

`prefix`

Type: string
Default: ``
Description: add prefix to attribute selector

`filter`

Type: Array
Default: []
Description: attribute selector to which we must add the prefix
Example: ['class', 'id']

/* input.css */
.class,
[type="text"],
[class*="lorem"],
[id^="myID"] {
    color: red;
}

/* Output example */
.class,
[type="text"],
[class*="test-lorem"],
[id^="test-myID"] {
    color: red;
}

`ignore`

Type: Array
Default: []
Description: ignored attribute selector
Example: ['type', 'alt']

/* input.css */
.class,
[type="text"],
[alt*="ALT"],
[class*="class"] {
    color: red;
}

/* Output example */
.class,
[type="text"],
[alt*="ALT"],
[class*="test-class"] {
    color: red;
}