aboutsummaryrefslogtreecommitdiff
path: root/node_modules/clean-css/README.md
diff options
context:
space:
mode:
authorFlorian Dold <florian.dold@gmail.com>2017-05-24 15:10:37 +0200
committerFlorian Dold <florian.dold@gmail.com>2017-05-24 15:11:17 +0200
commit7a3df06eb573d36142bd1a8e03c5ce8752d300b3 (patch)
tree70bfaea8884c374876f607774850a3a51c0cb381 /node_modules/clean-css/README.md
parentaca1143cb9eed16cf37f04e475e4257418dd18ac (diff)
fix build issues and add typedoc
Diffstat (limited to 'node_modules/clean-css/README.md')
-rw-r--r--node_modules/clean-css/README.md130
1 files changed, 115 insertions, 15 deletions
diff --git a/node_modules/clean-css/README.md b/node_modules/clean-css/README.md
index a19594801..b240f4381 100644
--- a/node_modules/clean-css/README.md
+++ b/node_modules/clean-css/README.md
@@ -22,8 +22,10 @@ According to [tests](http://goalsmashers.github.io/css-minification-benchmark/)
- [Install](#install)
- [Use](#use)
* [Important: 4.0 breaking changes](#important-40-breaking-changes)
+ * [What's new in version 4.1](#whats-new-in-version-41)
* [Constructor options](#constructor-options)
* [Compatibility modes](#compatibility-modes)
+ * [Fetch option](#fetch-option)
* [Formatting options](#formatting-options)
* [Inlining options](#inlining-options)
* [Optimization levels](#optimization-levels)
@@ -32,6 +34,7 @@ According to [tests](http://goalsmashers.github.io/css-minification-benchmark/)
+ [Level 2 optimizations](#level-2-optimizations)
* [Minify method](#minify-method)
* [Promise interface](#promise-interface)
+ * [CLI utility](#cli-utility)
- [FAQ](#faq)
* [How to optimize multiple files?](#how-to-optimize-multiple-files)
* [How to process remote `@import`s correctly?](#how-to-process-remote-imports-correctly)
@@ -90,11 +93,31 @@ clean-css 4.0 introduces some breaking changes:
* `sourceMap` option has to be a boolean from now on - to specify an input source map pass it a 2nd argument to `minify` method or via a hash instead;
* `aggressiveMerging` option is removed as aggressive merging is replaced by smarter override merging.
+## What's new in version 4.1
+
+clean-css 4.1 introduces the following changes / features:
+
+* `inline: false` as an alias to `inline: ['none']`;
+* `multiplePseudoMerging` compatibility flag controlling merging of rules with multiple pseudo classes / elements;
+* `removeEmpty` flag in level 1 optimizations controlling removal of rules and nested blocks;
+* `removeEmpty` flag in level 2 optimizations controlling removal of rules and nested blocks;
+* `compatibility: { selectors: { mergeLimit: <number> } }` flag in compatibility settings controlling maximum number of selectors in a single rule;
+* `minify` method improved signature accepting a list of hashes for a predictable traversal;
+* `selectorsSortingMethod` level 1 optimization allows `false` or `'none'` for disabling selector sorting;
+* `fetch` option controlling a function for handling remote requests;
+* new `font` shorthand and `font-*` longhand optimizers;
+* removal of `optimizeFont` flag in level 1 optimizations due to new `font` shorthand optimizer;
+* `skipProperties` flag in level 2 optimizations controlling which properties won't be optimized;
+* new `animation` shorthand and `animation-*` longhand optimizers;
+* `removeUnusedAtRules` level 2 optimization controlling removal of unused `@counter-style`, `@font-face`, `@keyframes`, and `@namespace` at rules;
+* the [web interface](https://jakubpawlowicz.github.io/clean-css) gets an improved settings panel with "reset to defaults", instant option changes, and settings being persisted across sessions.
+
## Constructor options
clean-css constructor accepts a hash as a parameter with the following options available:
* `compatibility` - controls compatibility mode used; defaults to `ie10+`; see [compatibility modes](#compatibility-modes) for examples;
+* `fetch` - controls a function for handling remote requests; see [fetch option](#fetch-option) for examples (since 4.1.0);
* `format` - controls output CSS formatting; defaults to `false`; see [formatting options](#formatting-options) for examples;
* `inline` - controls `@import` inlining rules; defaults to `'local'`; see [inlining options](#inlining-options) for examples;
* `inlineRequest` - controls extra options for inlining remote `@import` rules, can be any of [HTTP(S) request options](https://nodejs.org/api/http.html#http_http_request_options_callback);
@@ -142,7 +165,9 @@ new CleanCSS({
adjacentSpace: false, // controls extra space before `nav` element
ie7Hack: true, // controls removal of IE7 selector hacks, e.g. `*+html...`
mergeablePseudoClasses: [':active', ...], // controls a whitelist of mergeable pseudo classes
- mergeablePseudoElements: ['::after', ...] // controls a whitelist of mergeable pseudo elements
+ mergeablePseudoElements: ['::after', ...], // controls a whitelist of mergeable pseudo elements
+ mergeLimit: 8191, // controls maximum number of selectors in a single rule (since 4.1.0)
+ multiplePseudoMerging: true // controls merging of rules with multiple pseudo classes / elements (since 4.1.0)
},
units: {
ch: true, // controls treating `ch` as a supported unit
@@ -167,9 +192,52 @@ new CleanCSS({
})
```
+## Fetch option
+
+The `fetch` option accepts a function which handles remote resource fetching, e.g.
+
+```js
+var request = require('request');
+var source = '@import url(http://example.com/path/to/stylesheet.css);';
+new CleanCSS({
+ fetch: function (uri, inlineRequest, inlineTimeout, callback) {
+ request(uri, function (error, response, body) {
+ if (error) {
+ callback(error, null);
+ } else if (response && response.statusCode != 200) {
+ callback(response.statusCode, null);
+ } else {
+ callback(null, body);
+ }
+ });
+ }
+}).minify(source);
+```
+
+This option provides a convenient way of overriding the default fetching logic if it doesn't support a particular feature, say CONNECT proxies.
+
+Unless given, the default [loadRemoteResource](https://github.com/jakubpawlowicz/clean-css/blob/master/lib/reader/load-remote-resource.js) logic is used.
+
## Formatting options
-The `format` option accept the following options:
+By default output CSS is formatted without any whitespace unless a `format` option is given.
+First of all there are two shorthands:
+
+```js
+new CleanCSS({
+ format: 'beautify' // formats output in a really nice way
+})
+```
+
+and
+
+```js
+new CleanCSS({
+ format: 'keep-breaks' // formats output the default way but adds line breaks for improved readability
+})
+```
+
+however `format` option also accept a fine-grained set of options:
```js
new CleanCSS({
@@ -203,25 +271,39 @@ new CleanCSS({
```js
new CleanCSS({
- inline: ['local'] // default
+ inline: ['local'] // default; enables local inlining only
+})
+```
+
+```js
+new CleanCSS({
+ inline: ['none'] // disables all inlining
+})
+```
+
+```js
+// introduced in clean-css 4.1.0
+
+new CleanCSS({
+ inline: false // disables all inlining (alias to `['none']`)
})
```
```js
new CleanCSS({
- inline: ['all'] // same as ['local', 'remote']
+ inline: ['all'] // enables all inlining, same as ['local', 'remote']
})
```
```js
new CleanCSS({
- inline: ['local', 'mydomain.example.com']
+ inline: ['local', 'mydomain.example.com'] // enables local inlining plus given remote source
})
```
```js
new CleanCSS({
- inline: ['local', 'remote', '!fonts.googleapis.com']
+ inline: ['local', 'remote', '!fonts.googleapis.com'] // enables all inlining but from given remote source
})
```
@@ -255,12 +337,13 @@ new CleanCSS({
1: {
cleanupCharsets: true, // controls `@charset` moving to the front of a stylesheet; defaults to `true`
normalizeUrls: true, // controls URL normalization; defaults to `true`
- optimizeBackground: true, // controls `background` property optimizatons; defaults to `true`
- optimizeBorderRadius: true, // controls `border-radius` property optimizatons; defaults to `true`
- optimizeFilter: true, // controls `filter` property optimizatons; defaults to `true`
- optimizeFont: true, // ontrols `font` property optimizatons; defaults to `true`
- optimizeFontWeight: true, // controls `font-weight` property optimizatons; defaults to `true`
- optimizeOutline: true, // controls `outline` property optimizatons; defaults to `true`
+ optimizeBackground: true, // controls `background` property optimizations; defaults to `true`
+ optimizeBorderRadius: true, // controls `border-radius` property optimizations; defaults to `true`
+ optimizeFilter: true, // controls `filter` property optimizations; defaults to `true`
+ optimizeFont: true, // controls `font` property optimizations; defaults to `true`
+ optimizeFontWeight: true, // controls `font-weight` property optimizations; defaults to `true`
+ optimizeOutline: true, // controls `outline` property optimizations; defaults to `true`
+ removeEmpty: true, // controls removing empty rules and nested blocks; defaults to `true`
removeNegativePaddings: true, // controls removing negative paddings; defaults to `true`
removeQuotes: true, // controls removing quotes when unnecessary; defaults to `true`
removeWhitespace: true, // controls removing unused whitespace; defaults to `true`
@@ -268,7 +351,7 @@ new CleanCSS({
replaceTimeUnits: true, // controls replacing time units with shorter values; defaults to `true`
replaceZeroUnits: true, // controls replacing zero values with units; defaults to `true`
roundingPrecision: false, // rounds pixel values to `N` decimal places; `false` disables rounding; defaults to `false`
- selectorsSortingMethod: 'standard', // denotes selector sorting method; can be `natural` or `standard`; defaults to `standard`
+ selectorsSortingMethod: 'standard', // denotes selector sorting method; can be `'natural'` or `'standard'`, `'none'`, or false (the last two since 4.1.0); defaults to `'standard'`
specialComments: 'all', // denotes a number of /*! ... */ comments preserved; defaults to `all`
tidyAtRules: true, // controls at-rules (e.g. `@charset`, `@import`) optimizing; defaults to `true`
tidyBlockScopes: true, // controls block scopes (e.g. `@media`) optimizing; defaults to `true`
@@ -310,11 +393,14 @@ new CleanCSS({
mergeNonAdjacentRules: true, // controls non-adjacent rule merging; defaults to true
mergeSemantically: false, // controls semantic merging; defaults to false
overrideProperties: true, // controls property overriding based on understandability; defaults to true
+ removeEmpty: true, // controls removing empty rules and nested blocks; defaults to `true`
reduceNonAdjacentRules: true, // controls non-adjacent rule reducing; defaults to true
removeDuplicateFontRules: true, // controls duplicate `@font-face` removing; defaults to true
removeDuplicateMediaBlocks: true, // controls duplicate `@media` removing; defaults to true
removeDuplicateRules: true, // controls duplicate rules removing; defaults to true
- restructureRules: false // controls rule restructuring; defaults to false
+ removeUnusedAtRules: false, // controls unused at rule removing; defaults to false (available since 4.1.0)
+ restructureRules: false, // controls rule restructuring; defaults to false
+ skipProperties: [] // controls which properties won't be optimized, defaults to `[]` which means all will be optimized (since 4.1.0)
}
}
});
@@ -379,11 +465,15 @@ new CleanCSS({ returnPromise: true })
.catch(function (error) { // deal with errors });
```
+## CLI utility
+
+Clean-css has an associated command line utility that can be installed separately using `npm install clean-css-cli`. For more detailed information, please visit https://github.com/jakubpawlowicz/clean-css-cli.
+
# FAQ
## How to optimize multiple files?
-It can be done either by passing an array of paths, or, when sources are already available, a hash:
+It can be done either by passing an array of paths, or, when sources are already available, a hash or an array of hashes:
```js
new CleanCSS().minify(['path/to/file/one', 'path/to/file/two']);
@@ -400,6 +490,15 @@ new CleanCSS().minify({
});
```
+```js
+new CleanCSS().minify([
+ {'path/to/file/one': {styles: 'contents of file one'}},
+ {'path/to/file/two': {styles: 'contents of file two'}}
+]);
+```
+
+Passing an array of hashes allows you to explicitly specify the order in which the input files are concatenated. Whereas when you use a single hash the order is determined by the [traversal order of object properties](http://2ality.com/2015/10/property-traversal-order-es6.html) - available since 4.1.0.
+
Important note - any `@import` rules already present in the hash will be resolved in memory.
## How to process remote `@import`s correctly?
@@ -604,6 +703,7 @@ Sorted alphabetically by GitHub handle:
* [@altschuler](https://github.com/altschuler) (Simon Altschuler) for fixing `@import` processing inside comments;
* [@ben-eb](https://github.com/ben-eb) (Ben Briggs) for sharing ideas about CSS optimizations;
* [@facelessuser](https://github.com/facelessuser) (Isaac) for pointing out a flaw in clean-css' stateless mode;
+* [@grandrath](https://github.com/grandrath) (Martin Grandrath) for improving `minify` method source traversal in ES6;
* [@jmalonzo](https://github.com/jmalonzo) (Jan Michael Alonzo) for a patch removing node.js' old `sys` package;
* [@lukeapage](https://github.com/lukeapage) (Luke Page) for suggestions and testing the source maps feature;
Plus everyone else involved in [#125](https://github.com/jakubpawlowicz/clean-css/issues/125) for pushing it forward;