You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

74 lines
3.2 KiB

4 years ago
  1. # PostCSS and Source Maps
  2. PostCSS has great [source maps] support. It can read and interpret maps
  3. from previous transformation steps, autodetect the format that you expect,
  4. and output both external and inline maps.
  5. To ensure that you generate an accurate source map, you must indicate the input
  6. and output CSS file paths — using the options `from` and `to`, respectively.
  7. To generate a new source map with the default options, simply set `map: true`.
  8. This will generate an inline source map that contains the source content.
  9. If you don’t want the map inlined, you can set `map.inline: false`.
  10. ```js
  11. processor
  12. .process(css, {
  13. from: 'app.sass.css',
  14. to: 'app.css',
  15. map: { inline: false }
  16. })
  17. .then(result => {
  18. result.map //=> '{ "version":3,
  19. // "file":"app.css",
  20. // "sources":["app.sass"],
  21. // "mappings":"AAAA,KAAI" }'
  22. })
  23. ```
  24. If PostCSS finds source maps from a previous transformation,
  25. it will automatically update that source map with the same options.
  26. ## Options
  27. If you want more control over source map generation, you can define the `map`
  28. option as an object with the following parameters:
  29. * `inline` boolean: indicates that the source map should be embedded
  30. in the output CSS as a Base64-encoded comment. By default, it is `true`.
  31. But if all previous maps are external, not inline, PostCSS will not embed
  32. the map even if you do not set this option.
  33. If you have an inline source map, the `result.map` property will be empty,
  34. as the source map will be contained within the text of `result.css`.
  35. * `prev` string, object, boolean or function: source map content from
  36. a previous processing step (for example, Sass compilation).
  37. PostCSS will try to read the previous source map automatically
  38. (based on comments within the source CSS), but you can use this option
  39. to identify it manually. If desired, you can omit the previous map
  40. with `prev: false`.
  41. * `sourcesContent` boolean: indicates that PostCSS should set the origin
  42. content (for example, Sass source) of the source map. By default,
  43. it is `true`. But if all previous maps do not contain sources content,
  44. PostCSS will also leave it out even if you do not set this option.
  45. * `annotation` boolean or string: indicates that PostCSS should add annotation
  46. comments to the CSS. By default, PostCSS will always add a comment with a path
  47. to the source map. PostCSS will not add annotations to CSS files that
  48. do not contain any comments.
  49. By default, PostCSS presumes that you want to save the source map as
  50. `opts.to + '.map'` and will use this path in the annotation comment.
  51. A different path can be set by providing a string value for `annotation`.
  52. If you have set `inline: true`, annotation cannot be disabled.
  53. * `from` string: by default, PostCSS will set the `sources` property of the map
  54. to the value of the `from` option. If you want to override this behaviour, you
  55. can use `map.from` to explicitly set the source map's `sources` property.
  56. Path should be absolute or relative from generated file
  57. (`to` option in `process()` method).
  58. [source maps]: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/