github css/csso v1.6.0
1.6.0 Source maps, verbose error output and performance boost

latest releases: v5.0.5, v5.0.4, v5.0.3...
8 years ago

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:
    • various parsing issues fixed
    • fix unicode sequence processing in ident (#191)
    • support for flags in attribute selector (#270)
    • position (line and column) of parse error (#109)
    • 4x performance boost, less memory consumption
  • compressor refactoring
    • internal AST is using doubly linked lists (with safe transformation support during iteration) instead of arrays
    • rename restructuring to restructure option for minify()/compress() (restructuring is alias for restructure now, with lower priority)
    • unquote urls when possible (#141, #60)
  • setup code coverage and a number of related fixes

Don't miss a new csso release

NewReleases is sending notifications on new releases.