W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2021

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

From: Will Johnson via GitHub <sysbot+gh@w3.org>
Date: Mon, 23 Aug 2021 13:43:46 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-903782168-1629726225-sysbot+gh@w3.org>
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;
[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;
[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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:42 UTC