Add support for escaping names in CSS

[koaning]

trafficstars

I'm working on a plugin that tries to mimic tailwind.css for Textual. It's called tuilwindcss.

Many things work swell out of the box, but I'm stuck on the relative widths. In tailwind.css you're able to use a class like w-1/5 to declare a 20% width.

That would lead me to add the following classes to my generated CSS file.

w-1/5 {
    width: 20%;
}

w-1/4 {
    width: 25%;
}

w-1/3 {
    width: 33.333%;
}

But! When added that to my CSS file, I got this error when I tried actually using it.

> python docs/examples/css.py
 Error in stylesheet:
 /home/vincent/Development/tuilwindcss/docs/examples/tuilwind.css:79074:2
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│   79072 │   text-style: strike;                                                                   │
│   79073 }                                                                                         │
│ ❱ 79074                                                                                           │
│   79075 w-1\5 {                                                                                  │
│   79076 │   width: 20%;                                                                           │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
 • Expected one of 'combinator child', 'comment start', 'declaration set start', 'new selector',     
 'pseudo class', 'selector', 'selector class', 'selector id', 'selector universal', or 'whitespace'. 
 • Did you forget a semicolon at the end of a line?  

I think Tailwind "solves" this by adding an escape character so that w-1/5 becomes w-1/\5, but that yields nearly the same error.

python docs/examples/css.py
 Error in stylesheet:
 /home/vincent/Development/tuilwindcss/docs/examples/tuilwind.css:79074:2
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│   79072 │   text-style: strike;                                                                   │
│   79073 }                                                                                         │
│ ❱ 79074                                                                                           │
│   79075 w-1\/5 {                                                                                  │
│   79076 │   width: 20%;                                                                           │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
 • Expected one of 'combinator child', 'comment start', 'declaration set start', 'new selector',     
 'pseudo class', 'selector', 'selector class', 'selector id', 'selector universal', or 'whitespace'. 
 • Did you forget a semicolon at the end of a line?  

Is this something you'd like to support? It would be fun on my end to see how far I might be able to get tuilwind to really work like tailwind.

[willmcgugan]

TBH I didn't even know the CSS has this escaping behaviour. I think we should support it in general, which would enable this use-case amongst others.

[koaning]

TBH I didn't even know the CSS has this escaping behavior.

Yeah, it's definitely something I only learned because of the tuilwindcss project 😅 . Might be good to double-check the spec on it, though. Now that I think of it; it's merely something that I've spotted while hacking around and checking the tailwind files. It could be that CSS has some specific rules.

[UmBsublime]

If I understand the spec correctly, escaping with \ appears to be documented here for CSS2 https://www.w3.org/TR/CSS21/syndata.html#characters

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as B\&W\? or B\26 W\3F.

And the CSS3 spec seems to point to that same section: https://www.w3.org/TR/selectors-3/#selector-syntax

Characters in Selectors can be escaped with a backslash according to the same escaping rules as CSS. [CSS21].

[willmcgugan]

Going to close this one for now. It's not a bad idea, and we may end up implementing it, but it seems niche for now. Will reconsider if there is a demand.

[github-actions[bot]]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.