Reset default @theme values for non extend JS theme config#14672
Merged
philipp-spiess merged 9 commits intonextfrom Oct 16, 2024
Merged
Conversation
philipp-spiess
commented
Oct 15, 2024
| } | ||
|
|
||
| #clearNamespace(namespace: string) { | ||
| clearNamespace(namespace: string, clearOptions: ThemeOptions) { |
Contributor
Author
There was a problem hiding this comment.
Made this public so we can selectively only clean @theme default values... See the test case as to why I think this is necessary.
34847f3 to
3456edd
Compare
adamwathan
approved these changes
Oct 16, 2024
adamwathan
added a commit
that referenced
this pull request
Oct 17, 2024
With the changes in #14672, it now becomes trivial to actually resolve the config (while still retaining the reset behavior). This means that we can now convert JS configs that use _functions_, e.g.: ```ts import { type Config } from 'tailwindcss' export default { theme: { extend: { colors: ({ colors }) => ({ gray: colors.neutral, }), }, }, } satisfies Config ``` This becomes: ```css @import 'tailwindcss'; @theme { --color-gray-50: #fafafa; --color-gray-100: #f5f5f5; --color-gray-200: #e5e5e5; --color-gray-300: #d4d4d4; --color-gray-400: #a3a3a3; --color-gray-500: #737373; --color-gray-600: #525252; --color-gray-700: #404040; --color-gray-800: #262626; --color-gray-900: #171717; --color-gray-950: #0a0a0a; } ``` --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
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
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.
Imagine the following setup:
Since the theme object in the JS config contains
colorsin the non-extendsblock, you would expect this to not pull in all the default colors imported via@import "tailwindcss";. This, however, wasn't the case right now since all theme options were purely additive to the CSS.This PR makes it so that non-
extendtheme keys overwrite default CSS theme values. The emphasis is ondefaulthere since you still want to be able to overwrite your options via@theme {}in user space.This now generates the same CSS that our upgrade codemods would also generate as this would apply the new CSS right after the
@import "tailwindcss";rule resulting in:Keyframes
This PR also adds a new core API to unset keyframes the same way. We previously had no option of doing that but while working on the above codemods we noticed that keyframes should behave the same way:
To do this, the keyframes bookeeping was moved from the main Tailwind CSS v4 file into the
Themeclass.I’m not sure super of the API yet but we would need a way for the codemods to behave the same as out interop layer here. Option B is that we don't reset keyframes the same way we reset other theme variables.