Skip to content

Commit a1c98e1

Browse files
FflorielFfloriel
committed
Merge branch 'master' into feature-purge-unused-keyframe
2 parents 7630864 + e84ec06 commit a1c98e1

60 files changed

Lines changed: 18554 additions & 551 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.circleci/config.yml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
version: 2
2+
jobs:
3+
build:
4+
docker:
5+
- image: circleci/node:8.9.1
6+
steps:
7+
- checkout
8+
- run:
9+
name: install
10+
command: npm i
11+
- run:
12+
name: lint
13+
command: npm run lint
14+
- run:
15+
name: flow
16+
command: npm run flow
17+
- run:
18+
name: test
19+
command: npm test -- --coverage
20+
- run:
21+
name: coverage
22+
command: cat ./coverage/lcov.info | node_modules/.bin/codacy-coverage -p .

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Changelog
2+
3+
# v0.14.0 - 2017-12-07
4+
5+
* Merge PR https://github.com/FullHuman/purgecss/pull/29 by @jsnanigans: add
6+
`raw` for content option to pass a raw string instead of a filepath.
7+
* Fix incorrect logic that removes attributes selectors.
8+
* Update dependencies.

‎README.md‎

Lines changed: 71 additions & 236 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,83 @@
1-
# Purgecss
2-
[![Build Status](https://travis-ci.org/FullHuman/purgecss.svg?branch=master)](https://travis-ci.org/FullHuman/purgecss) [![CircleCi](https://circleci.com/gh/FullHuman/purgecss/tree/master.svg?style=shield)]() [![dependencies Status](https://david-dm.org/fullhuman/purgecss/status.svg)](https://david-dm.org/fullhuman/purgecss) [![devDependencies Status](https://david-dm.org/fullhuman/purgecss/dev-status.svg)](https://david-dm.org/fullhuman/purgecss?type=dev)
3-
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/2f2f3fb0a5c541beab2018483e62a828)](https://www.codacy.com/app/FullHuman/purgecss?utm_source=github.com&utm_medium=referral&utm_content=FullHuman/purgecss&utm_campaign=Badge_Grade)
1+
# Purgecss
2+
3+
[![Build Status](https://travis-ci.org/FullHuman/purgecss.svg?branch=master)](https://travis-ci.org/FullHuman/purgecss)
4+
[![CircleCi](https://circleci.com/gh/FullHuman/purgecss/tree/master.svg?style=shield)]()
5+
[![dependencies Status](https://david-dm.org/fullhuman/purgecss/status.svg)](https://david-dm.org/fullhuman/purgecss)
6+
[![devDependencies Status](https://david-dm.org/fullhuman/purgecss/dev-status.svg)](https://david-dm.org/fullhuman/purgecss?type=dev)
7+
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/2f2f3fb0a5c541beab2018483e62a828)](https://www.codacy.com/app/FullHuman/purgecss?utm_source=github.com&utm_medium=referral&utm_content=FullHuman/purgecss&utm_campaign=Badge_Grade)
48
[![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)
59
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
10+
[![npm](https://img.shields.io/npm/v/purgecss.svg)](https://www.npmjs.com/package/purgecss)
611
[![license](https://img.shields.io/github/license/fullhuman/purgecss.svg)]()
712

8-
913
<p align="center">
1014
<img src="./.assets/logo.png" height="200" width="200" alt="Purgecss logo"/>
1115
</p>
1216

17+
## What is purgecss?
1318

14-
- [What is purgecss?](#what-is-purgecss)
15-
- [Getting started](#getting-started)
16-
- [Usage](#usage)
17-
- [Build plugin](#build-plugin)
18-
- [CLI](#cli)
19-
- [Differences with](#differences-with)
20-
- [Contributing](#contributing)
19+
When you are building a website, chances are that you are using a css framework
20+
like Bootstrap, Materializecss, Foundation, etc... But you will only use a small
21+
set of the framework and a lot of unused css styles will be included.
2122

23+
This is where Purgecss comes into play. Purgecss analyzes your content and your
24+
css files. Then it matches the selectors used in your files with the one in your
25+
content files. It removes unused selectors from your css, resulting in smaller
26+
css files.
2227

23-
## What is purgecss?
28+
## Documentation
29+
30+
You can find the purgecss documentation
31+
[on this website](https://www.purgecss.com).
2432

25-
Purgecss is a tool inspired by Purifycss to remove unused css. Originally thought as the v2 of purifycss,
26-
purgecss has for goal to act in a similar way while correcting the known problems of purifycss. If you want
27-
to know more about the differences between purifycss and purgecss, go to the section [Differences with](#differences-with).
28-
When you are building a website, chances are that you are using a css framework. Bootstrap, Materializecss, Foundation are
29-
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
30-
a lot of unused css styles will be included.
31-
This is where Purgecss comes into play. Purgecss takes your content and your css and matches the selectors used in your files
32-
with the one in your content files. It removes every unused selectors from your css files, resulting in smaller, optimize css
33-
files.
33+
* [Configuration](https://www.purgecss.com/configuration.html)
34+
* [CLI](https://www.purgecss.com/cli.html)
35+
* [Javascript API](https://www.purgecss.com/javascript-api.html)
36+
* [Webpack plugin](https://www.purgecss.com/with-webpack.html)
37+
* [Gulp plugin](https://www.purgecss.com/with-gulp.html)
38+
* [Rollup plugin](https://www.purgecss.com/with-rollup.html)
39+
* [Whitelisting](https://www.purgecss.com/whitelisting.html)
40+
* [Extractors](https://www.purgecss.com/extractors.html)
41+
* [Comparison](https://www.purgecss.com/comparison.html)
3442

35-
### Getting Started
43+
## Getting Started
3644

3745
#### Installation
3846

3947
```
4048
npm i --save-dev purgecss
4149
```
4250

43-
### Documentation
51+
## Usage
4452

45-
- [API](./docs/API.md)
46-
- [Extractor](./docs/Extractor.md)
53+
```js
54+
import Purgecss from 'purgecss'
55+
const purgeCss = new Purgecss({
56+
content: ['**/*.html'],
57+
css: ['**/*.css']
58+
})
59+
const result = purgecss.purge()
60+
```
4761

48-
### Usage
62+
With a custom extractor:
4963

5064
```js
51-
import Purgecss from "purgecss"
52-
import purgeHtml from "purge-from-html"
65+
import Purgecss from 'purgecss'
66+
import purgeHtml from 'purge-from-html'
5367
const purgeCss = new Purgecss({
54-
content: ["**/*.html"],
55-
css: ["**/*.css"],
56-
extractors: [
57-
{
58-
extractor: purgeHtml,
59-
extensions: ["html"]
60-
}
61-
]
68+
content: ['**/*.html'],
69+
css: ['**/*.css'],
70+
extractors: [
71+
{
72+
extractor: purgeHtml,
73+
extensions: ['html']
74+
}
75+
]
6276
})
6377
const result = purgecss.purge()
6478
```
6579

66-
#### Build Plugin
80+
### Build Plugin
6781

6882
<div align="center">
6983
<a href="https://github.com/FullHuman/purgecss-webpack-plugin">
@@ -77,220 +91,41 @@ const result = purgecss.purge()
7791
</a>
7892
</div>
7993

80-
##### Gulp
81-
82-
```js
83-
const gulp = require('gulp')
84-
const purgecss = require('gulp-purgecss')
85-
86-
gulp.task('purgecss', () => {
87-
return gulp.src('src/**/*.css')
88-
.pipe(purgecss({
89-
content: ["src/**/*.html"]
90-
}))
91-
.pipe(gulp.dest('build/css'))
92-
})
93-
```
94-
95-
##### Webpack
96-
97-
98-
```js
99-
const path = require('path')
100-
const glob = require('glob')
101-
const ExtractTextPlugin = require('extract-text-webpack-plugin')
102-
const PurgecssPlugin = require('../../')
103-
104-
const PATHS = {
105-
src: path.join(__dirname, 'src')
106-
}
107-
108-
module.exports = {
109-
entry: './src/index.js',
110-
output: {
111-
filename: 'bundle.js',
112-
path: path.join(__dirname, 'dist')
113-
},
114-
module: {
115-
rules: [
116-
{
117-
test: /\.css$/,
118-
use: ExtractTextPlugin.extract({
119-
fallback: 'style-loader',
120-
use: 'css-loader?sourceMap'
121-
})
122-
}
123-
]
124-
},
125-
plugins: [
126-
new ExtractTextPlugin('[name].css?[hash]'),
127-
new PurgecssPlugin({
128-
paths: glob.sync(`${PATHS.src}/*`),
129-
styleExtensions: ['.css']
130-
})
131-
]
132-
}
133-
```
134-
135-
##### Rollup
136-
137-
```js
138-
import { rollup } from 'rollup';
139-
import purgecss from 'rollup-plugin-purgecss';
140-
141-
rollup({
142-
entry: 'main.js',
143-
plugins: [
144-
purgecss({
145-
content: ["index.html"]
146-
})
147-
]
148-
});
149-
```
150-
151-
#### CLI
152-
153-
```
154-
purgecss --css <css> --content <content> [option]
155-
156-
Options:
157-
--con, --content glob of content files [array]
158-
-c, --config configuration file [string]
159-
-o, --out Filepath directory to write purified css files to [string]
160-
-w, --whitelist List of classes that should not be removed
161-
[array] [default: []]
162-
-h, --help Show help [boolean]
163-
-v, --version Show version number [boolean]
164-
```
165-
166-
167-
### Extractor
168-
169-
Purgecss can be adapted to suit your need. If you want to purify exclusively html file, you might want
170-
to consider the _purge-from-html_ extractor.
171-
Purgecss relies on extractors to get the list of selector used in a file.
172-
There are multiples types of files that can contains selectors such as html files, templating files like pug, or even javascript file.
173-
174-
#### Using an extractor
175-
176-
You can use an extractor by settings the extractors option in the purgecss config file.
177-
```js
178-
import purgeJs from "purgecss-from-js"
179-
import purgeHtml from "purge-from-html"
180-
181-
const options = {
182-
content: [],// files to extract the selectors from
183-
css: [],// css
184-
extractors: [
185-
{
186-
extractor: purgeJs,
187-
extensions: ["js"]
188-
},
189-
{
190-
extractor: purgeHtml,
191-
extensions: ["html"]
192-
}
193-
]
194-
}
195-
export default options
196-
```
197-
198-
#### Default extractor
199-
200-
Purgecss provides a default extractor that is working with all types of files but can be limited and not fit exactly the type of files that you are using.
201-
The default extractor considers every word of a file as a selector.
202-
The default extractor has a few limitations:
203-
- Do not consider special characters such as `@`.
204-
205-
#### Legacy extractor
206-
207-
The legacy extractor reproduces the behavior of _purifycss_. You can use the Legacy extractor by setting the option `legacy: true`.
208-
The legacy extractor has a few limitations:
209-
- Do not extract uppercase selector
210-
- Do not extract numbers
211-
212-
#### Create an extractor
213-
214-
An extractor is a simple class with one method. The method `extract` takes the content of a file as a string and return an array of selectors.
215-
By convention, the name of the npm package is `purge-from-[typefile]` (e.g. purge-from-pug). You can look at the list of extractor on npm by searching `purge-from`.
216-
217-
```js
218-
219-
class PurgeFromJs {
220-
static extract(content) {
221-
// return array of css selectors
222-
}
223-
}
224-
225-
```
226-
227-
228-
### Differences with
229-
230-
#### Purifycss
231-
232-
The biggest flaw with purifycss is its lack of modularity. It is also is biggest benefit, purifycss can work with any files,
233-
not just html or javascript. But purifycss works by looking at all the words in the files and comparing them with the selectors
234-
in the css. Every words is consider a selector, which means that a lot of selectors can be consider used because you have the
235-
selector name in a paragraph or somewhere in your files.
236-
237-
Purgecss fixes this problem by providing the possibility to create an _extractor_, an extractor is a function that takes the content
238-
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
239-
that returns an ast and then looks through it to select the css selectors. That is the way `purge-from-html` works.
240-
You can specified which selectors you want to use for each types of files, and so, get the most accurate results.
241-
You can still use the default or the legacy extractor that will act the same way as purifycss.
242-
243-
#### Uncss
244-
245-
As indicated in its Readme, Uncss works the following way:
246-
1. The HTML files are loaded by jsdom and JavaScript is executed.
247-
2. All the stylesheets are parsed by PostCSS.
248-
3. document.querySelector filters out selectors that are not found in the HTML files.
249-
4. The remaining rules are converted back to CSS.
250-
251-
Because of the emulation of html, and the execution of javascript, uncss is effective at removing unused selectors from web application.
252-
But the emulation can have a cost in term of performance and practicality. Uncss works by emulating the html files. To remove unused css
253-
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`
254-
on each selectors and step 4.
255-
Uncss by its design is probably the most accurate tool to remove css out of a web application at this moment.
256-
257-
Purgecss does not have an extractor right now for javascript files. But because of its modularity, developers can create an extractor for specific
258-
framework (vue, react, aurelia) and files (pug, ejs) and get the most accurate result without the need of emulation.
259-
94+
* [Webpack](https://www.purgecss.com/with-webpack.html)
95+
* [Gulp](https://www.purgecss.com/with-gulp.html)
96+
* [Rollup](https://www.purgecss.com/with-rollup.html)
26097

26198
## Contributing
26299

263-
Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
100+
Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of
101+
conduct, and the process for submitting pull requests to us.
264102

265103
## Versioning
266104

267-
Purgecss use [SemVer](http://semver.org/) for versioning.
105+
Purgecss use [SemVer](http://semver.org/) for versioning.
268106

269107
## Acknowledgment
270108

271-
Purgecss was originally thought as the v2 of purifycss. And because of it, it is greatly inspired by it.
272-
The plugins such as purgecss-webpack-plugin are based on the purifycss plugin.
273-
Below is the list of the purifycss repositories:
274-
- [purifycss](https://github.com/purifycss/purifycss)
275-
- [gulp-purifycss](https://github.com/purifycss/gulp-purifycss)
276-
- [purifycss-webpack](https://github.com/webpack-contrib/purifycss-webpack)
109+
Purgecss was originally thought as the v2 of purifycss. And because of it, it is
110+
greatly inspired by it.\
111+
Some of the plugins such as purgecss-webpack-plugin are based on the purifycss plugin.\
112+
Below is the list of the purifycss repositories:
277113

278-
## License
114+
* [purifycss](https://github.com/purifycss/purifycss)
115+
* [gulp-purifycss](https://github.com/purifycss/gulp-purifycss)
116+
* [purifycss-webpack](https://github.com/webpack-contrib/purifycss-webpack)
279117

280-
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
118+
## License
281119

120+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
121+
for details.
282122

283123
## Troubleshooting
284124

285125
#### Wrong extractor is selected
286126

287-
The extractors needs to be defined from the more specific to the less specific. Meaning that you need to define `js` extractor after `ejs`. So the `js` extractor will not be selected for ejs files.
288-
> You can specified extensions like `.es.js`.
289-
290-
#### Some unused css are not removed
291-
292-
If you are using the default or legacy extractor, look here.
293-
Head over the repository of the extractor and open an issue.
294-
Be as precise as possible when describing the issue, provide the
295-
css file and content file if possible.
127+
The extractors needs to be defined from the more specific to the less specific.
128+
Meaning that you need to define `js` extractor after `ejs`. So the `js`
129+
extractor will not be selected for ejs files.
296130

131+
> You can specified extensions like `.es.js`.

0 commit comments

Comments
 (0)