forked from cssnano/cssnano
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmetadata.json
291 lines (291 loc) · 20.8 KB
/
metadata.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
{
"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 {\n -moz-border-radius: 10px;\n border-radius: 10px;\n display: flex;\n}",
"outputExample": ".box {\n border-radius: 10px;\n display: flex;\n}",
"source": "https://github.com/postcss/autoprefixer"
}, {
"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 {\n text-decoration: underline;\n color: red !important;\n}",
"outputExample": ".box{text-decoration:underline;color:red!important}",
"source": "https://github.com/ben-eb/cssnano/blob/master/src/lib/core.js"
}, {
"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 {\n filter: blur( 5px );\n}",
"outputExample": ".box {\n filter: blur(5px);\n}",
"source": "https://github.com/ben-eb/cssnano/blob/master/src/lib/filterOptimiser.js"
}, {
"name": "function-optimiser",
"shortDescription": "Normalizes CSS function whitespace",
"longDescription": "Trims whitespace in CSS functions, except for `filter`.",
"inputExample": ".box {\n background: linear-gradient( #000, #fff );\n}",
"outputExample": ".box {\n background: linear-gradient(#000,#fff);\n}",
"source": "https://github.com/ben-eb/cssnano/blob/master/src/lib/functionOptimiser.js"
}, {
"name": "postcss-calc",
"shortDescription": "Reduces CSS calc expressions",
"longDescription": "Reduces CSS `calc` expressions whereever possible, ensuring both browser compatibility and compression.",
"inputExample": ".box {\n width: calc(2 * 100px);\n}",
"outputExample": ".box {\n width: 200px;\n}",
"source": "https://github.com/postcss/postcss-calc"
}, {
"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 {\n background: hsl(134, 50%, 50%);\n}",
"outputExample": ".box {\n background: #40bf5e;\n}",
"source": "https://github.com/ben-eb/postcss-colormin"
}, {
"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 {\n transition: color 500ms ease;\n}",
"outputExample": ".box {\n transition: color .5s ease;\n}",
"source": "https://github.com/ben-eb/postcss-convert-values"
}, {
"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 */\n.box {\n /* Red headings */\n color: red;\n}",
"outputExample": "/*! license */\n.box {\n color: red;\n}",
"source": "https://github.com/ben-eb/postcss-discard-comments"
}, {
"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 {\n border: 1px solid silver;\n}\n\n.box {\n border: 1px solid silver;\n}",
"outputExample": ".box {\n border: 1px solid silver;\n}",
"source": "https://github.com/ben-eb/postcss-discard-duplicates"
}, {
"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 {}\n@media screen {}\n{color: green;}",
"outputExample": "/* (removed) */",
"source": "https://github.com/ben-eb/postcss-discard-empty"
}, {
"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 {\n 0% {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes one {\n 0% {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n.box {\n animation-name: one;\n}",
"outputExample": "@keyframes one {\n 0% {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n.box {\n animation-name: one;\n}",
"source": "https://github.com/Justineo/postcss-discard-overridden"
}, {
"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 {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}",
"outputExample": "/* (removed) */",
"safe": false,
"source": "https://github.com/ben-eb/postcss-discard-unused"
}, {
"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"
}, {
"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 {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes dissolve {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n.box {\n animation-name: dissolve;\n}",
"outputExample": "@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n.box {\n animation-name: fadeOut;\n}",
"safe": false,
"source": "https://github.com/ben-eb/postcss-merge-idents"
}, {
"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 {\n margin-top: 10px;\n margin-right: 20px;\n margin-bottom: 10px;\n margin-left: 20px;\n}",
"outputExample": ".box {\n margin: 10px 20px;\n}",
"source": "https://github.com/ben-eb/postcss-merge-longhand"
}, {
"name": "postcss-merge-rules",
"shortDescription": "Merges adjacent rules",
"longDescription": "Merges adjacent rules by selectors & overlapping property/value pairs.",
"inputExample": ".box {\n color: blue;\n}\n.box {\n font-weight: 700;\n}",
"outputExample": ".box {\n color: blue;\n font-weight: 700;\n}",
"source": "https://github.com/ben-eb/postcss-merge-rules"
}, {
"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 {\n font-family: \"Helvetica Neue\", Arial, Arial, sans-serif;\n font-weight: normal;\n}",
"outputExample": ".box {\n font-family: Helvetica Neue, Arial, sans-serif;\n font-weight: 400;\n}",
"source": "https://github.com/TrySound/postcss-minify-font-values"
}, {
"name": "postcss-minify-gradients",
"shortDescription": "Normalizes CSS gradient functions",
"longDescription": "Normalizes linear and radial gradient parameters.",
"inputExample": ".box {\n background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);\n}",
"outputExample": ".box {\n background: linear-gradient(180deg, #ffe500, #ffe500 50%, #121 0, #121);\n}",
"source": "https://github.com/ben-eb/postcss-minify-gradients"
}, {
"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 ) {\n .box {\n color: blue;\n }\n}",
"outputExample": "@media only screen and (min-width:400px,min-height:500px) {\n .box {\n color: blue;\n }\n}",
"source": "https://github.com/TrySound/postcss-minify-params"
}, {
"name": "postcss-minify-selectors",
"shortDescription": "Normalizes selector strings",
"longDescription": "Removes unnecessary qualified universal selectors, unquotes attribute selectors, trims & normalizes selector strings.",
"inputExample": "*.box,\n.box::before,\n.box .box,\n[class*=\"box\"],\n.box ~ [class] {\n color: red;\n}",
"outputExample": ".box,\n.box:before,\n.box .box,\n[class*=box],\n.box~[class] {\n color: red;\n}",
"source": "https://github.com/ben-eb/postcss-minify-selectors"
}, {
"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 {\n content: \"©\";\n}\n@charset \"utf-8\";\n@charset \"utf-8\";",
"outputExample": "@charset \"utf-8\";\n.box {\n content: \"©\";\n}",
"source": "https://github.com/TrySound/postcss-normalize-charset"
}, {
"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 {\n background: url(\"./css/../img/cat.jpg\");\n}",
"outputExample": ".box {\n background: url(img/cat.jpg);\n}",
"source": "https://github.com/ben-eb/postcss-normalize-url"
}, {
"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 {\n border: solid 1px red;\n border: #fff solid 1px;\n}",
"outputExample": ".box {\n border: 1px solid red;\n border: 1px solid #fff;\n}",
"source": "https://github.com/ben-eb/postcss-ordered-values"
}, {
"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 {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n.box {\n animation-name: fadeOut;\n}",
"outputExample": "@keyframes a {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n.box {\n animation-name: a;\n}",
"safe": false,
"source": "https://github.com/ben-eb/postcss-reduce-idents"
}, {
"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 {\n min-width: initial;\n}",
"outputExample": ".box {\n min-width: 0;\n}",
"source": "https://github.com/ben-eb/postcss-reduce-initial"
}, {
"name": "postcss-reduce-transforms",
"shortDescription": "Normalizes CSS transform functions",
"longDescription": "Converts between transform functions when there is a shorthand equivalent.",
"inputExample": ".box {\n transform: translate3d(0, 0, 0);\n}",
"outputExample": ".box {\n transform: translateZ(0);\n}",
"source": "https://github.com/ben-eb/postcss-reduce-transforms"
}, {
"name": "postcss-svgo",
"shortDescription": "Compresses inline SVG definitions",
"longDescription": "Compresses inline SVG definitions with [SVGO](https://github.com/svg/svgo).",
"inputExample": ".box {\n 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');\n}",
"outputExample": ".box {\n 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\");\n}",
"source": "https://github.com/ben-eb/postcss-svgo"
}, {
"name": "postcss-unique-selectors",
"shortDescription": "Removes duplicated selectors",
"longDescription": "Naturally sorts selectors for every rule, and removes duplicates.",
"inputExample": ".box, .boxB, .boxA, .box {\n color: red;\n}",
"outputExample": ".box, .boxA, .boxB {\n color: red;\n}",
"source": "https://github.com/ben-eb/postcss-unique-selectors"
}, {
"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 {\n z-index: 5000;\n}",
"outputExample": ".box {\n z-index: 1;\n}",
"safe": false,
"source": "https://github.com/ben-eb/postcss-zindex"
}, {
"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 {\n background-repeat: no-repeat repeat;\n}",
"outputExample": ".box {\n background-repeat: repeat-y;\n}",
"source": "https://github.com/ben-eb/cssnano/blob/master/src/lib/reduceBackgroundRepeat.js"
}, {
"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 {\n background: 30% center / 50% 50%;\n}",
"outputExample": ".box {\n background: 30% / 50% 50%;\n}",
"source": "https://github.com/ben-eb/cssnano/blob/master/src/lib/reducePositions.js"
}, {
"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 {\n transition: color 3s steps(30, end);\n}",
"outputExample": ".box {\n transition: color 3s steps(30);\n}",
"source": "https://github.com/ben-eb/cssnano/blob/master/src/lib/reduceTimingFunctions.js"
}, {
"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.\n\nYou can customise the output in the settings menu."
}, {
"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\nvar cssnano = require('broccoli-cssnano');\ntree = cssnano(tree, options);\n```"
}, {
"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):\n\n```js\nplugins: {\n cssnano: {\n zindex: false\n }\n}\n```"
}, {
"name": "cli",
"source": "https://npmjs.com/package/cssnano-cli",
"install": "npm install cssnano-cli",
"alternate": "[postcss-cli](https://github.com/postcss/postcss-cli)",
"example": "```sh\ncssnano [input] [output] {OPTIONS}\n```\nYou can also use stdin & stdout redirections:\n\n```sh\ncssnano < main.css > main.min.css\n```\n\nTo see all available options, do:\n\n```sh\ncssnano --help\n```\n\nYou can install cssnano-cli as a development dependency of your project, and get the command by this snippet in your .bashrc:\n\n```sh\nexport PATH=$PATH:./node_modules/.bin\n```"
}, {
"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\nexport build = function* () {\n yield this\n .source('./main.css')\n .cssnano()\n .target('out/')\n}\n```"
}, {
"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\nrequire('load-grunt-tasks')(grunt);\n\ngrunt.initConfig({\n cssnano: {\n options: {\n sourcemap: true\n },\n dist: {\n files: {\n 'dist/app.css': 'src/app.css'\n }\n }\n }\n});\n\ngrunt.registerTask('default', ['cssnano']);\n```"
}, {
"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\nvar gulp = require('gulp');\nvar cssnano = require('gulp-cssnano');\n\ngulp.task('default', function () {\n return gulp.src('./main.css')\n .pipe(cssnano())\n .pipe(gulp.dest('./out'));\n});\n```"
}, {
"name": "javascript",
"source": "https://npmjs.com/package/cssnano",
"install": "npm install cssnano",
"example": "cssnano can be used directly via its JavaScript API.\n\n```js\nvar cssnano = require('cssnano');\nvar fs = require('fs');\n\ncssnano.process(css, opts).then(function (result) {\n fs.writeFileSync('app.css', result.css);\n});\n```"
}, {
"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.\n\n```js\nvar postcss = require('postcss');\nvar cssnano = require('cssnano');\nvar fs = require('fs');\n\npostcss([cssnano()])\n .process(css, { from: 'src/app.css', to: 'app.css' })\n .then(function (result) {\n fs.writeFileSync('app.css', result.css);\n fs.writeFileSync('app.css.map', result.map);\n });\n```"
}, {
"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."
}]
}