postcss-tag-prefixer

PostCSS plugin which replaces tag names with classes.

What is it created for?

Some CSS-libraries like Bootstrap or Foundation are using selectors matching tag names, which could be in the conflict (they break CSS isolation) with your components. postcss-tag-prefixer automatically appends prefixes to bare tag names.

a b c,
d e f[g] {}

↓

.b-a .b-b .b-c,
.b-d .b-e .b-f[g] {}

Installation

Use npm.

npm install postcss-tag-prefixer

API

var postcssTagPrefixer = require('postcss-tag-prefixer');

postcssTagPrefixer({prefix: String})

Return: Function

It converts tr td into .prefix-tr .prefix-td.

var postcss = require('postcss');
var postcssTagPrefixer = require('postcss-tag-prefixer');

postcss()
  .use(postcssTagPrefixer({prefix: 'prefix-'}))
  .process('tr td')
  .css;
//=> '.prefix-tr .prefix-td'

License

Licensed under the MIT License.