Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v3: Allow hyphen character in regex pattern to use support queries as is #13605

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+72 −34
Open

v3: Allow hyphen character in regex pattern to use support queries as is #13605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/corePlugins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,8 +409,8 @@ export let variantPlugins = {
matchVariant(
'supports',
(value = '') => {
let check = normalize(value)
let isRaw = /^\w*\s*\(/.test(check)
let check = value.startsWith('--') ? value : normalize(value)
let isRaw = /^[\w-]*\s*\(/.test(check)
Comment on lines -412 to +413
Copy link
Contributor Author

@brandonmcconnell brandonmcconnell Apr 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 changes made

  • added a value.startsWith('--') pre-normalization check that operates in line with Remove automatic var(…) injection #13537 to prevent automatic var(…) injection when checking support for custom properties

    example: supports-[--test]:flex with vs. without with the value.startsWith('--') to prevent normalizing:

    • ❌ @supports var(--test) (before, without check)
    • ✅ @supports (--test: var(--tw)) (after, with check)

  • added hyphen-support for regex pattern matching raw supports queries


// Chrome has a bug where `(condtion1)or(condition2)` is not valid
// But `(condition1) or (condition2)` is supported.
Expand Down
102 changes: 70 additions & 32 deletions tests/arbitrary-variants.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -717,18 +717,28 @@ it('should support supports', () => {
<div class="supports-[display:grid]:grid"></div>
<!-- Value with spaces, needs to be normalized -->
<div class="supports-[transform-origin:5%_5%]:underline"></div>
<!-- Selectors (raw) -->
<div class="supports-[selector(A_>_B)]:underline"></div>
<!-- 'not' check (raw) -->
<div class="supports-[not(foo:bar)]:underline"></div>
<!-- 'or' check (raw) -->
<div class="supports-[(foo:bar)or(bar:baz)]:underline"></div>
<!-- 'and' check (raw) -->
<div class="supports-[(foo:bar)and(bar:baz)]:underline"></div>
<!-- 'and' check with spaces (raw) -->
<div class="supports-[(foo:bar)_and_(bar:baz)]:grid"></div>
<!-- 'and' + 'or' check (raw) -->
<div class="supports-[(foo:bar)_and_(bar:baz)_or(baz:qux)]:grid"></div>
<!-- No value give for the property, defaulting to prop: var(--tw) -->
<div class="supports-[container-type]:underline"></div>
<!-- Named supports usage -->
<div class="supports-grid:underline"></div>
<!-- Custom properties -->
<div class="supports-[--test]:flex"></div>
<!-- Function syntax: selector (raw) -->
<div class="supports-[selector(A_>_B)]:underline"></div>
<!-- Function syntax: font-format (raw) -->
<div class="supports-[font-format(opentype)]:grid"></div>
<!-- Function syntax: font-tech (raw) -->
<div class="supports-[font-tech(color-COLRv1)]:flex"></div>
</div>
`,
},
Expand All @@ -741,45 +751,73 @@ it('should support supports', () => {
`

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@supports (display: grid) {
.supports-grid\:underline {
text-decoration-line: underline;
}
.supports-\[display\:grid\]\:grid {
display: grid;
}
expect(result.css).toMatchInlineSnapshot(`
"@supports (display: grid) {
.supports-grid\\:underline {
text-decoration-line: underline
}
}
@supports (foo: bar) and (bar: baz) {
.supports-\[\(foo\:bar\)and\(bar\:baz\)\]\:underline {
text-decoration-line: underline;
}
@supports (--test: var(--tw)) {
.supports-\\[--test\\]\\:flex {
display: flex
}
}
@supports (foo: bar) or (bar: baz) {
.supports-\[\(foo\:bar\)or\(bar\:baz\)\]\:underline {
text-decoration-line: underline;
}
@supports font-tech(color-COLRv1) {
.supports-\\[font-tech\\(color-COLRv1\\)\\]\\:flex {
display: flex
}
}
@supports (foo:bar) and (bar:baz) {
.supports-\\[\\(foo\\:bar\\)_and_\\(bar\\:baz\\)\\]\\:grid {
display: grid
}
}
@supports (foo:bar) and (bar:baz) or (baz:qux) {
.supports-\\[\\(foo\\:bar\\)_and_\\(bar\\:baz\\)_or\\(baz\\:qux\\)\\]\\:grid {
display: grid
}
}
@supports (display:grid) {
.supports-\\[display\\:grid\\]\\:grid {
display: grid
}
}
@supports font-format(opentype) {
.supports-\\[font-format\\(opentype\\)\\]\\:grid {
display: grid
}
}
@supports (foo:bar) and (bar:baz) {
.supports-\\[\\(foo\\:bar\\)and\\(bar\\:baz\\)\\]\\:underline {
text-decoration-line: underline
}
}
@supports (foo:bar) or (bar:baz) {
.supports-\\[\\(foo\\:bar\\)or\\(bar\\:baz\\)\\]\\:underline {
text-decoration-line: underline
}
}
@supports (container-type: var(--tw)) {
.supports-\[container-type\]\:underline {
text-decoration-line: underline;
}
.supports-\\[container-type\\]\\:underline {
text-decoration-line: underline
}
}
@supports not (foo: bar) {
.supports-\[not\(foo\:bar\)\]\:underline {
text-decoration-line: underline;
}
@supports not (foo:bar) {
.supports-\\[not\\(foo\\:bar\\)\\]\\:underline {
text-decoration-line: underline
}
}
@supports selector(A > B) {
.supports-\[selector\(A_\>_B\)\]\:underline {
text-decoration-line: underline;
}
.supports-\\[selector\\(A_\\>_B\\)\\]\\:underline {
text-decoration-line: underline
}
}
@supports (transform-origin: 5% 5%) {
.supports-\[transform-origin\:5\%_5\%\]\:underline {
text-decoration-line: underline;
}
@supports (transform-origin:5% 5%) {
.supports-\\[transform-origin\\:5\\%_5\\%\\]\\:underline {
text-decoration-line: underline
}
}
"
`)
})
})
Expand Down
Loading