No description
e566a926e7
This PR fixes an issue where the `--default(…)` function that can be
used as part of `@utility` definitions goes through the same
pre-processing treatment as `--value(…)` and `--modifier(…)`.
Instead the `--default(…)` value should be emitted as-is.
The pre-processing treatment that's in place today is just to normalize
the value(s) that could be formatted in a strange way if you are dealing
with older Prettier / Biome versions.
Some of the transformations we do ahead of time:
- `--value(--spacing)` -> `--value(--spacing-*)`
- `--value(--spacing- *)` -> `--value(--spacing-*)`
- `--value(--text- * --line-height)` -> `--value(--text-*--line-height)`
- `--value(--text --line-height)` -> `--value(--text-*--line-height)`
- `--value(--text-\\* --line-height)` ->
`--value(--text-*--line-height)`
- `--value([ *])` -> `--value([*])`
One of these steps is getting rid of the spaces, that means that if your
`--default(…)` uses spaces, then we will get rid of it.
```css
@theme inline {
--text-box-trim-start: trim-start;
--text-box-trim-end: trim-end;
--text-box-trim-both: trim-both;
--text-box-edge-cap: cap alphabetic;
--text-box-edge-cap-text: cap text;
--text-box-edge-ex: ex alphabetic;
--text-box-edge-ex-text: ex text;
--text-box-edge-text: text alphabetic;
--text-box-edge-text-text: text text;
}
@utility trim-* {
text-box: --value('normal', 'inherit', 'initial', 'revert', 'revert-layer', 'unset');
text-box: --value(--text-box-trim-*) --modifier(--text-box-edge-*, --default(box alphabetic));
}
```
When you try to use this:
```html
<div className="trim-both" />
```
Then we get the following CSS out:
```css
.trim-both {
text-box: trim-both boxalphabetic;
}
```
This PR fixes that, and now the proper CSS will be emitted:
```css
.trim-both {
text-box: trim-both box alphabetic;
}
```
Fixes: #20391
## Test plan
1. Added an regression test to make sure that `--default(…)` values are
emitted as-is.
|
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.config.mts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or feature ideas:
Discuss Tailwind CSS on GitHub
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.