The main feature of this release is Source Maps
support. To get a source map use --map
CLI option. Source map can be inlined or saved to external file. For example:
$ echo '.example { color: #ff0000 }' | csso --map inline
.example{color:red}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxzdGRpbj4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsUSxDQUFXLFMiLCJzb3VyY2VzQ29udGVudCI6WyIuZXhhbXBsZSB7IGNvbG9yOiAjZmYwMDAwOyB9XG4iXX0= */
CSSO
is trying to fetch input source map and use it for generating map (when --map
option is used). More details and options see in readme.
Support of source maps needs the right positions in original CSS to be got on parsing and passed right to the end of optimisation till translation into string. This led to the need for a number of changes in the parser and ended by its full remake. Also compressor was reworked, its code simplified (for example, by using lists instead of arrays) and various optimisations were added. As the result CSSO
became 2x faster:
Library | 1.5.4 | 1.6.0 | Diff |
---|---|---|---|
960.css - 9989 bytes | 91.9 ms | 43.31 ms | 2.1 |
animate.css - 71088 bytes | 256.75 ms | 120.37 ms | 2.1 |
blueprint.css - 17422 bytes | 94.59 ms | 46.31 ms | 2.0 |
bootstrap.css - 147427 bytes | 544.69 ms | 249.96 ms | 2.2 |
font-awesome.css - 28746 bytes | 109.36 ms | 20.7 ms | 5.3 |
foundation.css - 200341 bytes | 500.43 ms | 208.74 ms | 2.4 |
gumby.css - 167123 bytes | 413.62 ms | 201.71 ms | 2.1 |
inuit.css - 53049 bytes | 101.66 ms | 18.46 ms | 5.5 |
normalize.css - 7707 bytes | 24.81 ms | 4.19 ms | 5.9 |
oocss.css - 40151 bytes | 70.98 ms | 35.21 ms | 2.0 |
pure.css - 31318 bytes | 64.39 ms | 28.65 ms | 2.2 |
reset.css - 1092 bytes | 7.02 ms | 2.57 ms | 2.7 |
It was hard before to realize where something is going wrong on CSS parsing and why. Here is the example:
$ echo '.test { color }' | csso
/usr/local/lib/node_modules/csso/lib/parser/index.js:115
throw new Error('Please check the validity of the CSS block starting from the line #' + currentBlockLN);
^
Error: Please check the validity of the CSS block starting from the line #1
at throwError (/usr/local/lib/node_modules/csso/lib/parser/index.js:115:11)
at getBlock (/usr/local/lib/node_modules/csso/lib/parser/index.js:523:14)
at getRuleset (/usr/local/lib/node_modules/csso/lib/parser/index.js:1585:18)
at getStylesheet (/usr/local/lib/node_modules/csso/lib/parser/index.js:1783:52)
at Object.CSSPRules.stylesheet (/usr/local/lib/node_modules/csso/lib/parser/index.js:80:65)
at parse (/usr/local/lib/node_modules/csso/lib/parser/index.js:2094:30)
at Object.minify (/usr/local/lib/node_modules/csso/lib/index.js:18:15)
at /usr/local/lib/node_modules/csso/lib/cli.js:38:31
at Socket.<anonymous> (/usr/local/lib/node_modules/csso/lib/cli.js:14:13)
at emitNone (events.js:72:20)
Refactoring of the parser helped to fix it. Starting with this release CSS error output has more details and solving problems should be much easier:
$ echo '.test { color }' | csso
Parse error <stdin>: Colon is expected
1 |.test { color }
---------------------^
2 |
Code coverage was set up and it helped to fix a number issues. Currently 99% of code is covered by tests. But truly speaking it doesn't mean minification is always correct (mostly because of structural optimizations). Minification improvements and its correctness is being the focus for next releases.
Changes
- source maps support
- parser remake:
- compressor refactoring
- setup code coverage and a number of related fixes