diff options
author | Florian Dold <florian.dold@gmail.com> | 2017-05-24 15:10:37 +0200 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2017-05-24 15:11:17 +0200 |
commit | 7a3df06eb573d36142bd1a8e03c5ce8752d300b3 (patch) | |
tree | 70bfaea8884c374876f607774850a3a51c0cb381 /node_modules/clean-css/README.md | |
parent | aca1143cb9eed16cf37f04e475e4257418dd18ac (diff) |
fix build issues and add typedoc
Diffstat (limited to 'node_modules/clean-css/README.md')
-rw-r--r-- | node_modules/clean-css/README.md | 130 |
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; |