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
Lightning CSS doesn't escape content: "\..."
#310
Comments
At least from my understanding, this conversion of the Unicode is due to the missing |
UTF-8 is the default character set for CSS, so I don't think this is necessary? |
I might be misunderstanding the problem then but isn't this causing the change from |
Escaping isn't necessary since the output is utf8. |
This is something I've encountered too. I'm currently unsure what causes Chrome to suddenly think that the CSS file isn't UTF-8, but I have a hunch that it's something to do with devtools. There's a discussion over in the Font Awesome repo about a similar issue: FortAwesome/Font-Awesome#17644 The consensus there seems that |
Our QA also managed to narrow it down to having DevTools open and refreshing the page. |
@charset
rulecontent: \...
content: \...
content: "\..."
content: "\..."
content: "\..."
We've had the same issue recently with migrated sites that were still using font icons. Had to revert back to nanocss for the time being as clients reported issues with icons. Same thing: |
See https://developer.mozilla.org/en-US/docs/Web/CSS/@charset for the rules of how a charset is chosen by browsers when loading a CSS file. The problem could be that you are setting a non-UTF8 charset as part of the |
I've hacked around parcel bug to include |
Honestly this sounds like a chrome dev tools bug? Has anyone filed an issue there? |
Met the same issue. |
I have also seen this problem, and I would also greatly appreciate if this behavior could be made optional... |
I can confirm this issue. For me it's the same using |
In the Lightning CSS documentation, it states:
However, this doesn't seem to be true for projects using font icons. Lightning CSS converts all Unicode escapes into direct Unicode characters. Browsers can't render these. To address this, I suggest you to implement a feature that will compare characters against a list of most common used UTF-8 characters and encode only those that match. As this issue is still open for over a year now, I'm moving back to PostCSS. Hopefully, it could be resolved soon as this is an incredible project that suits all CSS needs nowadays. |
Would be good to have an option to keep the let { code } = transform({
code: Buffer.from(`
.foo:before {
content: "\\31";
}
.bar:before {
content: "\\e4c2";
}
`),
}); Produce: .foo:before {
content: "1";
}
.bar:before {
content: "";
} But I expect that it keep the original value |
We have
@charset "UTF-8";
in our CSS which Lightning CSS is skipping when bunding/minifying the styles.Without it, it's possible to encounter issues with displaying unicode like in #164.
There are other ways to insert the character encoding like HTTP headers and the HTML but this is not possible for people in some use cases.
Is it possible to respect the
@charset
rule?I've also prepared a Playground link demonstrating the issue.
The text was updated successfully, but these errors were encountered: