Skip to content

1.0 “Marquis Decarabia”
Compare
Choose a tag to compare
@ai ai released this 23 Jun 09:25
· 3833 commits to main since this release
1.0.0
This tag was signed with the committer’s verified signature.
ai Andrey Sitnik
GPG key ID: A9E09B941F710E4D
Learn about vigilant mode.
c1bfc6a

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.
Assets 2
Loading