ca7b10e7d3
Closes #16945 This PR changes the `--theme(…)` function now return CSS `var(…)` definitions unless used in places where `var(…)` is not valid CSS (e.g. in `@media (width >= theme(--breakpoint-md))`): ```css /* input */ @theme { --color-red: red; } .red { color: --theme(--color-red); } /* output */ :root, :host { --color-red: red; } .red { color: var(--color-red); } ``` Furthermore, this adds an `--theme(… inline)` option to the `--theme(…)` function to force the resolution to be inline, e.g.: ```css /* input */ @theme { --color-red: red; } .red { color: --theme(--color-red inline); } /* output */ .red { color: red; } ``` This PR also changes preflight and the default theme to use this new `--theme(…)` function to ensure variables are prefixed correctly. ## Test plan - Added unit tests and a test that pulls in the whole preflight under a prefix theme. |
||
|---|---|---|
| .. | ||
| codemods | ||
| commands/help | ||
| template | ||
| utils | ||
| index.test.ts | ||
| index.ts | ||
| migrate-js-config.ts | ||
| migrate-postcss.ts | ||
| migrate-prettier.ts | ||
| migrate.ts | ||
| stylesheet.ts | ||