Skip to content

Conversation

@brandonmcconnell
Copy link
Contributor

It looks like matching for the hyphen character in the existing regex to use support queries as-is resolves #13594.

This might be a good long-term solution anyway, as it covers any future function syntaxes added to support queries, as well as supporting CSS var definition rules:

Tests:

  • 'supports-gap:grid' -> @supports (gap: var(--tw))
  • 'supports-[display:grid]:flex' -> @supports (display: grid)
  • 'supports-[selector(A_>_B)]:flex' -> @supports selector(A > B)
  • 'supports-[font-format(opentype)]:grid' -> @supports font-format(opentype)
  • 'supports-[content:"("]:grid' -> @supports (content: "(")
  • 'supports-[(display:grid)_and_font-format(opentype)]:grid' -> @supports (display: grid) and font-format(opentype)
  • 'supports-[font-tech(color-COLRv1)]:flex' -> @supports font-tech(color-COLRv1)
  • 'supports-[--test]:flex' -> @supports (--test: var(--tw))

The one failing rule, recommended by @adamwathan in #13594, appears to have not worked before either and likely requires a slight change to the parser to account for consuming chars in quoted strings in arbitrary values as-is, including special chars.

Testing supports-[content:"("] against supports-[content:"test"] confirmed the parenthesis as the problematic character, as expected, so that should be a relatively simple fix.

As that effort does not appear directly related to issue #13594, I prefer to handle that one in a separate PR, and I do intend to take my best shot at it so that I can get a bit less rusty at rust 😅

@adamwathan
Copy link
Member

Thanks, I think this is a nice little fix 👍

@brandonmcconnell
Copy link
Contributor Author

brandonmcconnell commented Apr 29, 2024

I submitted a new issue to facilitate a more concentrated effort and investigation into that remaining issue (re supports-[content:"("]:grid): #13607

@brandonmcconnell brandonmcconnell changed the title Allow hyphen character in regex pattern to use support queries as is v4: Allow hyphen character in regex pattern to use support queries as is Apr 29, 2024
RobinMalfait added a commit that referenced this pull request Jan 28, 2025
… is (#13605)

This is the v3 equivalent of PR #13596

Matching for the hyphen character in the existing regex to use support
queries as-is

Resolves #13594

Tests (w/ updated):
- ✅ `supports-[display:grid]:grid`
- ✅ `supports-[transform-origin:5%_5%]:underline`
- ✅ `supports-[not(foo:bar)]:underline`
- ✅ `supports-[(foo:bar)or(bar:baz)]:underline`
- ✅ `supports-[(foo:bar)and(bar:baz)]:underline`
- ✅ `supports-[(foo:bar)_and_(bar:baz)]:grid`
- ✅ `supports-[(foo:bar)_and_(bar:baz)_or(baz:qux)]:grid`
- ✅ `supports-[container-type]:underline`
- ✅ `supports-grid:underline`
- ✅ `supports-[--test]:flex`
- ✅ `supports-[selector(A_>_B)]:underline`
- ✅ `supports-[font-format(opentype)]:grid`
- ✅ `supports-[font-tech(color-COLRv1)]:flex`

---------

Co-authored-by: Robin Malfait <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

supports variant compiles function syntax incorrectly

2 participants