1 | # cssnano [![Build Status](https://travis-ci.org/ben-eb/cssnano.svg?branch=master)][ci] [![NPM version](https://badge.fury.io/js/cssnano.svg)][npm] [![Dependency Status](https://gemnasium.com/ben-eb/cssnano.svg)][deps] [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/ben-eb/cssnano?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
2 |
|
3 | > A modular minifier, built on top of the [PostCSS] ecosystem.
|
4 |
|
5 | *Note that this project is still a work in progress, and needs more testing
|
6 | before it can be recommended to use in production. There are some optimisations
|
7 | that need to be further expanded upon, and others yet to be written.*
|
8 |
|
9 | cssnano is a modular minifier that aims to utilise small modules from the
|
10 | PostCSS ecosystem, rather than being an all-encompassing module that may be
|
11 | difficult to contribute to. Because it is written on top of PostCSS, it is able
|
12 | to do more than simple whitespace transforms - including advanced optimisations
|
13 | such as custom identifier reduction, `z-index` rebasing, and adjacent selector
|
14 | merging.
|
15 |
|
16 | ## Install
|
17 |
|
18 | With [npm](https://npmjs.org/package/cssnano) do:
|
19 |
|
20 | ```
|
21 | npm install cssnano
|
22 | ```
|
23 |
|
24 | ## Usage
|
25 |
|
26 | ### CLI
|
27 |
|
28 | cssnano ships with a command line app.
|
29 |
|
30 | ```
|
31 | cssnano main.css
|
32 | ```
|
33 |
|
34 | To output this to a file specify a second parameter:
|
35 |
|
36 | ```
|
37 | cssnano main.css main.min.css
|
38 | ```
|
39 |
|
40 | You can also use stdin & stdout redirections:
|
41 |
|
42 | ```
|
43 | cssnano < main.css > main.min.css
|
44 | ```
|
45 |
|
46 | To see all available options, do:
|
47 |
|
48 | ```
|
49 | cssnano --help
|
50 | ```
|
51 |
|
52 | ### gulp
|
53 |
|
54 | Use [`gulp-cssnano`].
|
55 |
|
56 | ### grunt
|
57 |
|
58 | Use [`grunt-cssnano`].
|
59 |
|
60 | ### broccoli
|
61 |
|
62 | Use [`broccoli-cssnano`].
|
63 |
|
64 | ### Scripting
|
65 |
|
66 | cssnano can be used directly via its node.js API, or consumed as a PostCSS
|
67 | plugin.
|
68 |
|
69 | #### node.js (`nano(css, [options])`)
|
70 |
|
71 | ```js
|
72 | var nano = require('cssnano');
|
73 | var readFile = require('fs').readFileSync;
|
74 | var writeFile = require('fs').writeFileSync;
|
75 |
|
76 | var input = readFile('main.css', 'utf8');
|
77 |
|
78 | writeFile('main.min.css', nano(input));
|
79 | ```
|
80 |
|
81 | #### PostCSS (`nano([options])`)
|
82 |
|
83 | ```js
|
84 | var nano = require('cssnano');
|
85 | var readFile = require('fs').readFileSync;
|
86 | var writeFile = require('fs').writeFileSync;
|
87 | var postcss = require('postcss');
|
88 |
|
89 | var input = readFile('main.css', 'utf8');
|
90 | var output = postcss().use(nano()).use(/* other plugin */).process(input).css;
|
91 |
|
92 | writeFile('main.min.css', output);
|
93 | ```
|
94 |
|
95 | #### Options
|
96 |
|
97 | ##### sourcemap
|
98 |
|
99 | Set this to `true` to generate an inline source map.
|
100 |
|
101 | ##### zindex
|
102 |
|
103 | Set this to `false` to disable z-index transforms.
|
104 |
|
105 | ##### calc
|
106 |
|
107 | Set this to `false` to disable calc transforms. If it is an object, it will be
|
108 | passed as the options to [`postcss-calc`].
|
109 |
|
110 | ##### urls
|
111 |
|
112 | Set this to `false` to disable URL normalisation. If it is an object, it will be
|
113 | passed as the options to [`postcss-normalize-url`].
|
114 |
|
115 | ##### idents
|
116 |
|
117 | Set this to `false` to disable custom identifier reduction.
|
118 |
|
119 | ##### merge
|
120 |
|
121 | Set this to `false` to disable merging of rules.
|
122 |
|
123 | ##### comments
|
124 |
|
125 | If this is an object, it will be passed as the options to
|
126 | [`postcss-discard-comments`].
|
127 |
|
128 | ## Motivation
|
129 |
|
130 | As of this writing, there are *many* ways to minify CSS available; for the Node
|
131 | ecosystem alone, there are lots of [modules] that offer this functionality.
|
132 | However, some of these projects are buggy and others are not being maintained.
|
133 | Furthermore, it is difficult to contribute to such projects with large amounts
|
134 | of integrated code. What if we could utilise the power of modularity and split
|
135 | up a CSS minifier into small pieces that have single responsibility? This
|
136 | project's aim is, eventually, to become entirely composed of node modules that
|
137 | are responsible for small CSS optimisations. At present, it is composed of the
|
138 | following modules:
|
139 |
|
140 | * [`postcss-calc`]: Convert `calc()` functions where possible.
|
141 | `calc(5 * 10px)` -> `50px`
|
142 | * [`postcss-colormin`]: Convert colors into their smallest representation.
|
143 | `#ff0000` -> `red`
|
144 | * [`postcss-convert-values`]: Convert time/length values.
|
145 | `500ms` -> `.5s`
|
146 | * [`postcss-discard-comments`]: Discard comments, unless marked as special.
|
147 | * [`postcss-discard-duplicates`]: Discard duplicate rules.
|
148 | * [`postcss-discard-empty`]: Discard empty rules and media queries.
|
149 | * [`postcss-discard-font-face`]: Discard unused `@font-face` rules.
|
150 | * [`postcss-font-family`]: Optimise whitespace/quoting of `font-family`
|
151 | properties.
|
152 | * [`postcss-merge-idents`]: Merge duplicated `@keyframes` and `@counter-style`
|
153 | identifiers with different names.
|
154 | * [`postcss-merge-rules`]: Merge adjacent rules together.
|
155 | * [`postcss-minify-font-weight`]: Convert `bold` -> `700` and `normal` -> `400`
|
156 | * [`postcss-minify-selectors`]: Optimise whitespace/quoting of selectors.
|
157 | * [`postcss-normalize-url`]: Optimise URL representations.
|
158 | * [`postcss-pseudoelements`]: Optimise double colon pseudo syntax to the single
|
159 | colon syntax.
|
160 | * [`postcss-reduce-idents`]: Rename `@keyframes`, `@counter-style` and `counter`
|
161 | identifiers to save space.
|
162 | * [`postcss-single-charset`]: Ensure that there is only one `@charset` in the
|
163 | CSS file.
|
164 | * [`postcss-unique-selectors`]: Ensure selectors are unique.
|
165 | * [`postcss-zindex`]: Rebase `z-index` values to save space.
|
166 |
|
167 | There are some optimisations that are not quite ready to be released as
|
168 | separate modules yet, and these are still integrated into this module.
|
169 |
|
170 | ## Contributing
|
171 |
|
172 | Pull requests are welcome. If you add functionality, then please add unit tests
|
173 | to cover it.
|
174 |
|
175 | ## License
|
176 |
|
177 | MIT © [Ben Briggs](http://beneb.info)
|
178 |
|
179 | [modules]: https://github.com/ben-eb/css-minifiers
|
180 | [PostCSS]: https://github.com/postcss/postcss
|
181 |
|
182 | [`postcss-calc`]: https://github.com/postcss/postcss-calc
|
183 | [`postcss-colormin`]: https://github.com/ben-eb/postcss-colormin
|
184 | [`postcss-convert-values`]: https://github.com/ben-eb/postcss-convert-values
|
185 | [`postcss-discard-comments`]: https://github.com/ben-eb/postcss-discard-comments
|
186 | [`postcss-discard-duplicates`]: https://github.com/ben-eb/postcss-discard-duplicates
|
187 | [`postcss-discard-empty`]: https://github.com/ben-eb/postcss-discard-empty
|
188 | [`postcss-discard-font-face`]: https://github.com/ben-eb/postcss-discard-font-face
|
189 | [`postcss-font-family`]: https://github.com/ben-eb/postcss-font-family
|
190 | [`postcss-merge-idents`]: https://github.com/ben-eb/postcss-merge-idents
|
191 | [`postcss-merge-rules`]: https://github.com/ben-eb/postcss-merge-rules
|
192 | [`postcss-minify-font-weight`]: https://github.com/ben-eb/postcss-minify-font-weight
|
193 | [`postcss-minify-selectors`]: https://github.com/ben-eb/postcss-minify-selectors
|
194 | [`postcss-normalize-url`]: https://github.com/ben-eb/postcss-normalize-url
|
195 | [`postcss-pseudoelements`]: https://github.com/axa-ch/postcss-pseudoelements
|
196 | [`postcss-reduce-idents`]: https://github.com/ben-eb/postcss-reduce-idents
|
197 | [`postcss-single-charset`]: https://github.com/hail2u/postcss-single-charset
|
198 | [`postcss-unique-selectors`]: https://github.com/ben-eb/postcss-unique-selectors
|
199 | [`postcss-zindex`]: https://github.com/ben-eb/postcss-zindex
|
200 |
|
201 | [`gulp-cssnano`]: https://github.com/ben-eb/gulp-cssnano
|
202 | [`grunt-cssnano`]: https://github.com/sindresorhus/grunt-cssnano
|
203 | [`broccoli-cssnano`]: https://github.com/sindresorhus/broccoli-cssnano
|
204 |
|
205 | [ci]: https://travis-ci.org/ben-eb/cssnano
|
206 | [deps]: https://gemnasium.com/ben-eb/cssnano
|
207 | [npm]: http://badge.fury.io/js/cssnano
|