komachi/usedcss

PostCSS plugin which helps you extract only used styles.

usedcss

PostCSS plugin which helps you extract only used styles. Unlike uncss and others does not render your pages to find used classes, but instead parse it statically, which can be beneficial in some cases. Also support simple Angular's ng-class parsing. And also, due to awesomeness of PostCSS, it works with LESS and SCSS via PostCSS syntaxes.

<!--- HTML file -->
<div class="test"></div>

/* Input */
.test { color: #000; }
.test2 { color: #fff; }

/* Output */
.test { color: #000; }

Installation

npm i usedcss --save

Options

html

Type: array of globs At least html or js option is required

HTML files to check css selector usage against them.

js

Type: array of globs At least html or js option is required

JS files to check css selector usage against them.

ignore

Type: array of strings

Saves ignored selectors even if they are not presented in DOM.

ignoreRegexp

Type: array of regexps

Use it to save selectors based on regexp.

ngclass

Type: boolean

Default: false

Parse or not to parse ng-class statements.

ignoreNesting

Type: boolean

Default: false

Ignore nesting so .class1 .class2 will be saved even if there is element with class2, but it's not nested with class1. Useful if you use templates.

templateMode

Type: boolean

Default: false

Useful if you run usedcss against nested templates. It split selectors so if you have an element with class class1 in one file and an element with class class2 in another one, it will save rule with .class1 .class2 selector.

templateCache

Type: boolean

Default: false

Check also for html presented in Angular's $templateCache. If you want to use this option, js option is required.

Usage

Check out PostCSS documentation on how to use PostCSS plugins.

usedcss's Issues

Working with HTML strings

Hi

Is there any way that I could use this with HTML in memory rather than in the filesytem? If there's a way to avoid writing and reading from the filesystem I'd be keen to use that.

Thanks

React className support

Hi! Awesome project. I'd love to be able to use in on react components that have a className property.

Make the use case more clear in the Readme

Hello,

I'm a backend developer, so I'm always looking for libraries which help me be more professional in the frontend. I stumbled upon this library but have some questions about the use case.

Is this library only for HTML files? Or does it also go through JavaScript and check if I somewhere apply a class via JS to a module? Also, what about php files? Let's say I'm building my class like this

$className = 'class-' . rand(0, 10);

This creates a "random" class name. What if I never use the class directly in HTML/JS but only in the php files. Will this be able to do this?

So in short: What files does the library check?

HTML ?
JS ?
PHP ?

Would be awesome if you could put this type of information somewhere.