Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

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

Merged
merged 2 commits into from
Jan 28, 2025
Merged

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
2 commits
Select commit Hold shift + click to select a range
9ea1ede
Allow hyphen character in regex pattern to use support queries as is
brandonmcconnell Apr 28, 2024
a01b9bd
update changelog
RobinMalfait Jan 28, 2025
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: 3 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

- Nothing yet!
### Fixed

- Improve support for raw `supports-[…]` queries in arbitrary values ([#13605](https://github.com/tailwindlabs/tailwindcss/pull/13605))

## [3.4.17] - 2024-12-17

Expand Down
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 `(condition1)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 @@ -767,18 +767,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 @@ -791,45 +801,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