No description
Find a file
Philipp Spiess 60e61950b9
Ensure escaped theme variables are handled correctly (#16064)
This PR ensures that escaped theme variables are properly handled. We do
this by moving the `escape`/`unescape` responsibility back into the main
tailwindcss entrypoint that reads and writes from the CSS and making
sure that _all internal state of the `Theme` class are unescaped
classes.

However, due to us accidentally shipping the part where a dot in the
theme variable would translate to an underscore in CSS already, this
logic is going to stay as-is for now.

Here's an example test that visualizes the new changes:

```ts
expect(
  await compileCss(
    css`
      @theme {
        --spacing-*: initial;
        --spacing-1\.5: 2.5rem;
        --spacing-foo\/bar: 3rem;
      }
      @tailwind utilities;
    `,
    ['m-1.5', 'm-foo/bar'],
  ),
).toMatchInlineSnapshot(`
  ":root, :host {
    --spacing-1\.5: 2.5rem;
    --spacing-foo\\/bar: 3rem;
  }

  .m-1\\.5 {
    margin: var(--spacing-1\.5);
  }

  .m-foo\\/bar {
    margin: var(--spacing-foo\\/bar);
  }"
`)
```

## Test plan

- Added a unit test
- Ensure this works end-to-end using the Vite playground:
   
<img width="1016" alt="Screenshot 2025-01-30 at 14 51 05"
src="https://github.com/user-attachments/assets/463c6fd5-793f-4ecc-86d2-5ad40bbb3e74"
/>
2025-01-31 15:20:18 +01:00
.github Rename next to main (#15980) 2025-01-28 11:31:54 -05:00
crates Prepare v4.0.1 release (#16018) 2025-01-29 14:14:35 -05:00
integrations Do not emit @keyframes in @theme reference (#16120) 2025-01-31 15:13:17 +01:00
packages Ensure escaped theme variables are handled correctly (#16064) 2025-01-31 15:20:18 +01:00
patches Upgrade lightningcss to 1.29.1 (#15593) 2025-01-10 14:09:13 +01:00
playgrounds Update @types/react-dom 19.0.2 → 19.0.3 (patch) (#15669) 2025-01-28 16:55:56 +01:00
scripts Prepare v4.0.1 release (#16018) 2025-01-29 14:14:35 -05:00
.gitignore Add test.debug to integration tests (#14133) 2024-08-08 12:02:19 +02:00
.npmrc introduce v4 codebase 2024-03-05 14:29:15 +01:00
.prettierignore Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
Cargo.lock Auto source detection improvements (#14820) 2024-10-29 20:33:34 +00:00
Cargo.toml Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
CHANGELOG.md Ensure escaped theme variables are handled correctly (#16064) 2025-01-31 15:20:18 +01:00
LICENSE Add README, LICENSE, and CONTRIBUTING (#13088) 2024-03-05 14:45:39 -05:00
package.json Update turbo 2.3.3 → 2.3.4 (patch) (#16084) 2025-01-31 11:01:13 +00:00
pnpm-lock.yaml Update turbo 2.3.3 → 2.3.4 (patch) (#16084) 2025-01-31 11:01:13 +00:00
pnpm-workspace.yaml Upgrade lightningcss to 1.29.1 (#15593) 2025-01-10 14:09:13 +01:00
README.md Copy README file to every package (#13096) 2024-03-06 08:49:31 -05:00
rust-toolchain.toml Bring back rust-toolchain.toml (#14585) 2024-10-03 14:37:24 +00:00
turbo.json Auto source detection improvements (#14820) 2024-10-29 20:33:34 +00:00
vitest.workspace.ts introduce v4 codebase 2024-03-05 14:29:15 +01:00

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


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.