Skip to content

Releases: postcss/postcss

2.0 “King Belial”

23 Jul 07:23
@ai ai
2.0.0
Compare
Choose a tag to compare

King Belial seal

PostCSS 2.0 was rewritten from CoffeeScript to ES6, contains Safe Mode and is more friendly to new developers.

ES6

PostCSS was written on CoffeeScript to have clean and readable code. But many developers afraid CoffeeScript, because of very different syntax.

I think, that it is very important to be able to read your framework sources. To be more friendly to developers PostCSS was rewritten to ES6.

If you use npm you will not see any changes. PostCSS releases contain only compiled pure JS from Traceur. But now you can read PostCSS sources without the knowledge of CoffeeScript syntax.

Testing

PostCSS should not fall on some legacy CSS with hacks. So we have not only unit tests, but also test all releases with real world CSS from Twitter, GitHub, Bootstrap and Habrahabr.

But this sites have good written code. PostCSS 2 are also tested with Browserhacks examples and contains few parser fixes to pass all CSS hacks from there.

Safe Mode

PostCSS 2.0 had special Safe Mode, which try to fix broken CSS. For example, it will parse a { as a {}. It will be useful for live input tool (like Autoprefixer interactive demo) or to parse old legacy code.

postcss.parse('a {');                 // will throw "Unclosed block"
postcss.parse('a {', { safe: true }); // will return CSS root for a {}

Raw Properties

PostCSS used getter and setter for selector, value, etc properties. They confused new users, because getters was not showed, when you inspect node in console.

PostCSS 2 is more friendly to new developers and use only regular properties without any magic.

1.0 “Marquis Decarabia”

23 Jun 09:25
@ai ai
1.0.0
Compare
Choose a tag to compare

Marquis Decarabia seal

This release improved source map API and allowed to use PostCSS with multiple inputs, like in file concatenation tools.

Source Map API Changes

@lydell suggested great plan to clean up source map options. Now all map options will be inside map object.

  • inlineMap: true was renamed to map: { inline: true }.
  • mapAnnotation: false was renamed to map: { annotation: false }.
  • Previous source map should be set to separated option map: { prev: prevMap } instead of old map: prevMap.

There is map: 'inline' shortcut if you want to set only map: { inline: true }. Old options are deprecated and will print warnings.

Also there are two API improvements for plugin’s popular needs:

  • Map can contain origin CSS source, if you set map: { sourcesContent: true } option.
  • You can change result map path by map: { annotation: '../maps/app.css.map' } option. Note that path in annotation must be relative to output CSS file.

Result API Changes

By @dantman idea, process(css, opts) and toResult(opts) methods now return lazy result object, so CSS will not be stringified until you access to result.css or result.map properties:

var result1 = processor.process(css1);
var result2 = processor.process(css2);
// We need to concat this files, so we doesn’t need to stringify content yet

result1.root.append( result2.root );
result1.css // Now output CSS will be stringified
result1.map // Source map will be generated only now
            // and will include map from result2

Also Result#map will return SourceMapGenerator object (from Mozilla’s source-map) instead of string. It will allow to change something in generated map:

var result = processor.process(css, { map: true });
result.map.applySourceMap(otherMap, 'undetected.css');

console.log('map: ' + result.map) // SourceMapGenerator has toString() method,
                                  // so old code should work
result.map.toJSON().file // But also you can access to generated map properties

Styles Concatenation

PostCSS now tracks previous source map in every node. So, when you move any node from one root to another, it will take previous map:

root1 = postcss.parse(css1, { map: { prev: prev1 } });
root2 = postcss.parse(css2, { map: { prev: prev2 } });

root1.append( root2.rules[0] );

root.toResult().map // will include prev1 and prev2 maps

Also all methods to add node (append, prepend, insertBefore, insertAfter) now accept arrays and Root node:

root1.append( root2 );
root1.append( root3.rules[1].rules );

Other Changes

  • PostCSS is written on CoffeeScript, so you wasn’t be able to use latest unreleased versions from GitHub. Now code contains special hack and you can use latest PostCSS by
    "postcss": "ai/postcss" in your npm’s package.json.
  • Root node now has prevMap property with information about previous map. Mostly for internal usage, but maybe you will need it.
  • PostCSS will try to autodetect previous source map file only if input CSS contains annotation comment with map path.
  • Node#source.file now contains absolute path. It is also part of work to support style concatenation, when you can generate different roots from different paths.
  • Declaration#clone() will clean between style too to use style from new place.

0.3.5

30 May 05:57
@ai ai
0.3.5
Compare
Choose a tag to compare
  • Allow to use Root or Result as first argument in process().
  • Save parsed AST to Result#root.

0.3.4

03 Mar 20:23
@ai ai
0.3.4
Compare
Choose a tag to compare
  • Better space symbol detect to read UTF-8 BOM correctly.

0.3.3

02 Mar 09:15
@ai ai
0.3.3
Compare
Choose a tag to compare
  • Remove source map hacks by using new Mozilla’s source-map (by @lydell).

0.3.2

19 Feb 11:08
@ai ai
0.3.2
Compare
Choose a tag to compare
  • Add URI encoding support for inline source maps.

0.3.1

18 Feb 12:26
@ai ai
0.3.1
Compare
Choose a tag to compare
  • Fix relative paths from previous source map.
  • Safer space split in Rule#selectors (by @lydell).

0.3 “Prince Seere”

13 Feb 20:38
@ai ai
0.3
Compare
Choose a tag to compare

Prince Seere seal

This release improve source map support, copy your code style in new nodes and add few API.

Source Map

If you generate map for your changes, output CSS will contains source map annotation comment:

a { }
/*# sourceMappingURL=to.css.map */

Now you can inline source map to annotation comment by data:uri. Use inlineMap option:

var result = porcessor.process(css, { inlineMap: true });
result.map //=> undefined, because map is in CSS
result.css //=> "a{}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5taW4uY3NzIiwic291cmNlcyI6WyJtYWluLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFLIn0= */"

PostCSS will autodetect previous source map if map is in annotation comment or in file near input CSS. You can disable autodetection by map: false option.

Source map now has special fixes to works on Windows and in subdirectories. Thanks to @nDmitry and @lydell, they did great investigation.

Code Style

New rule will copy style from parsed rules:

var root = postcss,parse(".empty {};\na {\n  color: black;\n  }");
var rule = postcss.rule({ selector: 'b' });
root.append(rule);

rule.toString(); //=> "b {}"
                 // copy style from empty rule

rule.append({ prop: 'top', value: '1px' });
rule.toString(); //=> "b {\n  top: 1px;\n  }"
                 // copy style from rule with declaration

Selector and at-rule params was cleaned from spaces and comments before {. AtRule and Rule nodes now has between property. Declaration also has between property with colon, spaces and comments between property name and value.

API Changes

  • Comments between rules and declarations now parsed to Comment node.
  • Container node now has first and last shortcut with first or last child.
  • Declaration value will not contains !important rule anymore. It will be parsed to separated important property.
  • You can now break any nodes iteration with return false.
  • New method eachInside() allow you to recursive iterate node of all types.
  • Rule now contains selectors shorcut property, which returns selectors in array.
  • In 0.3 process multiple input files will be easy by toResult() method in Root.

0.2 “Duke Dantalion”

17 Dec 23:50
@ai ai
0.2
Compare
Choose a tag to compare

Duke Dantalion seal

- Add source map support. - Add shortcuts to create nodes. - Method `process()` now returns object with `css` and `map` keys. - Origin CSS file option was renamed from `file` to `from`. - Rename `Node#remove()` method to `removeSelf()` to fix name conflict. - Node source was moved to `source` property with origin file and node end position. - You can set own stringify function.

0.1 “Count Andromalius”

17 Dec 23:42
@ai ai
0.1
Compare
Choose a tag to compare

Count Andromalius seal

- Initial release.