mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
a270e2c8f1
This PR is a continuation of #13537. Currently we reverted the merged changes so that we can get a new alpha version out without this change. --- This PR removes automatic `var(…)` injection for arbitrary properties, values and modifiers. There are a few properties that use "dashed-ident" values, this means that you can use `--my-thing` as-is without the `var(…)` around it. E.g.: ```css .foo { /* Notice that these don't have `var(…)` */ view-timeline-name: --timeline-name; anchor-name: --sidebar; } ``` This causes issues because we are now injecting a `var(…)` where it's not needed. One potential solution is to create a list of properties where dashed idents can be used. However, they can _also_ use CSS custom properties that point to another dashed ident. E.g.: ```css .foo { --target: --sidebar; anchor-name: var(--target); } ``` A workaround that some people used is adding a `_` in front of the variable: `mt-[_--my-thing]` this way we don't automatically inject the `var(…)` around it. This is a workaround and gross. While the idea of automatic var injection is neat, this causes more trouble than it's worth. Adding `var(…)` explicitly is better. A side effect of this is that we can simplify the internals for the `candidate` data structure because we don't need to track `dashedIdent` separately anymore. <!-- 👋 Hey, thanks for your interest in contributing to Tailwind! **Please ask first before starting work on any significant new features.** It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create an issue to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, or adding new component examples to the documentation. https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md -->