Permalink
Fetching contributors…
Cannot retrieve contributors at this time
889 lines (820 sloc) 22.7 KB
[[modules]]
name = "autoprefixer"
shortDescription = "Removes outdated vendor prefixes"
longDescription = "Removes unnecessary prefixes based on the `browsers` option. Note that *by default*, **it will not add new prefixes** to the CSS file."
inputExample = """
.box {
-moz-border-radius: 10px;
border-radius: 10px;
display: flex;
}
"""
outputExample = """
.box {
border-radius: 10px;
display: flex;
}
"""
source = "https://github.com/postcss/autoprefixer"
[[modules]]
name = "core"
shortDescription = "Normalizes whitespace & trailing semicolons"
longDescription = "Trims whitespace inside and around rules, selectors & declarations, plus removes the final semicolon inside every selector."
inputExample = """
.box {
text-decoration: underline;
color: red !important;
}
"""
outputExample = """
.box{text-decoration:underline;color:red!important}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/core.js"
[[modules]]
name = "filter-optimiser"
shortDescription = "Normalizes whitespace in filter functions"
longDescription = "Trims whitespace in filter functions, such as CSS filters and legacy Microsoft effects."
inputExample = """
.box {
filter: blur( 5px );
}
"""
outputExample = """
.box {
filter: blur(5px);
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/filterOptimiser.js"
[[modules]]
name = "function-optimiser"
shortDescription = "Normalizes CSS function whitespace"
longDescription = "Trims whitespace in CSS functions, except for `filter`."
inputExample = """
.box {
background: linear-gradient( #000, #fff );
}
"""
outputExample = """
.box {
background: linear-gradient(#000,#fff);
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/functionOptimiser.js"
[[modules]]
name = "normalize-string"
shortDescription = "Normalizes quotation marks in strings"
longDescription = """
Standardises the usage of double (by default) or single quoted strings, for
better gzip compression. Can also remove linebreaks which are inserted for
aesthetic purposes. If you prefer single quotes, you can set
`preferredQuote: 'single'` instead.
"""
inputExample = """
.box {
quotes: '«' "»";
content: 'This is a string which is \\
broken over multiple lines.';
}
"""
outputExample = """
.box {
quotes: "«" "»";
content: "This is a string which is broken over multiple lines.";
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/normalizeString.js"
[[modules]]
name = "normalize-unicode"
shortDescription = "Normalizes unicode-range descriptors"
longDescription = """
This optimisation can convert `unicode-range` descriptors to use the shorter
wildcard ranges when a particular value meets the wildcard criteria. Values will
be converted when the code matches `0` & `f` in the same place on both sides
of the range. So, `u+2000-2fff` can be converted to `u+2???`, but `u+2100-2fff`
will be left as it is.
"""
inputExample = """
@font-face {
font-family: "Latin Extended Additional";
unicode-range: u+1e00-1eff;
src: local("Baskerville");
}
body {
font-family: "Latin Extended Additional", sans-serif;
}
"""
outputExample = """
@font-face {
font-family: "Latin Extended Additional";
unicode-range: u+1e??;
src: local("Baskerville");
}
body {
font-family: "Latin Extended Additional", sans-serif;
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/normalizeUnicode.js"
tipDescription = """
The syntax for `unicode-range` can be confusing at times; it's not always clear
from reading the value what the descriptor is actually doing. However, this can
be remedied by using [postcss-unicode-characters][1], which allows you to write
using a more descriptive syntax.
The above example, using the [Latin Extended Additional][2] range, can be expressed
using this plugin by the following:
[1]: https://github.com/ben-eb/postcss-unicode-characters
[2]: http://unicode.org/charts/PDF/U1E00.pdf
"""
tipInput = """
@font-face {
font-family: "Latin Extended Additional";
unicode-characters: script("Latin Extended Additional");
src: local("Baskerville");
}
body {
font-family: "Latin Extended Additional", sans-serif;
}
"""
tipOutput = """
@font-face {
font-family: "Latin Extended Additional";
unicode-range: u+1e00-1eff;
src: local("Baskerville");
}
body {
font-family: "Latin Extended Additional", sans-serif;
}
"""
[[modules]]
name = "postcss-calc"
shortDescription = "Reduces CSS calc expressions"
longDescription = "Reduces CSS `calc` expressions whereever possible, ensuring both browser compatibility and compression."
inputExample = """
.box {
width: calc(2 * 100px);
}
"""
outputExample = """
.box {
width: 200px;
}
"""
source = "https://github.com/postcss/postcss-calc"
[[modules]]
name = "postcss-colormin"
shortDescription = "Converts color values to shorter equivalents"
longDescription = "Converts between hex, hsl, rgb and CSS keywords, in order to produce the smallest equivalent color value."
inputExample = """
.box {
background: hsl(134, 50%, 50%);
}
"""
outputExample = """
.box {
background: #40bf5e;
}
"""
source = "https://github.com/ben-eb/postcss-colormin"
[[modules]]
name = "postcss-convert-values"
shortDescription = "Converts length, time & angles"
longDescription = "Converts between equivalent length, time & angle values. Note that *by default*, length values are not converted."
inputExample = """
.box {
transition: color 500ms ease;
}
"""
outputExample = """
.box {
transition: color .5s ease;
}
"""
source = "https://github.com/ben-eb/postcss-convert-values"
[[modules]]
name = "postcss-discard-comments"
shortDescription = "Removes CSS comments"
longDescription = "Removes comments in and around rules, selectors & declarations. Note that any special comments marked with `!` are kept by default."
inputExample = """
/*! license */
.box {
/* Red headings */
color: red;
}
"""
outputExample = """
/*! license */
.box {
color: red;
}
"""
source = "https://github.com/ben-eb/postcss-discard-comments"
[[modules]]
name = "postcss-discard-duplicates"
shortDescription = "Removes duplicate rules"
longDescription = "Removes duplicated rules, at-rules and declarations. Note that this only works for *exact* duplicates."
inputExample = """
.box {
border: 1px solid silver;
}
.box {
border: 1px solid silver;
}
"""
outputExample = """
.box {
border: 1px solid silver;
}
"""
source = "https://github.com/ben-eb/postcss-discard-duplicates"
[[modules]]
name = "postcss-discard-empty"
shortDescription = "Removes empty rules & declarations"
longDescription = "Removes empty rules, media queries & rules with empty selectors, as they do not affect the output."
inputExample = """
.box {}
@media screen {}
{color: green;}
"""
outputExample = "/* (removed) */"
source = "https://github.com/ben-eb/postcss-discard-empty"
[[modules]]
name = "postcss-discard-overridden"
shortDescription = "Removes overridden at-rules"
longDescription = "Removes at-rules which have the same identifier as another; for example two instances of `@keyframes one`. As the browser will only count the *last* of these declarations, all others can safely be removed."
inputExample = """
@keyframes one {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes one {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.box {
animation-name: one;
}
"""
outputExample = """
@keyframes one {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.box {
animation-name: one;
}
"""
source = "https://github.com/Justineo/postcss-discard-overridden"
[[modules]]
name = "postcss-discard-unused"
shortDescription = "Removes unused definitions"
longDescription = "Removes at-rules that do not have any bearing on the CSS file. This is unsafe if you have other stylesheets which pair up to these rules."
inputExample = """
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
"""
outputExample = "/* (removed) */"
safe = false
source = "https://github.com/ben-eb/postcss-discard-unused"
[[modules]]
name = "postcss-filter-plugins"
shortDescription = "Excludes duplicated PostCSS plugins"
longDescription = "This helps increase performance of the module when used alongside other PostCSS plugins, by excluding duplicates. It does not actually transform the CSS."
source = "https://github.com/postcss/postcss-filter-plugins"
[[modules]]
name = "postcss-merge-idents"
shortDescription = "Merges duplicated at-rules with different names"
longDescription = "This will merge rules together that may have slightly different naming but do the same thing. Note that this is only unsafe if you rely on those animation names in JavaScript."
inputExample = """
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes dissolve {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.box {
animation-name: dissolve;
}
"""
outputExample = """
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.box {
animation-name: fadeOut;
}
"""
safe = false
source = "https://github.com/ben-eb/postcss-merge-idents"
[[modules]]
name = "postcss-merge-longhand"
shortDescription = "Merges properties into shorthand equivalents"
longDescription = "Collapses longhand properties into the shorthand representation, and where possible will also collapse top/right/bottom/left values. Supports `margin`, `padding` & `border` longhands."
inputExample = """
.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
"""
outputExample = """
.box {
margin: 10px 20px;
}
"""
source = "https://github.com/ben-eb/postcss-merge-longhand"
[[modules]]
name = "postcss-merge-rules"
shortDescription = "Merges adjacent rules"
longDescription = "Merges adjacent rules by selectors & overlapping property/value pairs."
inputExample = """
.box {
color: blue;
}
.box {
font-weight: 700;
}
"""
outputExample = """
.box {
color: blue;
font-weight: 700;
}
"""
source = "https://github.com/ben-eb/postcss-merge-rules"
[[modules]]
name = "postcss-minify-font-values"
shortDescription = "Normalizes font declarations"
longDescription = "Normalizes font & font-family declarations, and can convert font weight keywords to numeric values."
inputExample = """
.box {
font-family: \"Helvetica Neue\", Arial, Arial, sans-serif;
font-weight: normal;
}
"""
outputExample = """
.box {
font-family: Helvetica Neue, Arial, sans-serif;
font-weight: 400;
}
"""
source = "https://github.com/TrySound/postcss-minify-font-values"
[[modules]]
name = "postcss-minify-gradients"
shortDescription = "Normalizes CSS gradient functions"
longDescription = "Normalizes linear and radial gradient parameters."
inputExample = """
.box {
background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);
}
"""
outputExample = """
.box {
background: linear-gradient(180deg, #ffe500, #ffe500 50%, #121 0, #121);
}
"""
source = "https://github.com/ben-eb/postcss-minify-gradients"
[[modules]]
name = "postcss-minify-params"
shortDescription = "Normalizes at-rule parameters"
longDescription = "Trims whitespace and normalizes at-rule parameters."
inputExample = """
@media only screen and ( min-width: 400px, min-height: 500px ) {
.box {
color: blue;
}
}
"""
outputExample = """
@media only screen and (min-width:400px,min-height:500px) {
.box {
color: blue;
}
}
"""
source = "https://github.com/TrySound/postcss-minify-params"
[[modules]]
name = "postcss-minify-selectors"
shortDescription = "Normalizes selector strings"
longDescription = "Removes unnecessary qualified universal selectors, unquotes attribute selectors, trims & normalizes selector strings."
inputExample = """
*.box
.box::before
.box .box
[class*=\"box\"]
.box ~ [class] {
color: red;
}
"""
outputExample = """
.box
.box:before
.box .box
[class*=box]
.box~[class] {
color: red;
}
"""
source = "https://github.com/ben-eb/postcss-minify-selectors"
[[modules]]
name = "postcss-normalize-charset"
shortDescription = "Ensures that a single @charset is defined"
longDescription = "Ensures that only a single `@charset` is present in the CSS file, and moves it to the top of the document. This prevents multiple, invalid declarations occurring through naïve CSS concatenation. Note that *by default*, new `@charset` rules will not be added to the CSS."
inputExample = """
.box {
content: \"©\";
}
@charset \"utf-8\";
@charset \"utf-8\";
"""
outputExample = """
@charset \"utf-8\";
.box {
content: \"©\";
}
"""
source = "https://github.com/TrySound/postcss-normalize-charset"
[[modules]]
name = "postcss-normalize-url"
shortDescription = "Normalizes URL strings"
longDescription = "Normalizes URL strings. It can remove default ports, resolve unnecessary directory traversal & unquote the value."
inputExample = """
.box {
background: url(\"./css/../img/cat.jpg\");
}
"""
outputExample = """
.box {
background: url(img/cat.jpg);
}
"""
source = "https://github.com/ben-eb/postcss-normalize-url"
[[modules]]
name = "postcss-ordered-values"
shortDescription = "Normalizes shorthand value ordering"
longDescription = "Properties affected by this transform can accept their arguments in an arbitrary order. This module normalizes that order, facilitating easier de-duplication."
inputExample = """
.box {
border: solid 1px red;
border: #fff solid 1px;
}
"""
outputExample = """
.box {
border: 1px solid red;
border: 1px solid #fff;
}
"""
source = "https://github.com/ben-eb/postcss-ordered-values"
[[modules]]
name = "postcss-reduce-idents"
shortDescription = "Renames at-rule identifiers"
longDescription = "Renames at-rules such as `@keyframes`. This can be potentially unsafe if other JS/CSS files need to read this definition."
inputExample = """
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.box {
animation-name: fadeOut;
}
"""
outputExample = """
@keyframes a {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.box {
animation-name: a;
}
"""
safe = false
source = "https://github.com/ben-eb/postcss-reduce-idents"
[[modules]]
name = "postcss-reduce-initial"
shortDescription = "Normalizes initial values"
longDescription = "Replaces the CSS `initial` keyword with the *actual* value, when the resulting output is smaller."
inputExample = """
.box {
min-width: initial;
}
"""
outputExample = """
.box {
min-width: 0;
}
"""
source = "https://github.com/ben-eb/postcss-reduce-initial"
[[modules]]
name = "postcss-reduce-transforms"
shortDescription = "Normalizes CSS transform functions"
longDescription = "Converts between transform functions when there is a shorthand equivalent."
inputExample = """
.box {
transform: translate3d(0, 0, 0);
}
"""
outputExample = """
.box {
transform: translateZ(0);
}
"""
source = "https://github.com/ben-eb/postcss-reduce-transforms"
[[modules]]
name = "postcss-svgo"
shortDescription = "Compresses inline SVG definitions"
longDescription = "Compresses inline SVG definitions with [SVGO](https://github.com/svg/svgo)."
inputExample = """
.box {
background:url('data:image/svg+xml;utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20fill%3D%22yellow%22%20%2F%3E%3C!--test%20comment--%3E%3C%2Fsvg%3E');
}
"""
outputExample = """
.box {
background:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23ff0'/%3E%3C/svg%3E\");
}
"""
source = "https://github.com/ben-eb/postcss-svgo"
[[modules]]
name = "postcss-unique-selectors"
shortDescription = "Removes duplicated selectors"
longDescription = "Naturally sorts selectors for every rule, and removes duplicates."
inputExample = """
.box, .boxB, .boxA, .box {
color: red;
}
"""
outputExample = """
.box, .boxA, .boxB {
color: red;
}
"""
source = "https://github.com/ben-eb/postcss-unique-selectors"
[[modules]]
name = "postcss-zindex"
shortDescription = "Rebases z-index values"
longDescription = "Rebases z-index values. This is unsafe as it could potentially clash with other stylesheets, or JavaScript injected styles. However, it is safe if your stacking context has wholly been extracted into CSS."
inputExample = """
.box {
z-index: 5000;
}
"""
outputExample = """
.box {
z-index: 1;
}
"""
safe = false
source = "https://github.com/ben-eb/postcss-zindex"
[[modules]]
name = "reduce-background-repeat"
shortDescription = "Normalizes background repeat definitions"
longDescription = "Reduces the two value syntax for `background-repeat` into the single value syntax where possible, in both the property itself and the `background` shorthand."
inputExample = """
.box {
background-repeat: no-repeat repeat;
}
"""
outputExample = """
.box {
background-repeat: repeat-y;
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/reduceBackgroundRepeat.js"
[[modules]]
name = "reduce-display-values"
shortDescription = "Normalizes display definitions"
longDescription = "Normalizes the two value syntax for `display` into the single value syntax where possible."
inputExample = """
.box {
display: block flow;
}
"""
outputExample = """
.box {
display: block;
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/reduceDisplayValues.js"
[[modules]]
name = "reduce-positions"
shortDescription = "Normalizes CSS position definitions"
longDescription = "Normalizes `position` values in the `background`, `background-position`, `-webkit-perspective-origin` and `perspective-origin` properties."
inputExample = """
.box {
background: 30% center / 50% 50%;
}
"""
outputExample = """
.box {
background: 30% / 50% 50%;
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/reducePositions.js"
[[modules]]
name = "reduce-timing-functions"
shortDescription = "Normalizes transition timing functions."
longDescription = "Normalizes transition timing in the `animation`, `animation-timing-function`, `transition` and `transition-timing-function` properties."
inputExample = """
.box {
transition: color 3s steps(30, end);
}
"""
outputExample = """
.box {
transition: color 3s steps(30);
}
"""
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/reduceTimingFunctions.js"
[[modules]]
name = "style-cache"
shortDescription = "Normalizes whitespace from previous PostCSS plugins"
longDescription = "When combining cssnano with other PostCSS plugins, this will normalize the whitespace created by generating rules."
source = "https://github.com/ben-eb/cssnano/blob/master/src/lib/styleCache.js"
[[wrappers]]
name = "atom"
source = "https://atom.io/packages/cssnano"
install = "apm install cssnano"
example = """
Open the Command Palette and enter `cssnano`. Alternately, use either the context menus or `ctrl + alt + o` on your keyboard.
You can customise the output in the settings menu.
"""
[[wrappers]]
name = "broccoli"
source = "https://npmjs.com/package/broccoli-cssnano"
install = "npm install broccoli-cssnano"
alternate = "[broccoli-postcss](https://github.com/jeffjewiss/broccoli-postcss)"
example = """
```js
var cssnano = require('broccoli-cssnano');
tree = cssnano(tree, options);
```
"""
[[wrappers]]
name = "brunch"
source = "https://npmjs.com/package/cssnano-brunch"
install = "npm install cssnano-brunch"
alternate = "[postcss-brunch](https://github.com/iamvdo/postcss-brunch)"
example = """
Add cssnano to the plugin section of your [brunch config file](https://github.com/brunch/brunch/blob/master/docs/config.md):
```js
plugins: {
cssnano: {
zindex: false
}
}
```
"""
[[wrappers]]
name = "cli"
source = "https://npmjs.com/package/cssnano-cli"
install = "npm install cssnano-cli --global"
alternate = "[postcss-cli](https://github.com/postcss/postcss-cli)"
example = """
```sh
cssnano [input] [output] {OPTIONS}
```
You can also use stdin & stdout redirections:
```sh
cssnano < main.css > main.min.css
```
To see all available options, do:
```sh
cssnano --help
```
You can install cssnano-cli as a development dependency of your project, and get the command by this snippet in your .bashrc:
```sh
export PATH=$PATH:./node_modules/.bin
```
"""
[[wrappers]]
name = "fly"
source = "https://npmjs.com/package/fly-cssnano"
install = "npm install fly-cssnano"
alternate = "[fly-postcss](https://github.com/postcss/fly-postcss)"
example = """
```js
export build = function* () {
yield this
.source('./main.css')
.cssnano()
.target('out/')
}
```
"""
[[wrappers]]
name = "grunt"
source = "https://npmjs.com/package/grunt-cssnano"
install = "npm install grunt-cssnano"
alternate = "[grunt-postcss](https://github.com/nDmitry/grunt-postcss)"
example = """
```js
require('load-grunt-tasks')(grunt);
grunt.initConfig({
cssnano: {
options: {
sourcemap: true
}
dist: {
files: {
'dist/app.css': 'src/app.css'
}
}
}
});
grunt.registerTask('default', ['cssnano']);
```
"""
[[wrappers]]
name = "gulp"
source = "https://npmjs.com/package/gulp-cssnano"
install = "npm install gulp-cssnano"
alternate = "[gulp-postcss](https://github.com/postcss/gulp-postcss)"
example = """
```js
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
gulp.task('default', function () {
return gulp.src('./main.css')
.pipe(cssnano())
.pipe(gulp.dest('./out'));
});
```
"""
[[wrappers]]
name = "javascript"
source = "https://npmjs.com/package/cssnano"
install = "npm install cssnano"
example = """
cssnano can be used directly via its JavaScript API.
```js
var cssnano = require('cssnano');
var fs = require('fs');
cssnano.process(css, opts).then(function (result) {
fs.writeFileSync('app.css', result.css);
});
```
"""
[[wrappers]]
name = "javascript (postcss)"
source = "https://npmjs.com/package/cssnano"
install = "npm install cssnano"
example = """
Alternately, you can use PostCSS directly if you wish to use cssnano in combination with other processors.
```js
var postcss = require('postcss');
var cssnano = require('cssnano');
var fs = require('fs');
postcss([cssnano()])
.process(css, { from: 'src/app.css', to: 'app.css' })
.then(function (result) {
fs.writeFileSync('app.css', result.css);
fs.writeFileSync('app.css.map', result.map);
});
```
"""
[[wrappers]]
name = "webpack"
source = "https://npmjs.com/package/css-loader"
install = "npm install css-loader"
example = "cssnano is bundled with css-loader, so you don't need anything special to get it to work in your webpack environment. See their documentation for more details."