Skip to content

Commit d5f1b79

Browse files
committed
ensure existing spaces in attribute selector are valid
If you inject existing spaces in the attribute selector, then invalid CSS was generated. Lightning CSS itself throws it out, but if you are in an environment where Lightning CSS doesn't run then invalid CSS exists in your final CSS file. This fixes that by ensuring that the spaces around the `=` don't cause any issues.
1 parent 4a4be27 commit d5f1b79

File tree

2 files changed

+14
-2
lines changed

2 files changed

+14
-2
lines changed

packages/tailwindcss/src/variants.test.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1985,6 +1985,7 @@ test('aria', async () => {
19851985
'aria-checked:flex',
19861986
'aria-[invalid=spelling]:flex',
19871987
'aria-[valuenow=1]:flex',
1988+
'aria-[valuenow_=_"1"]:flex',
19881989

19891990
'group-aria-[modal]:flex',
19901991
'group-aria-checked:flex',
@@ -2059,6 +2060,10 @@ test('aria', async () => {
20592060
20602061
.aria-\\[valuenow\\=1\\]\\:flex[aria-valuenow="1"] {
20612062
display: flex;
2063+
}
2064+
2065+
.aria-\\[valuenow_\\=_\\"1\\"\\]\\:flex[aria-valuenow="1"] {
2066+
display: flex;
20622067
}"
20632068
`)
20642069
expect(await run(['aria-checked/foo:flex', 'aria-[invalid=spelling]/foo:flex'])).toEqual('')
@@ -2069,6 +2074,7 @@ test('data', async () => {
20692074
await run([
20702075
'data-disabled:flex',
20712076
'data-[potato=salad]:flex',
2077+
'data-[potato_=_"salad"]:flex',
20722078
'data-[foo=1]:flex',
20732079
'data-[foo=bar_baz]:flex',
20742080
"data-[foo$='bar'_i]:flex",
@@ -2155,6 +2161,10 @@ test('data', async () => {
21552161
display: flex;
21562162
}
21572163
2164+
.data-\\[potato_\\=_\\"salad\\"\\]\\:flex[data-potato="salad"] {
2165+
display: flex;
2166+
}
2167+
21582168
.data-\\[foo\\=1\\]\\:flex[data-foo="1"] {
21592169
display: flex;
21602170
}

packages/tailwindcss/src/variants.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -901,13 +901,15 @@ export function createVariants(theme: Theme): Variants {
901901
function quoteAttributeValue(value: string) {
902902
if (value.includes('=')) {
903903
value = value.replace(/(=.*)/g, (_fullMatch, match) => {
904+
let value = match.slice(1).trim()
905+
904906
// If the value is already quoted, skip.
905-
if (match[1] === "'" || match[1] === '"') {
907+
if (value[0] === "'" || value[0] === '"') {
906908
return match
907909
}
908910

909911
// Handle regex flags on unescaped values
910-
if (match.length > 2) {
912+
if (match.length > 1) {
911913
let trailingCharacter = match[match.length - 1]
912914
if (
913915
match[match.length - 2] === ' ' &&

0 commit comments

Comments
 (0)