postcss

• Fixed Root AST migration.

• Fixed AST normalization after using custom parser with old PostCSS AST.

• Print “old plugin API” warning only if plugin was used (by @zardoy).

• Fixed append() error after using .parent (by @thecrypticace).

• Fixed package.funding to have same value between all PostCSS packages.

• Fixed Declaration#raws.value type.

• Fixed package.funding URL format.

• Fixed package.funding (by @mondeja).

• Fixed end position in empty Custom Properties.

• Fixed Node#warn() type (by @ybiquitous).
• Fixed comment removal in values after ,.

• Prevented comment removing when it change meaning of CSS.
• Fixed parsing space in last semicolon-less CSS Custom Properties.
• Fixed comment cleaning in CSS Custom Properties with space.
• Fixed throwing an error on .root access for plugin-less case.

• Fixed raws types to make object extendable (by @43081j).
• Moved from Yarn 1 to pnpm.

• Fixed absolute path in source map on zero plugins mode.

• Fixed this.css.replace is not a function error.

• Fixed previous source map support in zero plugins mode.

• Fixed Stringifier types (by @43081j).

<img src="https://user-images.githubusercontent.com/19343/143240813-e6fb2eff-0188-4426-8534-d9076df9fa96.jpg" align="right" width="200" height="200" alt="President Camio seal">

PostCSS 8.4 brought ranges for warnings and errors, smaller node_modules size, lazy parsing to avoid PostCSS does nothing warning, and TypeScript fixes.

Thanks to Sponsors

This release was possible thanks to our community.

<a href="https://tailwindcss.com/"> <img src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo.svg" alt="Sponsored by Tailwind CSS" width="213" height="50"> </a> <a href="https://themeisle.com/"> <img src="https://mllj2j8xvfl0.i.optimole.com/d0cOXWA.3970~373ad/w:auto/h:auto/q:90/https://s30246.pcdn.co/wp-content/uploads/2019/03/logo.png" alt="Sponsored by ThemeIsle" width="171" height="56"> </a>

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:

• Tidelift with a Spotify-like subscription model supporting all projects from your lock file.
• Direct donations in PostCSS & Autoprefixer Open Collective.

Rages for Errors and Warnings

@adalinesimonian, the author of amazing Stylelint extension for VS Code, added ranges to errors and warnings.

result.warn(msg, { index })           // One character warning at index
result.warn(msg, { endIndex })        // Starts at node start, ends at endIndex
result.warn(msg, { index, endIndex }) // Starts at index, ends at endIndex
result.warn(msg, { start })           // Starts at start, ends at node end
result.warn(msg, { end })             // Starts at node start, ends at end
result.warn(msg, { start, end })      // Starts at start, ends at end
result.warn(msg, { word })            // Starts at word location, ends at word index + length

It will improve DX in the IDE extension.

Lazy Parsing

Previously, we found that many tools run PostCSS even if the developer didn’t pass any PostCSS plugins. Parsing is the most expensive step in CSS processing. It led to a waste of resources without any reason.

We tried to resolve the problem by adding a PostCSS does nothing warning. But it didn’t force tool authors to be more careful with user’s resources.

If PostCSS sees that tool call it without passing plugins (or changing parser/stringifier), PostCSS will not parse CSS (until toll will call Result#root). In 8.4, @bogdan0083 (with the help of @WilhelmYakunin) tries to solve the problem in another way. It allows us to save resources and remove the PostCSS does nothing warning.

// No plugins, we do not parse CSS
let result = await postcss().process(css, { from  })
result.css  // Is the same string passed to process()
result.map  // Special 1-to-1 source map
result.root // CSS will parsed only here

Install Size Reduction

With ≈60M weekly downloads, PostCSS has responsibility for the world’s resource spending.

Together with @7rulnik we reduced source-map-js size. It is transitive dependency of PostCSS.

In 8.4, we moved to a fixed version of source-map-js, which reduced the postcss size in your node_modules from ≈1 MB to 0.3 MB. With the huge popularity of PostCSS, it will free a lot of resources on our CIs.

<img src="https://user-images.githubusercontent.com/19343/143244369-9ec362c5-4dbd-4aff-ba9e-7b4a50a97484.png" width="550" height="392" alt="PostCSS install size reduction">

Migration from Jest to uvu

@kimoofey refactored all tests from the popular Jest framework to small and fast uvu.

It will not affect end-users. However, it reduced our node_modules size by 33 MB and made tests twice faster (yarn install & yarn unit: 24 → 13 seconds).

TypeScript Fixes

• Added Processor types.
• Added Stringifier types (by @43081j).
• Fixed types Root and Document in result values (by @43081j).
• Fixed Node#walkRules() types (by @hudochenkov).

Other Changes

• Fixed docs (by @paulshryock).

• Remove debugging code.

• Fixed Maximum call stack issue of some source maps (by @yetingli).

• Replaced nanocolors to picocolors.
• Reduced package size.

• Update nanocolors.

• Replaced colorette to nanocolors.
• Added bug field to package.json (by @coliff).
• Improved docs (by @camelpunch and @paulshryock).

• Fixed column in missed semicolon error (by @Gusted).

• Fixed broken AST detection.

• Fixed broken AST detection.

• Fixed broken AST on postcss dependency duplication in custom parsers.

• Update changelog.

• Fixed false positives PostCSS does nothing warning on syntax option.

<img src="https://user-images.githubusercontent.com/19343/119076576-cda60100-b9c0-11eb-9ed9-7fe3eed20c3a.jpg" align="right" width="200" height="200" alt="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.

<a href="https://tailwindcss.com/"> <img src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo.svg" alt="Sponsored by Tailwind CSS" width="213" height="50"> </a> <a href="https://themeisle.com/"> <img src="https://mllj2j8xvfl0.i.optimole.com/d0cOXWA.3970~373ad/w:auto/h:auto/q:90/https://s30246.pcdn.co/wp-content/uploads/2019/03/logo.png" alt="Sponsored by ThemeIsle" width="171" height="56"> </a>

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:

• Tidelift with a Spotify-like subscription model supporting all projects from your lock file.
• Direct donations in PostCSS & Autoprefixer Open Collective.

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' })

• Fixed list type definitions (by @n19htz).

• Removed source-map from client-side bundle (by @barak007).

• Fixed ReDoS vulnerabilities in source map parsing (by @yetingli).

• Fixed package.json exports.

• Fixed DEP0148 warning in Node.js 16.
• Fixed docs (by @semiromid).

• Fixed ReDoS vulnerabilities in source map parsing.
• Fixed webpack 5 support (by @barak007).
• Fixed docs (by @roelandmoors).

• Exported NodeErrorOptions type (by @realityking)

• Fixed browser builds in webpack 5 (by @mattcompiles).

• Fixed browser builds in webpack 5 (by @mattcompiles).

• Fixed Maximum call stack size exceeded in Node#toJSON.
• Fixed docs (by @inokawa).

• Fixed escaped characters handling in list.split (by @nex3).

• Added plugin name to postcss.plugin() warning (by @Alphy11).
• Fixed docs (by @billcolumbia).

• Fixed JSON.stringify(Node[]) support (by @mischnic).

• Fixed CSS-in-JS support (by @43081j).
• Fixed plugin types (by @ludofischer).
• Fixed Result#warn() types.

• Fixed Node#toJSON() and postcss.fromJSON() (by @mischnic).

<img src="https://user-images.githubusercontent.com/19343/101452442-a9b39f00-38fb-11eb-8bc5-8f79a78d7ebd.png" align="right" width="200" height="200" alt="Prince Orobas seal">

PostCSS 8.2 added a new API to serialize and deserialize CSS AST to JSON.

import { parse, fromJSON } from 'postcss'

let root = parse('a{}', { from: 'input.css' })
let json = root.toJSON()
// save to file, send by network, etc
let root2 = fromJSON(json)

Thanks to @mischnic for his work.

• Fixed parser performance regression.

• Fixed broken AST after moving nodes in visitor API.

• Fixed Autoprefixer regression.

• Added PostCSS update suggestion on unknown event in plugin.

• Fixed LazyResult type export (by @yyx990803).
• Fixed LazyResult type compatibility with Promise (by @antonk52).

• Reduced dependencies number (by @TrySound).

• Fixed LazyResult type compatibility with Promise (by @ludofischer).
• Fixed HTTPS links in documentation.

• Fix import support in TypeScript (by @remcohaszing).

• Reverted package.exports Node.js 15 fix.

• Fixed Node.js 15 warning (by @ShenHongFei).

• Fixed TypeScript definition (by @Arthie).

• Added package.types.

• Fix API docs (by @Arthie).
• Improve plugin guide (by @yunusga).
• Prepare code base for Deno support (by @oscarotero).