-
Notifications
You must be signed in to change notification settings - Fork 4.4k
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
Reset default
@theme values for non extend
JS theme config
#14672
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 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
@@ -89,9 +93,15 @@ export class Theme { | |||
return `--${this.prefix}-${key.slice(2)}` | |||
} | |||
|
|||
#clearNamespace(namespace: string) { | |||
clearNamespace(namespace: string, clearOptions: ThemeOptions) { |
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 <adam.wathan@gmail.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
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
colors
in the non-extends
block, 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-
extend
theme keys overwrite default CSS theme values. The emphasis is ondefault
here 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
Theme
class.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.