Skip to content

Character escaping inside selectors #9

@SuggonM

Description

@SuggonM

Using the online demo, I'm getting this error in browser console when trying to parse a rule with special characters escaped:

.wendy\'s {}
parse.js:62 Uncaught 
Error: Unmatched ' (line 1, char 8)
    at parseError (parse.js:62:15)
    at Object.parse (parse.js:110:6)
    at outputUpdated (parse.js:151:19)
    at HTMLTextAreaElement.changed (parse.js:185:2)

which is equivalent to this block:

CSSOM/lib/parse.js

Lines 106 to 113 in 64dfbde

case "'":
index = i + 1;
do {
index = token.indexOf("'", index) + 1;
if (!index) {
parseError("Unmatched '");
}
} while (token[index - 2] === '\\');

Another minor issue is that, round braces and many other invalid-but-escapable selectors remain unchanged when using toString(). Perhaps we could somehow ensure that the returned selector of toString() method is always valid?

.wendy(s) {}
// current: .wendy(s) {}
// suggestion: .wendy\(s\) {}
CSSOM.parse('.wendy(s) {}').toString();

I'm trying to parse a fairly large CSS spritesheet that has a lot of these characters, so fixing this would be of huge help!

Another suggestion that may or may not be relevant to this repository is, using a CSS escaping module. Mathias has made one in cssesc and it addresses both cases mentioned above, for example here and here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions