Revert: Only expose used CSS variables #16403
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @@ -0,0 +1 @@ | |||
| export const enableRemoveUnusedThemeVariables = false | |||
There was a problem hiding this comment.
We could set this conditionally such that local tests don't require any changes. But I think this is fine for now 👍
There was a problem hiding this comment.
Yeah I tried this like I had in the feature flag test PR but I couldn’t get the local build right. Wanted to be able to build a production release to be sure it works
RobinMalfait
approved these changes
Feb 10, 2025
|
🥲 I was so excited about that update… |
|
@The-Best-Codes Plan is to fix the issues very soon so we can re-land this soon. Just need to do this without breaking a lot of setups that rely on CSS modules or things like |
|
No need to apologize. 🙂 |
peterpeterparker
added a commit
to dfinity/oisy-wallet
that referenced
this pull request
Feb 18, 2025
# Motivation We detected reproducibility issue when building v0.24.0: https://github.com/dfinity/oisy-wallet/actions/runs/13393064153 ~~I'm unsure which of the two following Tailwind fix was the reason of the problem but, bumping Tailwind to latest version seems to resolve the problem.~~ ~~Tailwind v4.0.6 - Fix [#16403](tailwindlabs/tailwindcss#16403 ~~- Revert change to no longer include theme variables that aren't used in compiled CSS ~~ ~~Tailwind v4.0.7 - Fix [#16414](tailwindlabs/tailwindcss#16414 ~~- Fix sorting of numeric utility suggestions when they have different magnitudes~~ ~~I lean towards to former though. I could have try v4.0.6 but, v4.0.7 contains interesting fixes anyway.~~ It does not resolve the issue: https://github.com/dfinity/oisy-wallet/actions/runs/13395505962/job/37413394328 # Changes - Bump `@tailwindcss/postcss`, `@tailwindcss/vite` and `tailwindcss`.
philipp-spiess
added a commit
that referenced
this pull request
Feb 21, 2025
This PR re-enables the changes necessary to remove unused theme variables and keyframes form your CSS. This change was initially landed as #16211 and then later reverted in #16403 because we found some unexpected interactions with using `@apply` and CSS variables in multi-root setups like CSS modules or Vue inline `<style>` blocks that were no longer seeing their required variables defined. This issue is fixed by now ensuring that theme variables that are defined within an `@reference "…"` boundary will still be emitted in the generated CSS when used (as this would otherwise not generate a valid stylesheet). So given the following input CSS: ```css @reference "tailwindcss"; .text-red { @apply text-red-500; } ``` We will now compile this to: ```css @layer theme { :root, :host { --text-red-500: oklch(0.637 0.237 25.331); } } .text-red { color: var(--text-red-500); } ``` This PR also improves the initial implementation to not mark theme variables as used if they are only used to define other theme variables. For example: ```css @theme { --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } .default-font-family { font-family: var(--default-font-family); } ``` This would be reduced to the following now as `--font-mono` is only used to define another variable and never used outside the theme block: ```css :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --default-font-family: var(--font-sans); } .default-font-family { font-family: var(--default-font-family); } ``` ## Test plan - See updated unit and integration tests - Validated it works end-to-end by using a SvelteKit example
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This reverts #16211
We found some unexpected interactions with using
@applyand CSS variables in multi-root setups like CSS modules or Vue inline<style>blocks that were broken due to that change. We plan to re-enable this soon and include a proper fix for those scenarios.Test plan