Skip to content

8.3 “Duke Murmur”
Compare
Choose a tag to compare
@ai ai released this 21 May 03:40
· 598 commits to main since this release
8.3.0
This tag was signed with the committer’s verified signature. The key has expired.
ai Andrey Sitnik
GPG key ID: 63BC24D98C77F786
Expired
Learn about vigilant mode.
3b86dcb

Duke Murmur seal

PostCSS 8.3 improved source map parsing performance, added Node#assign() shortcut, and experimental Document node to AST.

Thanks to Sponsors

This release was possible thanks to our community.

Sponsored by Tailwind CSS Sponsored by ThemeIsle

If your company wants to support the sustainability of front-end infrastructure or wants to give some love to PostCSS, you can join our supporters by:

Source Map Performance

Because PostCSS needs synchronous API, we can’t move from the old `source-map 0.6 to 0.7 (many other open-source projects too).

@7rulnik forked source-map 0.6 to source-map-js and back-ported performance improvements from 0.7. In 8.3 we switched from source-map to this source-map-js fork.

You map see 4x performance improvements in parsing map from processing step before PostCSS (for instance, Sass).

Document Nodes

Thanks to @gucong3000, PostCSS already parse CSS from HTML and JS files (CSS-in-JS templates and objects).

But his plugin need big updates. @hudochenkov from stylelint team decided to create new parsers for styles inside CSS-in-JS, HTML, and Markdown.

He suggested adding new Document node type to PostCSS AST to keep multiple Root nodes inside and JS/HTML/Markdown code blocks between these style blocks.

const document = htmlParser(
  '<html><style>a{color:black}</style><style>b{z-index:2}</style>'
)
document.type          //=> 'document'
document.nodes.length  //=> 2
document.nodes[0].type //=> 'root'

This is an experimental feature. Some aspects of this node could change within minor or patch version releases.

Node#assign() Shortcut

The creator of famous postcss-preset-env and many other PostCSS tools, @jonathantneal suggested a nice shortcut to change multiple properties in the node:

decl.assign({ prop: 'word-wrap', value: 'break-word' })
Assets 2