postcss

• Don’t copy * hack to declaration indent.

• Add upper case !IMPORTANT support.

• Reduce PostCSS size in webpack bundle.

• Improve error message for plugin with old PostCSS (by @igoradamenko).

• Fix Node.js 4.2.2 support.

Fix base64 decoding for old Node.js and browser.

• Fix end position in at-rule without semicolon (by @hzlmn).

• Move Babel config from package.json for node_modules compiling cases.

• Fix parsing ;; after rules.
• Use Chalk 2.0.

• Fix escape sequences parsing (by @hzlmn).
• Added ability to force disable colors with an environment variable.
• Improved color detection of some terminal apps.

• Keep raws.before on moving Root children to new Root.

• Fix parser extensibility to use it in Safe Parser.

<img src="https://cloud.githubusercontent.com/assets/19343/25771868/5c010f02-325d-11e7-9ab6-7e962eb3b601.png" align="right" width="200" height="200" alt="Marquis Orias seal">

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).

• Fix TypeScript definitions for case of multiple PostCSS versions in node_modules (by Chris Eppstein).

• Add postcss-sass suggestion to syntax error on .sass input.

• Better error on wrong argument in node constructor.

• Fix TypeScript definitions (by @bumbleblym).

• Fix browser bundle building in webpack (by @janschoenherr).

• Do not add comment to important raws.
• Fix JSDoc (by @Semigradsky)

• Fix typo in deprecation message (by @garetmckinley).

• Fix TypeScript definitions (by @jedmao)

• Fix TypeScript definitions (by @jedmao)

• Update TypeScript definitions (by @jedmao).

• Fix error message (by @ben-eb).

• Better error message on syntax object in plugins list.

• Fix postcss.vendor for values with spaces (by @gucong3000).

• Better error message on unclosed string (by @ben-eb).

• Improve terminal CSS syntax highlight (by @lydell).

• Better color highlight in syntax error code frame.
• Fix color highlight support in old systems.

• Update Processor#version.

• Fix source map path for CSS without from option (by @mlocati).

<img src="https://cloud.githubusercontent.com/assets/19343/18299903/feb559ce-7507-11e6-86af-b66ddfd55f21.jpg" align="right" width="200" height="200" alt="Duke Vapula seal">

PostCSS 5.2 contains parser fix and better syntax error output.

Syntax Errors

In previous versions syntax errors were very simple:

<img src="https://cloud.githubusercontent.com/assets/19343/18300129/c6faf4f6-7509-11e6-9223-2e4a4160b379.png" alt="PostCSS 5.1 syntax error" width="450" height="136">

@andreypopp did great work and now main webpack’s loaders have same output on syntax error. Unification is good, so we decided to use same output for PostCSS errors too.

First, we added line numbers to code frame. Then we increased lines count. @andreypopp added syntax highlight. And finally @lydell fix output for tab indent and some other edge cases.

So right now PostCSS syntax errors are similar to Babel and webpack errors:

<img src="https://cloud.githubusercontent.com/assets/19343/18300142/ef6ac9fc-7509-11e6-965e-d37d92bfe2b5.png" alt="PostCSS 5.2 syntax error" width="450" height="174">

Highlight CSS

PostCSS 5.2 has CSS syntax highlight for syntax error. But you can use our highlighter in your terminal tool too:

const highlight = require('postcss/lib/terminal-highlight');
console.log(highlight('a { color: black }'))

Parser Fixes

PostCSS 5.2 has new [ and ] tokens to parse [attr=;] { } correctly.

• Suggests SCSS/Less parsers on parse errors depends on file extension.

• Fix TypeScript definitions (by @lexich).

<img src="https://cloud.githubusercontent.com/assets/19343/16774629/94ad9de4-4865-11e6-994e-4b22facbbb3c.jpg" align="right" width="200" height="200" alt="King and President Zagan seal">

PostCSS 5.1 brings few improvements for source maps and JSDoc.

Source Map

@markfinger improved source map support for new cases. He added absolute URI support in from/to options and added new map.from options for better control.

Some plugin developers forget to set correct Node#source for nodes. @TrySound add some help for developers. Now PostCSS will set <no source> source for sourceless nodes.

@montmanu add function value support for map.prev option.

JSDoc

We moved all API docs close to source and now PostCSS has JSDoc comments for every public method and property.

I hope it will make plugin development easy: API docs become better and some IDE will show docs in autocomplete.

You can check latest API on api.postcss.org.

Other

• Move tests from Mocha/Chai to AVA.
• Add declaration value type check in shortcut creating (by @gucong3000).
• Result#warn now returns new created warning.
• Don’t call plugin creator in postcss.plugin call.
• Add source maps to PostCSS ES5 build.
• Clean npm package from unnecessary docs.

• Fix support with input source map with utf8 encoding name.

• Fix between raw value parsing (by @davidtheclark)
• Update TypeScript definitions (by @jedmao)
• Clean fake node.source after append(string).

• Fix indent-based syntaxes support.

• Parse new lines according W3C CSS syntax specification.

• Fix options argument in Node#warn (by @ben-eb).
• Fix TypeScript definitions (by @jedmao).

• Fix CSS syntax error position on unclosed quotes.

• Fix Node#clone() on null value somewhere in node.

• Allow to use PostCSS in webpack bundle without JSON loader.

• Fix index and word options in Warning#toString (by @TrySound).
• Fix input source content loading in errors.
• Fix map options on using LazyResult as input CSS.
• 100% test coverage.
• Use Babel 6.

• Allow passing a previous map with no mappings (by @papandreou).

• Increase plugins performance by 1.5 times.

• Fix warning from nodes without source.

• Fix source map type detection (by @asan).

• Fixed a missed step in 5.0.7 that caused the module to be published as ES6 code.

• PostCSS now requires that node 0.12 is installed via the engines property in package.json (by @leftstick).

• Fix parsing nested at-rule without semicolon (by @mahtd).
• Trim Declaration#value (by @TrySound).

• Fix multi-tokens property parsing (by @mahtd).

• Fix start position in Root#source.
• Fix source map annotation, when CSS uses \r\n (by @MohammadYounes).

• Fix url() parsing.
• Fix using selectors in Rule constructor.
• Add start source to Root node.

• Fix remove(index) to be compatible with 4.x plugin.

• Fix PostCSS 4.x plugins compatibility.
• Fix type definition loading (by @jedmao).

<img src="https://cloud.githubusercontent.com/assets/19343/9369745/ef051dba-46d3-11e5-90dc-9154d656b182.png" align="right" width="200" height="199" alt="President Valac seal">

PostCSS 5.0 brings custom syntax and fixes plugin API.

It is a biggest release in project history. But do not worry, we have only few very rare breaking changes.

Breaking Changes

• safe option was removed and Safe Parse was moved to separated project.<br>Use parser: require('postcss-safe-parser') instead.
• Node.js 0.10 is not officially supported anymore. However, PostCSS should still work, if you install and load the es6-promise polyfill.
• Node#toString does not include before space symbols for root nodes.
• Very rare returning new Root plugin API was removed.

Custom Syntaxes

Now PostCSS can transform styles in any syntax, not only in CSS. It is important for cases:

• We have many tools like CSSfmt or Stylelint, which works directly with sources. So now, they will be able to work with SCSS by postcss-scss.
• Now we can use shorter syntax for PostCS-only solutions. For example, // one line comments with SCSS parser or SugarSS with Stylus/Sass like syntax.
• CSS-in-JS solutions like React Style Autoprefix or Styling now can directly convert JS object to PostCSS AST without stringifing and reparsing.

PostCSS 5.0 has 3 new options:

• parser to change input parser. For example, to use Safe Parser in online demo tool.
• stringifier to change output content generator.
• syntax to change both parser and stringifier.

Because some syntax can return non-CSS value, Result now has content alias.

import scss from 'postcss-scss';

postcss().process(source, { syntax: scss }).then( (result) => {
    result.content // SCSS-to-SCSS transforms
});

postcss().process(source, { parser: scss }).then( (result) => {
    result.css // Compile SCSS one-line comments
});

We wrote good docs about developing new syntax for PostCSS. If you will have any questions, ask in our Gitter chat.

API Changes

In 5.0 we change nodes API to make it clear and more familiar to DOM or jQuery API. Do not worry, old methods are still work, just show a deprecated message.

If your plugin is built with PostCSS 5.0, it will have plugin.process(css) shortcut to work as separated tool:

import nested from `postcss-nested`;
nested.process(css).then( result => console.log(result.css) );

@jedmao renamed eachInside, eachDecl, eachRule, eachAtRule and eachComment to walk, walkDecls, walkRules, walkAtRules and walkComments. So recursive behaviour is more clear.

@ben-eb with @jonathantneal made API more common with DOM API:

• Method remove deletes node itself and removeChild removes child from container.
• Method Node#replace was removed in favor of replaceWith.
• Insert methods now support multiple arguments with nodes.

All whitespace symbols properties now called “raw” and located in Node#raws object, so custom parser can add own custom raw properties. Node#style and cleanStyles methods were renamed to raw and cleanRaws:

if ( decl.raw('before').match(/\n/) ) {
    decl.raws.before = '';
}

Messages

PostCSS ecosystem now has one of the best CSS linters — Stylelint. So we make warning/error API much better.

First, In 5.0 we have smarter color support detection by @sindresorhus supports-color.

Second, we add word and index options to errors and warnings methods to highlight special word in bad node.

Third, we now have Node#warn shortcut to add warnings:

export default postcss.plugin('postcss-important-hater', () => {
    return (css, result) => {
        css.walkDecls( (decl) => {
            if ( decl.important ) {
                decl.warn(result, '!important is bad', { word: '!important' });
            }
        });
    };
});

// title.sass:2:15 !important is bad
// .title
//   color: black !important
//                ^

TypeScript and Windows

@jedmao made PostCSS really enterprise ready solution :).

First, he fix all tests on Windows and added AppVeyor CI to test every commit on Windows.

Second, he made really big job and added type definitions for TypeScript. For example, Visual Studio will show nice autocompletion with documentation:

Do not worry, PostCSS itself is still ES7 project.

Other Changes

• Deprecate CssSyntaxError#generated in favor of input.
• Deprecate Root#prevMap in favor of Root.source.input.map.
• Add stringifier option to Node#toString.
• Rule#selectors setter detects separators.
• Add postcss.stringify method.
• Throw descriptive errors for incorrectly formatted plugins.
• Add docs to npm release.
• Fix url() parsing.