Skip to content

Disallow empty arbitrary values #15055

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
RobinMalfait merged 13 commits into from
Nov 21, 2024
Merged

Disallow empty arbitrary values #15055

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
6d099df
add failing test
RobinMalfait Nov 20, 2024
cdad88b
ensure empty arbitrary values are invalid
RobinMalfait Nov 20, 2024
78b5ce9
move parsing of the modifier up
RobinMalfait Nov 20, 2024
b9987a5
add test index
RobinMalfait Nov 20, 2024
2d91f1c
ensure migrating invalid candidates with empty `[]` work
RobinMalfait Nov 21, 2024
f55bb27
prepare and cleanup raw candidates
RobinMalfait Nov 21, 2024
461352c
add more test cases
RobinMalfait Nov 21, 2024
2e8db9a
update changelog
RobinMalfait Nov 21, 2024
598ec37
fix comment
RobinMalfait Nov 21, 2024
865fa76
add `handleEmptyArbitraryValues` codemod
RobinMalfait Nov 21, 2024
0c85a04
allow `group-[]` in the Oxide scanner
RobinMalfait Nov 21, 2024
7fe73a4
add integration test
RobinMalfait Nov 21, 2024
065fea4
update comments to look less weird while stil indenting
RobinMalfait Nov 21, 2024
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
Next Next commit
add failing test
  • Loading branch information
@RobinMalfait
RobinMalfait committed Nov 21, 2024
commit 6d099df2135d09a615bc934df0804b440dc93846
127 changes: 127 additions & 0 deletions packages/tailwindcss/src/candidate.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1416,3 +1416,130 @@ it('should parse candidates with a prefix', () => {
]
`)
})

it.each([
// Empty arbitrary value
'bg-[]',
'bg-()',
// Tricking the parser with a space is not allowed
'bg-[_]',
'bg-(_)',

// Empty arbitrary value, with typehint
'bg-[color:]',
'bg-(color:)',
// Tricking the parser with a space is not allowed
'bg-[color:_]',
'bg-(color:_)',

// Empty arbitrary modifier
'bg-red-500/[]',
'bg-red-500/()',
// Tricking the parser with a space is not allowed
'bg-red-500/[_]',
'bg-red-500/(_)',

// Empty arbitrary modifier for arbitrary properties
'[color:red]/[]',
'[color:red]/()',
// Tricking the parser with a space is not allowed
'[color:red]/[_]',
'[color:red]/(_)',

// Empty arbitrary value and modifier
'bg-[]/[]',
'bg-()/[]',
'bg-[]/()',
'bg-()/()',
// Tricking the parser with a space is not allowed
'bg-[_]/[]',
'bg-(_)/[]',
'bg-[_]/()',
'bg-(_)/()',
'bg-[]/[_]',
'bg-()/[_]',
'bg-[]/(_)',
'bg-()/(_)',
'bg-[_]/[_]',
'bg-(_)/[_]',
'bg-[_]/(_)',
'bg-(_)/(_)',

// Functional components
Copy link
Contributor

@philipp-spiess philipp-spiess Nov 21, 2024

Choose a reason for hiding this comment

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

Suggested change
// Functional components
// Functional utilities

Not sure I understand this comment?

Copy link
Member Author

@RobinMalfait RobinMalfait Nov 21, 2024

Choose a reason for hiding this comment

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

React brain... this should say Functional variants and the other one Compound variants because I wanted to verify that we handled functional variants and compound variants correctly (since they are different types and handled separately).

// Empty arbitrary value in variant
'data-[]:flex',
'data-():flex',
// Tricking the parser with a space is not allowed
'data-[_]:flex',
'data-(_):flex',

// Empty arbitrary modifier in variant
'data-foo/[]:flex',
'data-foo/():flex',
// Tricking the parser with a space is not allowed
'data-foo/[_]:flex',
'data-foo/(_):flex',

// Empty arbitrary value and modifier in variant
'data-[]/[]:flex',
'data-()/[]:flex',
'data-[]/():flex',
'data-()/():flex',
// Tricking the parser with a space is not allowed
'data-[_]/[]:flex',
'data-(_)/[]:flex',
'data-[_]/():flex',
'data-(_)/():flex',
'data-[]/[_]:flex',
'data-()/[_]:flex',
'data-[]/(_):flex',
'data-()/(_):flex',
'data-[_]/[_]:flex',
'data-(_)/[_]:flex',
'data-[_]/(_):flex',
'data-(_)/(_):flex',

// Compound components
// Empty arbitrary value in variant
'group-data-[]:flex',
'group-data-():flex',
// Tricking the parser with a space is not allowed
'group-data-[_]:flex',
'group-data-(_):flex',

// Empty arbitrary modifier in variant
'group-data-foo/[]:flex',
'group-data-foo/():flex',
// Tricking the parser with a space is not allowed
'group-data-foo/[_]:flex',
'group-data-foo/(_):flex',

// Empty arbitrary value and modifier in variant
'group-data-[]/[]:flex',
'group-data-()/[]:flex',
'group-data-[]/():flex',
'group-data-()/():flex',
// Tricking the parser with a space is not allowed
'group-data-[_]/[]:flex',
'group-data-(_)/[]:flex',
'group-data-[_]/():flex',
'group-data-(_)/():flex',
'group-data-[]/[_]:flex',
'group-data-()/[_]:flex',
'group-data-[]/(_):flex',
'group-data-()/(_):flex',
'group-data-[_]/[_]:flex',
'group-data-(_)/[_]:flex',
'group-data-[_]/(_):flex',
'group-data-(_)/(_):flex',
])('should not parse invalid empty arbitrary values: %s', (rawCandidate) => {
let utilities = new Utilities()
utilities.static('flex', () => [])
utilities.functional('bg', () => [])

let variants = new Variants()
variants.functional('data', () => {})
variants.compound('group', Compounds.StyleRules, () => {})

expect(run(rawCandidate, { utilities, variants })).toEqual([])
})
5 changes: 3 additions & 2 deletions packages/tailwindcss/src/variants.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -517,7 +517,7 @@ test('group-[...]', async () => {
css`
@tailwind utilities;
`,
['group-[@media_foo]:flex', 'group-[>img]:flex'],
['group-[]:flex', 'group-hover/[]:flex', 'group-[@media_foo]:flex', 'group-[>img]:flex'],
),
).toEqual('')
})
Expand Down Expand Up @@ -609,7 +609,7 @@ test('peer-[...]', async () => {
css`
@tailwind utilities;
`,
['peer-[@media_foo]:flex', 'peer-[>img]:flex'],
['peer-[]:flex', 'peer-hover/[]:flex', 'peer-[@media_foo]:flex', 'peer-[>img]:flex'],
),
).toEqual('')
})
Expand Down Expand Up @@ -1853,6 +1853,7 @@ test('data', async () => {
`)
expect(
await run([
'data-[]:flex',
'data-[foo_^_=_"bar"]:flex', // Can't have spaces between `^` and `=`
'data-disabled/foo:flex',
'data-[potato=salad]/foo:flex',
Expand Down