This PostCSS plugin will scopeify the following CSS selectors:
- Converts HTML elements into classes
- Classes
- Ids
- Keyframes
- Font-faces
const postcss = require('postcss');
const scopeify = require('postcss-scopeify-everything');
const opts = {};
postcss([ scopeify(opts) ])
.process(css)
.then(result => { console.log(result); });This will return an object with the following properties:
- css {string, hidden use
getCssaccess}: the raw scopeified CSS - elements {object}: map containing all the HTML element scopeified and converted into classes
- classes {object}: map containing all the class selectors scopeified
- ids {object}: map containing all the id selectors scopeified
- keyframes {object}: map containing all the @keyframe animations that were scopeified
- fontFaces {object}: map containing all the @font-face definitions that were scopeified
const pse = require('postcss-scopeify-everything');
const scopeify = pse.api();
const getCss = pse.getCss;
const css = 'div > .bro { display: flex; height: 50px; }';
scopeify(css).promise()
.then(result => {
console.log(result);
/* { elements: { div: 'div_el_4wb1Hi' },
classes: { bro: 'bro_4wb1Hi' },
ids: {},
keyframes: {} }
*/
console.log(getCss(result));
// .div_el_4wb1Hi > .bro_4wb1Hi { display: flex; height: 50px; }
});const pse = require('postcss-scopeify-everything');
const scopeify = pse.api();
const getCss = pse.getCss;
const css = '#foo, .bro { display: flex; height: 50px; }';
const scopified = scopeify(css).sync();
console.log(scopified);
/* { elements: {},
classes: { bro: 'bro_4uC3yI' },
ids: { foo: 'foo_4uC3yI' },
keyframes: {} }
*/
console.log(getCss(scopified));
// #foo_4uC3yI, .bro_4uC3yI { display: flex; height: 50px; }const pse = require('postcss-scopeify-everything');
const scopeify = pse.api({ ids: false, keyframes: false, elements: false });
const getCss = pse.getCss;
const scopeified = scopeify(css).sync();
console.log(scopeified);
console.log(getCss(scopeified));const pse = require('postcss-scopeify-everything');
const scopeify = pse.api({ scopeifyFn: hashFn });
const getCss = pse.getCss;
const scopeified = scopeify(css).sync();
console.log(scopeified);
console.log(getCss(scopeified));
function hashFn(css) {
return scopedName(name) {
return name + '_' + Math.round(+new Date()/1000);
}
}const autoprefixer = require('autoprefixer');
const pse = require('postcss-scopeify-everything');
const scopeify = pse.api({ plugins: [autoprefixer()] });
const getCss = pse.getCss;
const css = '.prefix { display: flex; }';
const scopeified = scopeify(css).sync();
console.log(scopeified);
/* { elements: {},
classes: { prefix: 'prefix_gQhnX' },
ids: {},
keyframes: {} }
*/
console.log(getCss(scopeified));
// .prefix_gQhnX { display: -webkit-box; display: -ms-flexbox; display: flex; }const pse = require('postcss-scopeify-everything');
const scopeify = pse.api({ scopeifyFn: () => name => name });
const getCss = pse.getCss;
const css = '.cool { display: flex; } div { font-size: 12px; }';
const scopeified = scopeify(css).sync();
console.log(scopeified);
/* { elements: { div: 'div_el' },
classes: { cool: 'cool' },
ids: {},
keyframes: {} }
*/
console.log(getCss(scopeified));
// .cool { display: flex; }
// .div_el { font-size: 12px; }By default, anytime an element is converted into a class, a special postfix is attached to avoid
class name conflicts, we can override this behavior to set a custom postfix using the
scopeifyElFn option.
const pse = require('postcss-scopeify-everything');
const scopeify = pse.api({ scopeifyElFn: name => name + '_special' });
const getCss = pse.getCss;
const css = 'table { width: 100%; } .table { border: 1px solid black; }';
const scopeified = scopeify(css).sync();
console.log(scopeified);
/* { elements: { table: 'table_special_gQhnX' },
classes: { table: 'table_gQhnX' },
ids: {},
keyframes: {} }
*/
console.log(getCss(scopeified));
// .table_special_gQhnX { width: 100%; }
// .table_gQhnX { border: 1px solid black; }The asterisk selector will be converted into a class using a special name __asterisk.
const css = '* { font-size: 12px; }';
const scopeified = scopeify(css).sync();
console.log(scopeified);
/* { elements: { '*': '__asterisk_gQhnX' },
classes: {},
ids: {},
keyframes: {} }
*/
console.log(getCss(scopeified));
// .__asterisk_gQhnX { font-size: 12px; }Use your own wildcard name
const pse = require('postcss-scopeify-everything');
const scopeify = pse.api({ asteriskName: '__wildcard__' });
const getCss = pse.getCss;
const css = '* { font-size: 12px; }';
const scopeified = scopeify(css).sync();
console.log(scopeified);
/* { elements: { '*': '__wildcard__gQhnX' },
classes: {},
ids: {},
keyframes: {} }
*/
console.log(getCss(scopeified));
// .__wildcard__gQhnX { font-size: 12px; }- plugins (Array): adds PostCSS plugins before the scopeify plugin
- scopeifyFn (Function): the function that hashes the identifier name
- scopeifyElFn (Function): the function that converts an element name to a class name
- asteriskName (Function|String): the string that is used for the wildcard selector
* - ids (Boolean): determines whether or not to disable scoping
ids - elements (Boolean): determines whether or not to disable scoping
elements - classes (Boolean): determines whether or not to disable scoping
classes - keyframes (Boolean): determines whether or not to disable scoping
keyframes - fontFaces (Boolean): determines whether or not to disable scoping
fontFaces