Skip to content

Postcss plugin for prefixing css classes with corresponding file names

Notifications You must be signed in to change notification settings

vmakhaev/postcss-filename-prefix

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

postcss-filename-prefix

A PostCSS plugin to prefix classes with corresponding filenames
The idea is to isolate styles in framework components

js-standard-style

MyComponent.css

.myclass { /* ... */ }
.-mymodifier { /* ... */ }
.Mycapitalclass { /* ... */ }

Output:

.MyComponent-myclass { /* ... */ }
.-mymodifier { /* ... */ }
.Mycapitalclass { /* ... */ }

Ignores:

  • filenames that starts from not capital letter
  • modifiers (classes that starts from hyphen)
  • classes that starts from capital letter

Installation

npm install postcss-filename-prefix

Usage

var fs        = require('fs');
var postcss   = require('postcss');
var filenamePrefix = require('postcss-filename-prefix');

var css = fs.readFileSync('css/MyFile.css', 'utf8').toString();
var out = postcss()
          .use(filenamePrefix())
          .process(css);

Using the ignore option

var fs        = require('fs');
var postcss   = require('postcss');
var filenamePrefix = require('postcss-filename-prefix');

var css = fs.readFileSync('css/MyFile.css', 'utf8').toString();
var out = postcss()
          .use(filenamePrefix({ ignore: [/ng-/, 'some-class-to-ignore']}))
          .process(css);

License

MIT

Recommendation

Acknowledgements

About

Postcss plugin for prefixing css classes with corresponding file names

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published