Releases: postcss/postcss
2.0 “King Belial”
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”
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 tomap: { inline: true }
.mapAnnotation: false
was renamed tomap: { annotation: false }
.- Previous source map should be set to separated option
map: { prev: prevMap }
instead of oldmap: 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 inannotation
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’spackage.json
. Root
node now hasprevMap
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 cleanbetween
style too to use style from new place.
0.3.5
0.3.4
0.3.3
0.3.2
0.3.1
0.3 “Prince Seere”
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
andlast
shortcut with first or last child. - Declaration value will not contains
!important
rule anymore. It will be parsed to separatedimportant
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 inRoot
.