3.2 KiB
PostCSS and Source Maps
PostCSS has great source maps support. It can read and interpret maps from previous transformation steps, autodetect the format that you expect, and output both external and inline maps.
To ensure that you generate an accurate source map, you must indicate the input
and output CSS file paths — using the options from
and to
, respectively.
To generate a new source map with the default options, simply set map: true
.
This will generate an inline source map that contains the source content.
If you don’t want the map inlined, you can set map.inline: false
.
processor
.process(css, {
from: 'app.sass.css',
to: 'app.css',
map: { inline: false },
})
.then(function (result) {
result.map //=> '{ "version":3,
// "file":"app.css",
// "sources":["app.sass"],
// "mappings":"AAAA,KAAI" }'
});
If PostCSS finds source maps from a previous transformation, it will automatically update that source map with the same options.
Options
If you want more control over source map generation, you can define the map
option as an object with the following parameters:
-
inline
boolean: indicates that the source map should be embedded in the output CSS as a Base64-encoded comment. By default, it istrue
. But if all previous maps are external, not inline, PostCSS will not embed the map even if you do not set this option.If you have an inline source map, the
result.map
property will be empty, as the source map will be contained within the text ofresult.css
. -
prev
string, object, boolean or function: source map content from a previous processing step (for example, Sass compilation). PostCSS will try to read the previous source map automatically (based on comments within the source CSS), but you can use this option to identify it manually. If desired, you can omit the previous map withprev: false
. -
sourcesContent
boolean: indicates that PostCSS should set the origin content (for example, Sass source) of the source map. By default, it istrue
. But if all previous maps do not contain sources content, PostCSS will also leave it out even if you do not set this option. -
annotation
boolean or string: indicates that PostCSS should add annotation comments to the CSS. By default, PostCSS will always add a comment with a path to the source map. PostCSS will not add annotations to CSS files that do not contain any comments.By default, PostCSS presumes that you want to save the source map as
opts.to + '.map'
and will use this path in the annotation comment. A different path can be set by providing a string value forannotation
.If you have set
inline: true
, annotation cannot be disabled. -
from
string: by default, PostCSS will set thesources
property of the map to the value of thefrom
option. If you want to override this behaviour, you can usemap.from
to explicitly set the source map'ssources
property. Path should be absolute or relative from generated file (to
option inprocess()
method).