Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Character encoding at-rule in css from sass breaks sourcemap #430

Closed
JacobDorman opened this issue Mar 27, 2015 · 7 comments
Closed

Character encoding at-rule in css from sass breaks sourcemap #430

JacobDorman opened this issue Mar 27, 2015 · 7 comments
Labels
Milestone

Comments

@JacobDorman
Copy link

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;
  /*  ≠  */
}

grunt-sass@0.18.1 grunt-postcss@0.3.0 with autoprefixer-core@5.1.8

nDmitry/grunt-autoprefixer#88

@ai
Copy link
Member

ai commented Mar 27, 2015

Can you put here sources and map files.

@JacobDorman
Copy link
Author

scss:

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

--> grunt-sass@0.18.1

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": []
}

--> grunt-postcss@0.3.0 with autoprefixer-core@5.1.8

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"
}

@ai
Copy link
Member

ai commented Mar 27, 2015

@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
Copy link
Author

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 git@github.com:JacobDorman/libsass-autoprefixer-test.git
grunt sass
grunt postcss #broken sitemap
git checkout works
grunt sass
grunt postcss #working sitemap

Zip Download

@JacobDorman
Copy link
Author

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
Copy link
Member

ai commented May 5, 2015

It is a Sass issue postcss/postcss#308

@ai ai closed this as completed May 5, 2015
@ai ai modified the milestone: 5.2 Jan 14, 2016
@ai ai removed the 5.2 label Jan 14, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants