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

CSS escapes #102

Closed
emagnier opened this issue May 8, 2013 · 7 comments
Closed

CSS escapes #102

emagnier opened this issue May 8, 2013 · 7 comments

Comments

@emagnier
Copy link

emagnier commented May 8, 2013

I'm using the font-icons method (via the @media rule) which display a specific character (the icon) via the CSS content property in a pseudo class (:before/:after).

For some special characters my tool adds a backslash before it, which is valid and compiles well with the official ruby compiler:

[data-icon='test-1']:before {
    content:'\\';
}

[data-icon='test-2']:before {
    content:'\'';
}

[data-icon='test-3']:before {
    content:"\"";
}

But with Libsass I get this error message:
error reading values after '\\';

I also made a search about this and discovered the CSS escape can be use in the selectors:

.\E9motion { ... }
.\E9 dition { ... }
.\0000E9dition { ... }

These selectors represent the word émotion and édition.
More details here: http://www.w3.org/International/questions/qa-escapes

@emagnier
Copy link
Author

I'm trying to compile inuit.css (a great OOCSS framework) with Libsass, but it also block on this kind of code:

$open-quote: \201C;
$close-quote: \201D;

@craigbarnes
Copy link
Contributor

According to the CSS 2.1 grammar spec, literal, UTF-8 encoded characters ("nonascii") are valid in selectors too but that also causes an error in libsass:

$ sassc <<< '.émotion {color: red}'
:1: error: invalid top-level expression

http://jsfiddle.net/XbGfh/

@akhleung
Copy link

akhleung commented Jun 9, 2013

I've added some backslash handling to the refactor branch ... I'll make sure it works with your examples and merge it during the coming week.

@emagnier
Copy link
Author

Just for the follow up, all examples listed above works now.
Except this:

[data-icon='test-1']:before {
    content:'\\';
}

[data-icon='test-2']:before {
    content:'\'';
}

[data-icon='test-3']:before {
    content:"\"";
}

@akhleung
Copy link

Hmm, looks like I need to futz with the string matcher ... thanks for checking!

@emagnier
Copy link
Author

FYI this code also doesn't work:

$open-quote:    «;
$close-quote:   »;

akhleung pushed a commit that referenced this issue Jun 7, 2014
Properly handle escaped quotes. Fixes #102
@emagnier
Copy link
Author

emagnier commented Jun 7, 2014

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants