No description
8dc343d9f6
This PR adds a codemod to convert `theme(…)` calls to `var(…)` calls. If we can't safely do this, then we try to convert the `theme(…)` syntax (dot notation) to the modern `theme(…)` syntax (with CSS variable-like syntax). ### Let's look at some examples: **Simple example:** Input: ```html <div class="bg-[theme(colors.red.500)]"></div> ``` Output: ```html <div class="bg-[var(--color-red-500)]"></div> ``` --- **With fallback:** Input: ```html <div class="bg-[theme(colors.red.500,theme(colors.blue.500))]"></div> ``` Output: ```html <div class="bg-[var(--color-red-500,var(--color-blue-500))]"></div> ``` --- **With modifiers:** Input: ```html <div class="bg-[theme(colors.red.500/75%)]"></div> ``` Output: ```html <div class="bg-[var(--color-red-500)]/75"></div> ``` We can special case this, because if you are using that modifier syntax we _assume_ it's being used in a `theme(…)` call referencing a color. This means that we can also convert it to a modifier on the actual candidate. --- **With modifier, if a modifier is already present:** Input: ```html <div class="bg-[theme(colors.red.500/75%)]/50"></div> ``` Output: ```html <div class="bg-[theme(--color-red-500/75%)]/50"></div> ``` In this case we can't use the `var(…)` syntax because that requires us to move the opacity modifier to the candidate itself. In this case we could use math to figure out the expected modifier, but that might be too confusing. Instead, we convert to the modern `theme(…)` syntax. --- **Multiple `theme(…)` calls with modifiers:** Input: ```html <div class="bg-[theme(colors.red.500/75%,theme(colors.blue.500/50%))]"></div> ``` Output: ```html <div class="bg-[theme(--color-red-500/75%,theme(--color-blue-500/50%))]"></div> ``` In this case we can't convert to `var(…)` syntax because then we lose the opacity modifier. We also can't move the opacity modifier to the candidate itself e.g.: `/50` because we have 2 different variables to worry about. In this situation we convert to the modern `theme(…)` syntax itself. --- **Inside variants:** Input: ```html <div class="max-[theme(spacing.20)]:flex"></div> ``` Output: ```html <div class="max-[theme(--spacing-20)]:flex"></div> ``` Unfortunately we can't convert to `var(…)` syntax reliably because in some cases (like the one above) the value will be used inside of an `@media (…)` query and CSS doesn't support that at the time of writing this PR. So to be safe, we will not try to convert `theme(…)` to `var(…)` in variants, but we will only upgrade the `theme(…)` call itself to modern syntax. |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.workspace.ts | ||
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 any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.