You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
CSSO is based on [CSSTree](https://github.com/csstree/csstree) to parse CSS into AST, AST traversal and to generate AST back to CSS. All `CSSTree` API is available behind `syntax` field. You may minify CSS step by step:
53
55
54
56
```js
55
-
var ast =csso.parse('.test { color: #ff0000; }');
56
-
var compressResult =csso.compress(ast);
57
-
var compressedCss =csso.translate(compressResult.ast);
57
+
var csso =require('csso');
58
+
var ast =csso.syntax.parse('.test { color: #ff0000; }');
59
+
var compressedAst =csso.compress(ast).ast;
60
+
var minifiedCss =csso.syntax.translate(compressedAst);
58
61
59
-
console.log(compressedCss);
62
+
console.log(minifiedCss);
60
63
// .test{color:red}
61
64
```
62
65
63
-
Working with source maps:
64
-
65
-
```js
66
-
var css =fs.readFileSync('path/to/my.css', 'utf8');
67
-
var result =csso.minify(css, {
68
-
filename:'path/to/my.css', // will be added to source map as reference to source file
> Warning: CSSO uses early versions of CSSTree that still in active development. CSSO doesn't guarantee API behind `syntax` field or AST format will not change in future releases of CSSO, since it's subject to change in CSSTree. Be carefull with CSSO updates if you use `syntax` API until this warning removal.
78
67
79
68
### minify(source[, options])
80
69
81
70
Minify `source` CSS passed as `String`.
82
71
83
-
Options:
84
-
85
-
- sourceMap `Boolean` - generate source map if `true`
86
-
- filename `String` - filename of input, uses for source map
87
-
- debug `Boolean` - output debug information to `stderr`
88
-
- beforeCompress `function|array<function>` - called right after parse is run. Callbacks arguments are `ast, options`.
89
-
- afterCompress `function|array<function>` - called right after compress is run. Callbacks arguments are `compressResult, options`.
90
-
- other options are the same as for `compress()`
91
-
92
72
Returns an object with properties:
93
73
94
74
- css `String` – resulting CSS
95
-
- map `Object` – instance of `SourceMapGenerator` or `null`
75
+
- map `Object` – instance of [`SourceMapGenerator`](https://github.com/mozilla/source-map#sourcemapgenerator) or `null`
96
76
97
77
```js
98
78
var result =csso.minify('.test { color: #ff0000; }', {
@@ -105,12 +85,51 @@ console.log(result.css);
105
85
// > .test{color:red}
106
86
```
107
87
88
+
Options:
89
+
90
+
- sourceMap
91
+
92
+
Type: `Boolean`
93
+
Default: `false`
94
+
95
+
Generate a source map when `true`.
96
+
97
+
- filename
98
+
99
+
Type: `String`
100
+
Default: `'<unknown>'`
101
+
102
+
Filename of input CSS, uses for source map generation.
103
+
104
+
- debug
105
+
106
+
Type: `Boolean`
107
+
Default: `false`
108
+
109
+
Output debug information to `stderr`.
110
+
111
+
- beforeCompress
112
+
113
+
Type: `function(ast, options)` or `Array<function(ast, options)>` or `null`
114
+
Default: `null`
115
+
116
+
Called right after parse is run.
117
+
118
+
- afterCompress
119
+
120
+
Type: `function(compressResult, options)` or `Array<function(compressResult, options)>` or `null`
121
+
Default: `null`
122
+
123
+
Called right after [`compress()`](#compressast-options) is run.
124
+
125
+
- Other options are the same as for [`compress()`](#compressast-options) function.
126
+
108
127
### minifyBlock(source[, options])
109
128
110
-
The same as `minify()` but for style block. Usually it's a `style` attribute content.
129
+
The same as `minify()` but for list of declarations. Usually it's a `style` attribute value.
111
130
112
131
```js
113
-
var result =csso.minifyBlock('color: rgba(255, 0, 0, 1); color: #ff0000').css;
132
+
var result =csso.minifyBlock('color: rgba(255, 0, 0, 1); color: #ff0000');
114
133
115
134
console.log(result.css);
116
135
// > color:red
@@ -120,22 +139,97 @@ console.log(result.css);
120
139
121
140
Does the main task – compress AST.
122
141
123
-
> NOTE: `compress` performs AST compression by transforming input AST by default (since AST cloning is expensive and needed in rare cases). Use `clone` option with truthy value in case you want to keep input AST untouched.
142
+
> NOTE: `compress()` performs AST compression by transforming input AST by default (since AST cloning is expensive and needed in rare cases). Use `clone` option with truthy value in case you want to keep input AST untouched.
124
143
125
144
Options:
126
145
127
-
- restructure `Boolean` – do the structure optimisations or not (`true` by default)
128
-
- clone `Boolean` - transform a copy of input AST if `true`, useful in case of AST reuse (`false` by default)
129
-
- comments `String` or `Boolean` – specify what comments to left
130
-
-`'exclamation'` or `true` (default) – left all exclamation comments (i.e. `/*! .. */`)
131
-
-`'first-exclamation'` – remove every comments except first one
132
-
-`false` – remove every comments
133
-
- usage `Object` - usage data for advanced optimisations (see [Usage data](#usage-data) for details)
134
-
- logger `Function` - function to track every step of transformations
146
+
- restructure
147
+
148
+
Type: `Boolean`
149
+
Default: `true`
150
+
151
+
Disable or enable a structure optimisations.
152
+
153
+
- clone
154
+
155
+
Type: `Boolean`
156
+
Default: `false`
157
+
158
+
Transform a copy of input AST if `true`. Useful in case of AST reuse.
159
+
160
+
- comments
161
+
162
+
Type: `String` or `Boolean`
163
+
Default: `true`
164
+
165
+
Specify what comments to left:
166
+
167
+
-`'exclamation'` or `true` – left all exclamation comments (i.e. `/*! .. */`)
168
+
-`'first-exclamation'` – remove every comments except first one
169
+
-`false` – remove every comments
170
+
171
+
- usage
172
+
173
+
Type: `Object` or `null`
174
+
Default: `null`
175
+
176
+
Usage data for advanced optimisations (see [Usage data](#usage-data) for details)
177
+
178
+
- logger
179
+
180
+
Type: `Function` or `null`
181
+
Default: `null`
182
+
183
+
Function to track every step of transformation.
135
184
136
185
### Source maps
137
186
138
-
> TODO
187
+
To get a source map set `true` for `sourceMap` option. Additianaly `filename` option can be passed to specify source file. When `sourceMap` option is `true`, `map` field of result object will contain a [`SourceMapGenerator`](https://github.com/mozilla/source-map#sourcemapgenerator) instance. This object can be mixed with another source map or translated to string.
188
+
189
+
```js
190
+
var csso =require('csso');
191
+
var css =fs.readFileSync('path/to/my.css', 'utf8');
192
+
var result =csso.minify(css, {
193
+
filename:'path/to/my.css', // will be added to source map as reference to source file
0 commit comments