Skip to content
Changelog Hub

postcss 3.0.0

npm / postcss / 3.0.0 source ↗

Marquis Andrealphus seal

PostCSS 3.0 now has the fastest JavaScript-based CSS parser.

Performance

Unlike most CSS parsers, PostCSS preserves whitespace. So historically PostCSS did not have the best performance of them all. But for PostCSS 3.0 we've decided to focus on the performance issues.

  1. @Termina1 added good benchmarks in order to have feedback for performance optimizations.
  2. We've moved from ES6 Transpiler to 6to5 compiler. Unfortunately, Transpiler had a side effect to Node.js perfomance.
  3. Our old parser was already too complicated. So we split it in two steps: tokenizing and parsing. As a result, parser become much simpler — and ready for hardcore optimizations.
  4. @Termina1 added quick space check and faster map.
  5. @brainopia went even further and rewrote tokenizer to use char codes instead of strings. Also he added fast jumps for finding a closed quote or bracket.

As result, the PostCSS parser is now 6 times faster. Current benchmark on bootstrap.css (Fedora 20, node 0.10.32, i7-3517U, 8 GB RAM, SSD):

PostCSS 3:   23 ms
CSSOM:       28 ms  (1.2 times slower)
Mensch:      47 ms  (2.0 times slower)
Rework:      62 ms  (2.7 times slower)
Stylecow:    122 ms (5.3 times slower)
PostCSS 2:   141 ms (6.1 times slower)
Gonzales PE: 162 ms (7.0 times slower)
Gonzales:    175 ms (7.5 times slower)

Nested Rules

Old PostCSS 2 could not parse @page at-rule, because it did contain a mix of at-rules and declarations:

@page {
    margin-top: 10px;
    @bottom-center { ... /* page number */}
}

PostCSS 3.0 can now parse declarations, rules and at-rules inside any parent node. As a result, we can support custom at-rules with any type of content inside (declarations, rules or mix of declarations and rules):

@sprite-config {
    padding: 5px;
}

Another benefit is that you now can write plugins like postcss-nested.

API Changes

  • Child nodes array is now in Container#childs property. decls and rules properties are now deprecated and will be removed in the 3.1 release.
  • map.inline and map.sourcesContent properties are now enabled by default, since it is now the most popular way to use maps.

Other Changes

  • Fix iterators (each, insertAfter) on child array changes.
  • Use previous source map to show origin source of the CSS syntax error.
  • Use code style for manually added rules from existing rules.
  • Use from option from previous source map file field.
  • Set to value to from if to option is missing.
  • Use better node source name if from option is missing.
  • Show a syntax error when ; is missing between declarations.
  • Allow to pass PostCSS instance or list of plugins to use() method.
  • Allow to pass Result instance to process() method.
  • Do not remove previous sourceMappingURL comment on map.annotation: false.
  • Fix source map generation for nodes without source.
  • Fix next child before if Root first child got removed.