postcss-class-prefix

A PostCSS plugin to prefix/namespace slds- classes in the Lightning Design System's CSS.

This avoids collisions with other versions of the Salesforce Lightning Design System by prefixing your class names with a custom namespace.

Example input

.slds-classname { /* ... */ }

Example output sldsPrefix('custom-prefix')

.custom-prefix-classname { /* ... */ }

Installation

npm install postcss-slds-prefix

Usage

var fs         = require('fs');
var postcss    = require('postcss');
var sldsPrefix = require('postcss-slds-prefix');

var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = postcss()
            .use(sldsPrefix('my-prefix'))
            .process(css);

License

MIT

Acknowledgements

• Based on postcss-class-prefix