postcss-attribute-selector-prefix

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; 
}