Character encoding at-rule in css from sass breaks sourcemap

[JacobDorman]

A unicode character in SCSS causes libsass to add @charset "UTF-8"; to the CSS. The sourcemap works correctly.

After running through autoprefixer, the new sourcemap points at the CSS instead of the SCSS.

body {
  background: #BADA55;
  /*  ≠  */
}

[email protected] [email protected] with [email protected]

nDmitry/grunt-autoprefixer#88

[ai]

Can you put here sources and map files.

[JacobDorman]

scss:

body {
  background: #BADA55;
  /*  ≠  */
}

--> [email protected]

pre.css

@charset "UTF-8";
body {
  background: #BADA55;
  /*  ≠  */ }

/*# sourceMappingURL=pre.css.map */

pre.css.map:

{
    "version": 3,
    "file": "pre.css",
    "sources": [
        "../app.scss"
    ],
    "sourcesContent": [],
    "mappings": "AAAA;EACE,AAAY",
    "names": []
}

--> [email protected] with [email protected]

app.css

@charset "UTF-8";
body {
  background: #BADA55;
  /*  ≠  */ }
/*# sourceMappingURL=app.css.map */

app.css.map (unminified)

{
  "version": 3,
  "sources": [
    "../app.scss",
    "pre.css"
  ],
  "names": [],
  "mappings": "AAAA,kBAAA;ACCA;EACE,qBAAoB;EACpB,UAAS,EAAE",
  "file": "app.css"
}

[JacobDorman]

https://github.com/JacobDorman/libsass-autoprefixer-test/compare/master...works?diff=split&name=works

[ai]

@JacobDorman I mean zip file with all file inside :).

But maybe you can help me. Can you check finish output CSS and maps by source map vizializer. Click “Custom…”, select all necessary files, and pt link with base64 here.

[JacobDorman]

I'll check out source map visualizer, but that repo contains a minimal test case with css and map output committed, as well as the node dependencies.

master branch produces the broken sourcemap:
works branch produces a correct sitemap:

You can see a comparison of app.scss -> pre.css pre.css.map -> app.css app.css.map by Comparing the Branches

git clone [email protected]:JacobDorman/libsass-autoprefixer-test.git
grunt sass
grunt postcss #broken sitemap
git checkout works
grunt sass
grunt postcss #working sitemap

Zip Download

[JacobDorman]

Visualizer results:

Without @charset

With @charset

Both times the site prompts for Provide original source file "../app.scss" but the second (broken) time it then asks for Provide original source file "pre.css":. The sourcemap shouldn't be referencing the intermediate css file.

[ai]

It is a Sass issue postcss/postcss#308