Skip to content

Commit 3342dff

Browse files
committedFeb 28, 2017
update api, complete source map section, formatting
1 parent 36cdae4 commit 3342dff

File tree

1 file changed

+138
-44
lines changed

1 file changed

+138
-44
lines changed
 

‎README.md

+138-44
Original file line numberDiff line numberDiff line change
@@ -40,59 +40,39 @@ npm install -g csso
4040

4141
<!-- /MarkdownTOC -->
4242

43+
Basic usage:
44+
4345
```js
4446
var csso = require('csso');
4547

46-
var compressedCss = csso.minify('.test { color: #ff0000; }').css;
48+
var minifiedCss = csso.minify('.test { color: #ff0000; }').css;
4749

48-
console.log(compressedCss);
50+
console.log(minifiedCss);
4951
// .test{color:red}
5052
```
5153

52-
You may minify CSS by yourself step by step:
54+
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:
5355

5456
```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);
5861

59-
console.log(compressedCss);
62+
console.log(minifiedCss);
6063
// .test{color:red}
6164
```
6265

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
69-
sourceMap: true // generate source map
70-
});
71-
72-
console.log(result);
73-
// { css: '...minified...', map: SourceMapGenerator {} }
74-
75-
console.log(result.map.toString());
76-
// '{ .. source map content .. }'
77-
```
66+
> 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.
7867
7968
### minify(source[, options])
8069

8170
Minify `source` CSS passed as `String`.
8271

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-
9272
Returns an object with properties:
9373

9474
- 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`
9676

9777
```js
9878
var result = csso.minify('.test { color: #ff0000; }', {
@@ -105,12 +85,51 @@ console.log(result.css);
10585
// > .test{color:red}
10686
```
10787

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+
108127
### minifyBlock(source[, options])
109128

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.
111130

112131
```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');
114133

115134
console.log(result.css);
116135
// > color:red
@@ -120,22 +139,97 @@ console.log(result.css);
120139

121140
Does the main task – compress AST.
122141

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.
124143
125144
Options:
126145

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.
135184

136185
### Source maps
137186

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
194+
sourceMap: true // generate source map
195+
});
196+
197+
console.log(result);
198+
// { css: '...minified...', map: SourceMapGenerator {} }
199+
200+
console.log(result.map.toString());
201+
// '{ .. source map content .. }'
202+
```
203+
204+
Example of generating source map with respect of source map from input CSS:
205+
206+
```js
207+
var require('source-map');
208+
var csso = require('csso');
209+
var inputFile = 'path/to/my.css';
210+
var input = fs.readFileSync(inputFile, 'utf8');
211+
var inputMap = input.match(/\/\*# sourceMappingURL=(\S+)\s*\*\/\s*$/);
212+
var output = csso.minify(input, {
213+
filename: inputFile,
214+
sourceMap: true
215+
});
216+
217+
// apply input source map to output
218+
if (inputMap) {
219+
output.map.applySourceMap(
220+
new SourceMapConsumer(inputMap[1]),
221+
inputFile
222+
)
223+
}
224+
225+
// result CSS with source map
226+
console.log(
227+
output.css +
228+
'/*# sourceMappingURL=data:application/json;base64,' +
229+
new Buffer(output.map.toString()).toString('base64') +
230+
' */'
231+
);
232+
```
139233

140234
### Usage data
141235

0 commit comments

Comments
 (0)
Please sign in to comment.