Skip to content

Add functional utility syntax #15455

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.

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 25 commits into from
Jan 8, 2025
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
4b96809
add tests
RobinMalfait Dec 19, 2024
8336da8
use different character, this is now allowed
RobinMalfait Dec 19, 2024
1d9c474
add `ratio` and `integer` data types
RobinMalfait Dec 19, 2024
1013e91
implement functional utilities via CSS, e.g.: `@utility tab-*`
RobinMalfait Dec 19, 2024
8d5a473
update tests
RobinMalfait Dec 19, 2024
f4e7c97
limit `value({type})` to `number`, `integer`, `ratio` and `percentage`
RobinMalfait Dec 19, 2024
053b937
update changelog
RobinMalfait Dec 20, 2024
70fe130
adjust comment with an example
RobinMalfait Dec 20, 2024
451d894
add validations
RobinMalfait Dec 20, 2024
a73e68d
use `--value(…)` and `--modifier(…)` syntax
RobinMalfait Jan 7, 2025
f824ee0
move `@utility` registration to `./utilities.ts`
RobinMalfait Jan 7, 2025
9ed8511
move validation up
RobinMalfait Jan 7, 2025
2064b0f
improve tests
RobinMalfait Jan 7, 2025
faf712f
refactor
RobinMalfait Jan 7, 2025
3b658df
adjust comments
RobinMalfait Jan 7, 2025
4d2c36b
ensure `--value(--text-*--line-height)` resolves
RobinMalfait Jan 7, 2025
e6fd70b
allow escaped `\*` for `--value(--tab-size-\*)`
RobinMalfait Jan 7, 2025
e5fd079
reduce property access
RobinMalfait Jan 7, 2025
392dce9
adjust comments
RobinMalfait Jan 7, 2025
11197f3
pre-process the `--value(…)` and `--modifier(…)` AST
RobinMalfait Jan 8, 2025
04705ab
add suggestions for `@utility foo-*`
RobinMalfait Jan 8, 2025
a8d5c3d
utilities are registered as negative already
RobinMalfait Jan 8, 2025
268ad17
fix typo
RobinMalfait Jan 8, 2025
2a5a2a0
add a few more explicit tests
RobinMalfait Jan 8, 2025
62974fe
rename regex
RobinMalfait Jan 8, 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
Prev Previous commit
Next Next commit
add a few more explicit tests
  • Loading branch information
RobinMalfait committed Jan 8, 2025
commit 2a5a2a060880e0f267f18284b10fa16df6890779
80 changes: 80 additions & 0 deletions packages/tailwindcss/src/utilities.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17718,6 +17718,86 @@ describe('custom utilities', () => {
`)
})

test('resolving any arbitrary values (without space)', async () => {
let input = `
@utility tab-* {
tab-size: --value([*]);
}

@tailwind utilities;
`

expect(
await compileCss(input, [
'tab-[1]',
'tab-[76]',
'tab-[971]',
'tab-[var(--my-value)]',
'tab-(--my-value)',
]),
).toMatchInlineSnapshot(`
".tab-\\(--my-value\\) {
tab-size: var(--my-value);
}

.tab-\\[1\\] {
tab-size: 1;
}

.tab-\\[76\\] {
tab-size: 76;
}

.tab-\\[971\\] {
tab-size: 971;
}

.tab-\\[var\\(--my-value\\)\\] {
tab-size: var(--my-value);
}"
`)
})

test('resolving any arbitrary values (with escaped `*`)', async () => {
let input = css`
@utility tab-* {
tab-size: --value([\*]);
}

@tailwind utilities;
`

expect(
await compileCss(input, [
'tab-[1]',
'tab-[76]',
'tab-[971]',
'tab-[var(--my-value)]',
'tab-(--my-value)',
]),
).toMatchInlineSnapshot(`
".tab-\\(--my-value\\) {
tab-size: var(--my-value);
}

.tab-\\[1\\] {
tab-size: 1;
}

.tab-\\[76\\] {
tab-size: 76;
}

.tab-\\[971\\] {
tab-size: 971;
}

.tab-\\[var\\(--my-value\\)\\] {
tab-size: var(--my-value);
}"
`)
})

test('resolving theme, bare and arbitrary values all at once', async () => {
let input = css`
@theme reference {
Expand Down