75 lines
3.2 KiB
Markdown
75 lines
3.2 KiB
Markdown
|
# 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`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
processor
|
|||
|
|
.process(css, {
|
|||
|
|
from: 'app.sass.css',
|
|||
|
|
to: 'app.css',
|
|||
|
|
map: { inline: false }
|
|||
|
|
})
|
|||
|
|
.then(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 is `true`.
|
|||
|
|
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 of `result.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
|
|||
|
|
with `prev: false`.
|
|||
|
|
|
|||
|
|
* `sourcesContent` boolean: indicates that PostCSS should set the origin
|
|||
|
|
content (for example, Sass source) of the source map. By default,
|
|||
|
|
it is `true`. 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 for `annotation`.
|
|||
|
|
|
|||
|
|
If you have set `inline: true`, annotation cannot be disabled.
|
|||
|
|
|
|||
|
|
* `from` string: by default, PostCSS will set the `sources` property of the map
|
|||
|
|
to the value of the `from` option. If you want to override this behaviour, you
|
|||
|
|
can use `map.from` to explicitly set the source map's `sources` property.
|
|||
|
|
Path should be absolute or relative from generated file
|
|||
|
|
(`to` option in `process()` method).
|
|||
|
|
|
|||
|
|
[source maps]: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
|