postcss 6.0.0

6.0 “Marquis Orias”

on Node.js Yarn

PostCSS 6.0 drops support for Node.js 0.12, cleans the raws API, adds support for @apply, and uses less memory.

Breaking Changes

Node.js stopped 0.12 support in January 01. So PostCSS dropped Node.js 0.12 from all tests. Please update your Node.js version to 4.0 or 7.0.

In 6.0 we fixed our mistakes in API design. First, if node already had a parent, insert methods (append, insertAfter, etc) will not clone it anymore. In 6.0 inserts methods will remove inserted node from previous parent:

parent1.nodes.length //=> 3
parent2.append(parent1.nodes[0])
parent1.nodes.length //=> 2

Now, moveTo, moveAfter & moveBefore are deprecated because regular insert methods have this move behavior.

Also Node#clone now returns the exact copy of a node. In 6.0 it no longer cleans raws.

node.raws.before //=> "\n  "
const clone = node.clone()
clone.raws.before //=> "\n  "

Every PostCSS plugin has plugin.process shortcut. In 6.0 we split process and plugin options in this shortcut:

const plugin = postcss.plugin('postcss-awesome', colors => {
  …
})
plugin.process(css, { from: 'app.css' }, colors).css

In the new major release, we finally remove all deprecated methods from PostCSS 4.0. It should not be a big problem because we show deprecated warnings for them for 2 years. Most of the plugins updated their API.

New Methods and Properties

Since we removed deprecated methods from PostCSS 4.0, in 6.0 we were free to add before() and after() shortcuts, similar to DOM API methods.

node1.before(node2)
// is equal too
node1.parent.insertBefore(node1, node2)

Chrome 51 started to support “native CSS mixins” from @tabatkins spec under the flag:

:root {
  --clearfix: {
    display: table;
    clear: both;
    content: '';
  };
}

.box:after{
  @apply --clearfix;
}

PostCSS 5.0 could parse it pretty well, but in some cases, it lost the semicolon after a mixin definition. In PostCSS 6.0 parser we covered this case, and node rules have Rule#raws.ownSemicolon for their own semicolon.

Stream Parser

In PostCSS 5.0 tokenizing and parsing were separated steps. As a result, we wrote all tokens into memory between steps. It worked well most of the time, but had a large memory usage when parsing really big CSS files (more than 25 MB).

In 6.0 @hzlmn rewrote parser, and now parser and tokenizer work together (stream parser). As a result, we put only a few of the latest tokens in memory. So 6.0 will use less memory.

Package Size

We care about node_modules size problem. So in 6.0 @lahmatiy and @h0tc0d3 removed js-base64 dependency to use native Node.js and Browsers ways to base64 encoding.

Also, PostCSS was moved to babel-preset-env. Instead of regular babel, it will compile only necessary parts of ES6. So build in npm packages will be cleaner. Current browserslist config for babel-preset-env is last 1 version and node 4.

Other Changes

• Fix error message on single : in CSS.
• Move tests to Jest.
• Clean up test (by @gkal19).