postcss

• Replace prototype in PostCSS 7 nodes instead of recreating them.
• Added missed Transformer to exported types (by @pmdartus).

• Fix 8.0.7 regression on PostCSS 7 nodes converting (by @adamwathan)

• Fixed compatibility issue with mixin AST with PostCSS 7 and 8 nodes.
• Added migration guide translation to Chinese to the warning.

• Fixed child adding methods in Container.

• Update changelog.

• Fixed Cannot read property 'line' of null error.
• Fixed source map support for declarations.

• Fixed client-side bundling support.

• Fixed plugin packs support.

• Updated Processor#version.

<img src="https://user-images.githubusercontent.com/19343/92548424-fb795a00-f224-11ea-80d7-4e8f739ae759.png" align="right" width="200" height="200" alt="President Ose seal">

PostCSS 8.0 brings new plugin API, node_modules size reduction, better source map support, and CSS parser improvements.

Check out a day-by-day diary of PostCSS 8.0 development process.

See Migration Guides for end-users and for plugin developers.

Thanks to Sponsors

With more than 100 M downloads per month, it becomes hard to support PostCSS in free time. For instance, getting the 8.0 release ready took 4 months of work.

This release was possible thanks to out community. Tailwind CSS, De Voorhoede, InVision AG, Brainbow, and many individual contributions.

<a href="https://tailwindcss.com/"> <img src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo.svg" alt="Sponsored by Tailwind CSS" width="273" height="64"> </a>

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

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

Breaking Changes

We try to avoid any breaking changes for end-users:

• PostCSS 8 dropped Node.js 6.x, 8.x, 11.x, and 13.x versions support. All these versions have no security updates anymore.
• We now serve ES6+ sources in the npm package without Babel compilation. If you are creating tools like CodePen and put PostCSS into the client-side JS bundle, you may need to run Babel on node_modules/postcss for old browsers.
• We removed rarely used postcss.vendor API.

New Plugin API

The biggest change in PostCSS 8 is a new plugin API. Thanks to @BondarenkoAlex for big help in creating a new API.

module.exports = () => {
  return {
    postcssPlugin: 'postcss-will-change',
    Declaration: {
      'will-change': (decl, { Declaration }) => {
        decl.cloneBefore(
          new Declaration({ prop: 'backface-visibility', value: 'hidden' })
        )
      }
    }
  }
}
module.exports.postcss = true

We know that rewriting old plugins will take time, but the new API will improve the end-user’s experience and make life easier for plugin developers:

• With new API, all plugins can share a single scan of the CSS tree. It makes CSS processing up to 20% faster.
• Because npm often duplicates dependencies, you may have many postcss duplicates in your node_modules. New API fixes this problem.
• Plugins will re-visit changed nodes to reduce compatibility issues between plugins. Now the order of plugins in your PostCSS config will be less important.
• New API is close to Babel’s visitor API.

These resources will help plugin developers in API migration:

• The Migration Guide
• Writing a PostCSS Plugin
• We have a Gitter chat open for all questions related to plugin migration.

PostCSS development guidelines were also changed:

• Now it is prohibited to create own AST on top of PostCSS AST classes since it could lead to painful bugs due to the usage private APIs.
• Plugins and runners must have postcss in peerDependencies.

New Website without React

Previously PostCSS used a React-based framework for the project's website. Since we have a static website, we decided to migrate to a React-free framework and got good performance improvements:

• 360 → 20 ms for Max Potential First Input Delay
• 3.3 → 1.5 seconds for First CPU Idle
• 3.3 → 1.5 seconds for Time to Interactive

Check out postcss.org and new API docs that feature the awesome alchemy-inspired design by @okonet.

<a href="https://postcss.org/"> <img src="https://user-images.githubusercontent.com/19343/92683881-153c9f00-f302-11ea-8355-e61d0f02776e.jpeg" alt="PostCSS website performance results" /> </a>

We also removed Google Analytics tracking scripts and encourage other open source projects to be an example in caring about user’s privacy and performance.

Parser Improvments

Did you know that all examples below are valid CSS?

:root {
  --empty: ;
  --JSON: [1, "2", {"three": {"a":1}}, [4]];
  --javascript: function(rule) { console.log(rule) };
}

@supports (--element(".minwidth", { "minWidth": 300 })) {
  [--self] {
    background: greenyellow;
  }
}

Now PostCSS parses even those rare edge cases correctly. Thanks to Tailwind CSS and Prettier teams for adding more cases to our CSS parser tests collection.

Note that now --roundMixin: { border-radius: 8px } will be parsed as a Declaration with the { border-radius: 8px } value.

Better Source Map Support

We have added support for two new source map formats: Index map and JSON (data:application/json).

PostCSS 8 is now much closer to the source map spec. Thanks to the Google team for reports:

• We now treat sources in map as URLs instead of file paths.
• We now resolve sources relative to map file, not CSS file.

A few source map APIs were added:

• opts.maps.absolute = true option for absolute paths in source map.
• opts.maps.annotation = (file, root) => url for a dynamic path to source map.
• Node#origin() now returns position.url in addition to position.file for compatibility with absolute URLs in source map’s sources.

API Changes

We have added ES modules support and now we export all classes from the main entry:

import { CssSyntaxError, parse } from "postcss"

@graberzz added Node#source.offset in addition to line and column.

CSS Custom Properties and Sass-like $-variables now have a special Declaration#variable mark:

const root = parse(`
  :root {
    --propery: value;
  }
  $variable: value
`)

root.first.first.variable //=> true
root.last.variable //=> true

TypeScript

PostCSS now has a first-class TypeScript support:

• We moved API docs from JSDoc to TypeDoc. Check out our new API docs.
• We are using check-dts to test types with special unit tests.
• We keep types in separate files for better readability.
• With the new structure and test system, we fixed many small issues in types.

Other Changes

• Fixed calling replaceWith with input replaced node (by @josephkaptur).
• Reduce dependencies by replacing chalk to colorette.
• Added Declaration#value auto-conversion to string to prevent plugin’s bugs.
• Fixed building PostCSS with Rollup (by @MapGrid) because of circular dependencies.
• Moved unknown source from counter to random IDs: <input css 9M4X8l>:10:6.
• Removed docs from the npm package.

• Reduce package size.
• Backport nanocolors to picocolors migration.

• Update Processor#version.

• Backport chalk to nanocolors migration.

• Backport ReDoS vulnerabilities from PostCSS 8.

• Add migration guide link to PostCSS 8 error text.

• Fix compatibility with postcss-scss 2.

• Add error message for PostCSS 8 plugins.

• Fix error message (by @admosity).

• Use only the latest source map annotation (by @emzoumpo).

• Fix TypeScript definition (by @nex3)

• Update Processor#version.

• Fix TypeScript definition (by @nex3).

• Fix TypeScript definition (by @nex3).

• Fix TypeScript definition (by @nex3)

• Fix absolute path support for Windows (by @tomrav)

• Fix TypeScript definition (by @keithamus).

• Update Processor#version.

• Add funding link for npm fund.

• Revert passing nodes property to node constructor.

• Allow to pass PostCSS’s nodes in nodes property to node constructor.

• Fix passing nodes property to node constructor.

• Fix TypeScript type definitions (by @buschtoens).

• Fix TypeScript type definitions (by @bmatcuk and @buschtoens).

• Revert Custom Properties fix until PostCSS 8.0.

• Fix Custom Properties support (by @isolovev).

• Fix tokenizer for postcss-less (by @mattlyons0)

• Fix parsing regression in 7.0.12 for comments between property and value.

• Fix parsing broken CSS with two words in declaration property.

• Fix source maps on declaration semicolon (by @mischnic).

• Fix source maps (by @mischnic).

• Increase stringifing performance for non-raws AST.

• Fix TypeScript definitions (by @aoberoi).
• Use support-colors 6.0.

• Extend Error in CssSyntaxError.

• Fix parsing files with BOM (by @vkrol).

• Reduce npm package size (by @pgilad).

• Fix safe parser regression.

• Fix tokenizer extendability (by @shellscape).

• Fix warning text (by @rapzo).

• Fix JSDoc (by Steven Lambert).

<img src="https://user-images.githubusercontent.com/19343/42777541-41cc0ce2-88ef-11e8-9530-243eb38830a6.png" align="right" width="200" height="200" alt="President Amy seal">

PostCSS 7.0 dropped Node.js 4 support and brought small features.

Breaking Changes

We removed Node.js 4 and Node.js 9 support since it doesn’t have security updates anymore.

We removed IE and “dead” browsers (without security updates) from Babel’s Browserslist. Don't worry, PostCSS still generate IE-compatible code. These changes affect websites which run PostCSS on client-side like CodePen.

last 2 version
not dead
not Explorer 11
not ExplorerMobile 11
node 10
node 8
node 6

New Features

@nikhilgaba added cute thing for plugin developers. If an error was happened in Container#walk() circle, PostCSS will show in stack trace CSS node, which causes this error:

TypeError: Cannot read property '0' of undefined
    at /home/ai/Dev/test/app.css:10:4
    at plugin (plugin.js:2:4)
    at runPostCSS (runner.js:2:1)

@igorkamyshev added finally method to LazyResult to make it compatible with the latest Promise API.

Other Changes

• Client-side size was reduced by Size Limit feedback.
• Add warning on calling PostCSS without plugins and syntax options.

• Fix parsing nested at-rules without semicolon, params, and spaces.
• Fix docs (by @kschiffer and @tivac).

• Fix Node#prev and Node#next on missed parent.

• Rename Chinese docs to fix yarnpkg.com issue.

• Better error message on null as input CSS.

• Fix TypeScript definitions for source maps (by @hzlmn).
• Fix source field in TypeScript definitions (by @sylvainpolletvillard).

• Use primitive object in TypeScript definitions (by @sylvainpolletvillard).

• Fix parsing comment in selector between word tokens (by @hzlmn).

• Fix warning text (by @mhkeller).