Skip to content
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

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Oct 15, 2024

Imagine the following setup:

/* src/input.css */
@import "tailwindcss";
@config "../tailwind.config.ts";
@theme {
  --color-red-500: #ef4444;
}
/* tailwind.config.ts */
export default {
  theme: {
    colors: {
      red: {
        600: '#dc2626'
      } 
    },
    extend: {
      colors: {
        400: '#f87171'
      }
    }
  }
}

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 on default 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:

@import "tailwindcss";
@theme {
  --color-*: initial;
  --color-red-400: #f87171;
  --color-red-600: #dc2626;
}
@theme {
  --color-red-500: #ef4444;
}

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:

@import "tailwindcss";
@theme {
  --keyframes-*: initial;
  @keyframes spin {
    to {
      transform: rotate(361deg);
    }
  }
}

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.

@@ -89,9 +93,15 @@ export class Theme {
return `--${this.prefix}-${key.slice(2)}`
}

#clearNamespace(namespace: string) {
clearNamespace(namespace: string, clearOptions: ThemeOptions) {
Copy link
Member Author

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.

@philipp-spiess philipp-spiess force-pushed the fix/reset-default-theme-values-for-non-extends-js-theme-config branch from 34847f3 to 3456edd Compare October 16, 2024 13:54
@philipp-spiess philipp-spiess merged commit bf17991 into next Oct 16, 2024
1 check passed
@philipp-spiess philipp-spiess deleted the fix/reset-default-theme-values-for-non-extends-js-theme-config branch October 16, 2024 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants