Add support for custom properties #88
Conversation
| @@ -483,6 +483,10 @@ | |||
| 'include': '#comment-block' | |||
| } | |||
| { | |||
| 'match': '--([A-Za-z0-9_-]+)' | |||
There was a problem hiding this comment.
This needs a more complex pattern in order to avoid matching ------ as a variable, which I'm pretty sure is invalid. @esdoppio can probably give some tips regarding this.
There was a problem hiding this comment.
I improved it with --([A-Za-z][A-Za-z0-9_-]*), but I'm open to suggestions.
There was a problem hiding this comment.
"------" is indeed a really lousy name, but it's valid (test it yourself), so I think we should allow it (to be tokenized) and let people make their own decisions.
|
I noticed that the specs for |
If you could do both of these, that would be ✨ |
| @@ -483,7 +483,8 @@ | |||
| 'include': '#comment-block' | |||
| } | |||
| { | |||
| 'match': '--([A-Za-z0-9_-]+)' | |||
| 'match': '--([A-Za-z][A-Za-z0-9_-]*)' | |||
There was a problem hiding this comment.
The pattern is a bit too strict.
From https://www.w3.org/TR/css-variables/#custom-property:
it’s defined as any valid identifier that starts with two dashes
And a valid identifier shares the same syntax as an <ident-token>—(escaping set aside) it
- may contain only
- [a-zA-Z0-9_-]
- ISO 10646 characters U+00A0 and higher
- must not begin with [0-9]
- must not begin with '-' followed by [0-9]
- must be at least 2 characters long if begins with '-'
Since the identifier in this case always starts with --, the last three requirements are fulfilled, you only have to care about the first rule (in bold) here. So a simple
--[\\w-]+
suffices. Just in case, \w is not equivalent to [a-zA-Z0-9_] with the Unicode defined encodings like UTF-8. 😉
There was a problem hiding this comment.
Actually, even
--[\\w-]+
is too strict regarding the syntax, but since no one is really complaining about they want to use emoji or escaping in, like, class names, I think we're good.
There was a problem hiding this comment.
@esdoppio Thank you so much for your help
|
Okay so...
Anything else that I missed? 🤔 |
|
Thanks! |
This is an attempt to start improving the support for CSSNext: #51
It's also my first time with a language package so please tell me if I did something wrong.