postcss/postcss 4.0.0

4.0 “Duke Flauros”

on GitHub

PostCSS 4.0 brings new APIs for plugin developers.

New Methods

• cloneBefore() and cloneAfter() shortcuts to clone node and insert clone before or after current one.
• moveTo(rule), moveBefore(node) and moveAfter(node) to remove node from current parent and append to other parent or insert before/after other node.
• replaceWith(other) to replace node with other node.
• rule.removeAll() to remove all children from rule.
• next(), prev() and root() to travel between nodes.
• replaceValues(regexp, callback) to replace some string in all declarations values.

Iteration with Filter

Methods eachDecl() and eachAtRule() now have optional first argument with string or regexp to filter declarations by property or at-rules by name:

css.eachDecl(/background(|-image)/, function (decl) {
    inlineImage(decl);
});
css.eachAtRule('keyframes', function (atrule) {
    atrule.removeSelf();
});

Custom Syntax Errors

If CSS use wrong syntax of your plugin (for example, wrong variable name for variables plugin) now you can throw a custom syntax error with source map support:

if ( wrongName ) {
    throw node.error('Wrong variable name');
}
//=> CssSyntaxError: popup.css:45:5: Bad variable syntax
//   var-name: 1
//   ^

Also error object is a best way to create warning:

if ( notSupported ) {
    var error = node.error('This property is not supported in IE');
    console.warn( error.toString() );
}

PostCSS syntax error output now contains class name to be like other node.js errors.

Indentations

PostCSS 4.0 has a lot of fixes in CSS whitespaces support. For example, it will change indentation, when you move rule to other node. So plugins like postcss-nested now will return readable output.

API Changes

• Container#childs was renamed to nodes.
• PostCSS#processors was renamed to plugins.
• Node#source.file was moved to source.input.file.

Other Changes

• You can use object shortcut to create and append rule and at-rule: root.append({ selector: 'a' }) and root.append({ name: 'encoding', params: '"utf-8"' }).