purgecss
Advanced tools
Comparing version 0.2.0 to 0.2.1
{ | ||
"name": "purgecss", | ||
"version": "0.2.0", | ||
"version": "0.2.1", | ||
"description": "Remove unused css selectors.", | ||
@@ -8,2 +8,3 @@ "main": "./lib/purgecss.js", | ||
"jsnext:main": "./lib/purgecss.es.js", | ||
"types": "./lib/purgecss.d.ts", | ||
"directories": { | ||
@@ -10,0 +11,0 @@ "doc": "docs", |
@@ -5,2 +5,4 @@ # Purgecss | ||
[![Codacy Badge](https://api.codacy.com/project/badge/Coverage/2f2f3fb0a5c541beab2018483e62a828)](https://www.codacy.com/app/FullHuman/purgecss?utm_source=github.com&utm_medium=referral&utm_content=FullHuman/purgecss&utm_campaign=Badge_Coverage) | ||
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) | ||
[![license](https://img.shields.io/github/license/fullhuman/purgecss.svg)]() | ||
@@ -13,2 +15,23 @@ | ||
- [What is purgecss?](#what-is-purgecss) | ||
- [Getting started](#getting-started) | ||
- [Usage](#usage) | ||
- [Build plugin](#build-plugin) | ||
- [CLI](#cli) | ||
- [Differences with](#differences-with) | ||
- [Contributing](#contributing) | ||
## What is purgecss? | ||
Purgecss is a tool inspired by Purifycss to remove unused css. Originally thought as the v2 of purifycss, | ||
purgecss has for goal to act in a similar way while correcting the known ploblems of purifycss. If you want | ||
to know more about the differences between purifycss and purgecss, go to the section [Differences with](#differences-with). | ||
When you are building a website, chances are that you are using a css framework. Bootstrap, Materializecss, Foundation are | ||
some of the big css framework that you can include to your website, but you will only use a small set of the framework and | ||
a lot of unused css styles will be included. | ||
This is where Purgecss comes into play. Purgecss takes your content and your css and matches the selectors used in your files | ||
with the one in your content files. It removes every unused selectors from your css files, resulting in smaller, optimize css | ||
files. | ||
### Getting Started | ||
@@ -109,13 +132,46 @@ | ||
### Differences with | ||
#### Purifycss | ||
The biggest flaw with purifycss is its lack of modularity. It is also is biggest benefit, purifycss can work with any files, | ||
not just html or javascript. But purifycss works by looking at all the words in the files and comparing them with the selectors | ||
in the css. Every words is consider a selector, which means that a lot of selectors can be consider used because you have the | ||
selector name in a paragraph or somewhere in your files. | ||
Purgecss fixes this problem by providing the possibility to create an _extractor_, an extractor is a function that takes the content | ||
of a file and extract the list of css selectors in it. It allows a perfect removal of unused css. The extractor can used a parser | ||
that returns an ast and then looks through it to select the css selectors. That is the way `purge-from-html` works. | ||
You can specified which selectors you want to use for each types of files, and so, get the most accurate results. | ||
You can still use the default or the legacy extractor that will act the same way as purifycss. | ||
#### Uncss | ||
As indicated in its Readme, Uncss works the following way: | ||
1. The HTML files are loaded by jsdom and JavaScript is executed. | ||
2. All the stylesheets are parsed by PostCSS. | ||
3. document.querySelector filters out selectors that are not found in the HTML files. | ||
4. The remaining rules are converted back to CSS. | ||
Because of the emulation of html, and the execution of javascript, uncss is effective at removing unused selectors from web application. | ||
But the emulation can have a cost in term of performance and practicality. Uncss works by emulating the html files. To remove unused css | ||
from pug template files, you will need to convert pug to html and then emulate the page inside jsdom and uncss will run `document.querySelector` | ||
on each selectors and step 4. | ||
Uncss by its design is probably the most accurate tool to remove css out of a web application at this moment. | ||
Purgecss does not have an extractor right now for javascript files. But because of its modularity, developers can create an extractor for specific | ||
framework (vue, react, aurelia) and files (pug, ejs) and get the most accurate result without the need of emulation. | ||
## Contributing | ||
Please read [CONTRIBUTING.md](./.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us. | ||
Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us. | ||
## Versioning | ||
We use [SemVer](http://semver.org/) for versioning. | ||
Purgecss use [SemVer](http://semver.org/) for versioning. | ||
## License | ||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details | ||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. | ||
@@ -122,0 +178,0 @@ |
// @flow | ||
import type { ExtractorsObj, Options } from './../flow/index.js' | ||
import { type ExtractorsObj, type Options } from './../flow/index.js' | ||
@@ -32,3 +32,2 @@ import fs from 'fs' | ||
options: Options | ||
selectors: Set<string> | ||
@@ -40,6 +39,5 @@ constructor(options: Options | string) { | ||
this.options = Object.assign(defaultOptions, options) | ||
this.selectors = new Set() | ||
} | ||
loadConfigFile(configFile?: string) { | ||
loadConfigFile(configFile: string) { | ||
const pathConfig = typeof configFile === 'undefined' ? CONFIG_FILENAME : configFile | ||
@@ -46,0 +44,0 @@ let options |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
668772
59
20392
190