Error compiling bootstrap glyphicon, and font-awesome.

[yanivkalfa]

I am trying to compile bootstrap-sass or font-awesome-sass to normal css. The fonts are being added correctly however the '::after -> content ' attribute is messaged up completely.

To check that its not on my end, I took the content of a working icon, and pasted it instead of the content that your compiler produced and it works fine.

[nex3]

Can you provide a concrete example of Sass code that compiles as expected in Ruby Sass and not in Dart Sass?

[yanivkalfa]

@nex3
This is just a normal webpack repo - anything else that uses node-sass/sass-loader will do just fine.
https://github.com/yanivkalfa/react-redux-immutable-router-localization/blob/icons-test/src/app/containers/Home/index.js

The compiled css for glyphicons are correct.
eg: 'glyphicon-arrow-right:before{content:"\E092"}'

Take this little icon test repo:
https://github.com/yanivkalfa/icon-test
npm run test
look at the created style.css
and look for : 'glyphicon-arrow-right'
You'll see that the content is wrong.

I hope that helps.

[nex3]

I'm looking for a stand-alone reproduction: just plain Sass code, the CSS you expect to be generated, and the CSS that's actually generated.

[yanivkalfa]

@nex3 the second repo: https://github.com/yanivkalfa/icon-test is a stand-lone reproduction of the error...

Very simple sass to css
i took a bootstrap scss and convert it to css and the error happened .

[nex3]

It's not standalone; it imports a file from bootstrap.

[yanivkalfa]

I see, well I am not sure how else I could farther assist you. something is going wrong there that produces incorrect css by compiling a scss bootstrap file.

The above example show you how to reproduce it without doing anything fancy. meanwhile i moved to another structure to workaround the problem.

If you have any question I will be happy to answer.

[nex3]

I'm going to close this pending a standalone test case.

[yanivkalfa]

@nex3 https://github.com/yanivkalfa/icon-test i've made it even simpler - now i am just take the string .glyphicon-arrow-left { &:before { content: "\e091"; } } in a file and compiled it. and the css output is still wrong. - so there's definitely some sort of a bug.

I hope that's specific enough to take a look at.

[yanivkalfa]

@nex3
after checking a little farther - this error doesn't happened when you use "data"

const sass = require('sass');

const result = sass.renderSync({ data: '.glyphicon-arrow-left { &:before { content: "\e091"; } }' });
console.log(result.css.toString()); - will produce the right output.

However

const result = sass.renderSync({ file: path_to_file });
console.log(result.css.toString());

Will not.

[nex3]

Dart Sass does compile CSS escapes to literal Unicode values--that is, it generates content: "" rather than content: "\e091". I believe Node Sass does not do this, so perhaps that's the difference you're seeing. However, the CSS spec declares that these representations are identical, and as far as I've ever seen no browsers render them differently (assuming the browser reads your CSS as UTF-8).

Your data: example is broken; the backslash is interpreted by JavaScript, not by Sass, and so it generates content: "e091" without a backslash at all. If you escape the backslash, the output is the same.

[yanivkalfa]

@nex3 I was using Chromium 61.0.3163.1. haven't tested any other browsers. either way. thanks for responding and good luck with the project.

[nex3]

This pen uses both an escape code and a literal Unicode character, and renders two identical snowmen for me on Chrome 67.0.3396.79 and Firefox 52.6.0.

[N6REJ]

is there anyway to force uft-8 output?

[nex3]

@N6REJ I'm not sure what you mean by that. Sass always emits UTF-8.

[N6REJ]

@nex3 sorry it does not..
in one of your previous statements you yourself stated so..

Dart Sass does compile CSS escapes to literal Unicode values--that is, it generates content: "" rather than content: "\e091". I believe Node Sass does not do this, so perhaps that's the difference you're seeing.

if you run ruby based sass on scss you'll get unicode output, if you run js npm-sass you'll get utf-8
Try it yourself with fontawesome

[nex3]

I'm not sure what the difference between "unicode output" and "utf-8" is, and I don't know whether "js npm-sass" refers to the node-sass package or the sass package.

[N6REJ]

ok, I"m probably confusing us both since This is my first time trying to use scss....
IF I use a ruby based scss compressor, then as you stated it output unicode. so you don't get \e091 in your *.css file. you get content: ""
IF, I use node-sass ( which I understand uses js instead of ruby ) then I do get content: "e091" as desired...
While they may function the same ( idk ) I don't want obscure non-readable chars in my output.

[nex3]

What you're looking for is an escape code rather than a UTF-8 character. #568 tracks adding a flag to force all non-ASCII characters to be emitted as escape codes.

[N6REJ]

Dart Sass does compile CSS escapes to literal Unicode values--that is, it generates content: "" rather than content: "\e091". I believe Node Sass does not do this, so perhaps that's the difference you're seeing. However, the CSS spec declares that these representations are identical, and as far as I've ever seen no browsers render them differently (assuming the browser reads your CSS as UTF-8).

Your data: example is broken; the backslash is interpreted by JavaScript, not by Sass, and so it generates content: "e091" without a backslash at all. If you escape the backslash, the output is the same.

Thats not what you stated here. Please stop giving me the run around.

[nex3]

@N6REJ Please follow the Sass community guidelines. In particular, please assume good intentions from people you interact with. It's not appropriate to accuse me of "giving [you] the run around".