Re: [csswg-drafts] CSS Regex Selector (#1010)

following on from @chriskirknielsen's idea of limiting CSS-RegEx to attr selectors

im currently trying to make an atomic CSS framework (mainly for personal use) that would have something like `prefix-border="x-1-solid-red y-2-dotted-blue"` to apply different styles to the inline and block borders.
This is currently **impossible** in CSS without shipping a painfully large stylesheet to the end user.
The selectors I've been scratching my head over all weekend are;
```css
[border*="y-"][border*="blue"] {...}
[border*="x-"][border*="red"] {...}
```
(I have others for n/s/e/w/a => north/south/east/west/all => block-start/block-end/inline-start/inline-end/all)
No matter what I do, what order I put them in, where I use `!important` (which I dont want to do), it simply **does not work**.

Now extrapolate that to 7 edge selections, 5 border thicknesses, every border style, and however many colors I pass into my config, and *dozens of other CSS properties*...
It gets very messy to use these kind of selectors; `[border="n-1-solid-red"]`, `[border="n-2-solid-red"]`, `[border="n-3-solid-red"]`, etc.

RegEx would solve my issue gracefully. below im using `?=` as I really like the syntax and it's a common ligature, and the same RegEx syntax as JS because why make frontend devs learn another RegEx syntax;
```css
[border?=/\s?y-[^\s]+blue/] {...}
[border?=/\s?x-[^\s]+red/] {...}
```

The selectors at the top of this post are a wonderful thing, they say "elements that have this *and* this", but we have no way to say "elements that have something *containing* this and this", no way to differentiate `border="x-red y-blue"` from `border="x-blue y-red"`, or both blue or both red.
The use of RegEx handles that for us, `[^\s]` "not whitespace". and RegEx does significantly more too. 
As far as I've been able to find, XML and CSS are the only languages without RegEx. XML understandably, in a phrase, XML is for saying "here's a thing".

I understand CSS is a stylesheet, but looking at the spec and at the way we develop websites these days, we're heading more and more towards smarter CSS, if FORTRAN can have RegEx, why not CSS? 

-- 
GitHub Notification of comment by willster277
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1010#issuecomment-903782168 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 23 August 2021 13:43:48 UTC