-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Reset default @theme values for non extend JS theme config
#14672
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
philipp-spiess
merged 9 commits into
next
from
fix/reset-default-theme-values-for-non-extends-js-theme-config
Oct 16, 2024
Merged
Reset default @theme values for non extend JS theme config
#14672
philipp-spiess
merged 9 commits into
next
from
fix/reset-default-theme-values-for-non-extends-js-theme-config
Oct 16, 2024
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
philipp-spiess
commented
Oct 15, 2024
| } | ||
|
|
||
| #clearNamespace(namespace: string) { | ||
| clearNamespace(namespace: string, clearOptions: ThemeOptions) { |
Member
Author
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 <[email protected]> Co-authored-by: Robin Malfait <[email protected]>
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.