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

Resolve theme keys when migrating JS config to CSS #14675

Merged
merged 11 commits into from
Oct 17, 2024

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Oct 15, 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.:

import { type Config } from 'tailwindcss'

export default {
  theme: {
    extend: {
      colors: ({ colors }) => ({
        gray: colors.neutral,
      }),
    },
  },
} satisfies Config

This becomes:

@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;
}

@philipp-spiess philipp-spiess force-pushed the feat/resolve-theme-keys-for-codemods branch from d12009e to bd66cec Compare October 15, 2024 15:38
@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
Base automatically changed from fix/reset-default-theme-values-for-non-extends-js-theme-config to next October 16, 2024 14:06
@philipp-spiess philipp-spiess force-pushed the feat/resolve-theme-keys-for-codemods branch 2 times, most recently from 56e01bd to 6c482c7 Compare October 16, 2024 16:05
@philipp-spiess philipp-spiess force-pushed the feat/resolve-theme-keys-for-codemods branch from 6c482c7 to cb93881 Compare October 17, 2024 13:45
@philipp-spiess philipp-spiess requested a review from a team as a code owner October 17, 2024 13:45
Copy link
Contributor

@thecrypticace thecrypticace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good except for the test failures (color palette related). Fix those up and should be good to go.

Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved but some small changes

CHANGELOG.md Outdated Show resolved Hide resolved
@config '../tailwind.config.ts';

@theme {
--color-gray-50: oklch(0.985 0 none);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this PR didn't introduce it, but I wonder if the "legacy" colors (v3) should still use the v3 values (hex) instead of oklch(…) 🤔

packages/@tailwindcss-upgrade/src/migrate-js-config.ts Outdated Show resolved Hide resolved
adamwathan and others added 2 commits October 17, 2024 15:44
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
@adamwathan adamwathan merged commit 0971ead into next Oct 17, 2024
1 check passed
@adamwathan adamwathan deleted the feat/resolve-theme-keys-for-codemods branch October 17, 2024 20:36
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.

4 participants