CSS - Source Map

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

For each CSS file it produces, a CSS preprocessor generates:

  • a source map file (.map)
  • and the compiled CSS.

The source map file is a JSON file that defines a mapping between:

  • each (compiled|generated) CSS declaration
  • and the corresponding line of the source file.

It allow then to map the (compiled|generated) CSS back to the original pre-processor source file.

Each CSS file contains an annotation that specifies the (URL|location) of its source map file, embedded in a special comment on the last line of the file:

/*# sourceMappingURL=<url> */
Advertising

3 - Example

For instance, Sass generates:

  • from the following Sass source file (styles.scss)
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}
  • a CSS file (styles.css) that contains the sourceMappingURL annotation
h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */
  • and the source map file (styles.css.map)
{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

where the mappings values are encoded in VLQ (Variable Length Quantity)

web/css/source_map.txt · Last modified: 2019/02/09 11:40 by gerardnico