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.

Sign up for GitHub

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

Upgrade: Handle darkMode value with block syntax #16507

Merged
merged 4 commits into from
Feb 14, 2025
Merged

Upgrade: Handle darkMode value with block syntax #16507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f4f9246
Upgrade: Handle `darkMode` value with block syntax
philipp-spiess Feb 13, 2025
7cbc669
Merge branch 'main' into fix/allow-curly-braces-in-js-theme-darkMode-…
philipp-spiess Feb 13, 2025
6176421
Upgrade: Handle `darkMode` value with block syntax
philipp-spiess Feb 13, 2025
7f5c46a
Properly handle arrays
philipp-spiess Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Ensure drop shadow utilities don't inherit unexpectedly ([#16471](https://github.com/tailwindlabs/tailwindcss/pull/16471))
- Export backwards compatible config and plugin types from `tailwindcss/plugin` ([#16505](https://github.com/tailwindlabs/tailwindcss/pull/16505))
- Upgrade: Report errors when updating dependencies ([#16504](https://github.com/tailwindlabs/tailwindcss/pull/16504))
- Upgrade: Ensure a `darkMode` JS config setting with block syntax converts to use `@slot` ([#16507](https://github.com/tailwindlabs/tailwindcss/pull/16507))

## [4.0.6] - 2025-02-10

Expand Down
24 changes: 24 additions & 0 deletions integrations/upgrade/js-config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,14 @@ test(
import customPlugin from './custom-plugin'

export default {
darkMode: [
'variant',
[
'@media not print { .dark & }',
'@media not eink { .dark & }',
'&:where(.dark, .dark *)',
],
],
plugins: [
typography,
customPlugin({
Expand Down Expand Up @@ -379,6 +387,22 @@ test(
is-arr-mixed: null, true, false, 1234567, 1.35, 'foo', 'bar', 'true';
}

@custom-variant dark {
@media not print {
.dark & {
@slot;
}
}
@media not eink {
.dark & {
@slot;
}
}
&:where(.dark, .dark *) {
@slot;
}
}

/*
The default border color has changed to \`currentColor\` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
Expand Down
27 changes: 25 additions & 2 deletions packages/@tailwindcss-upgrade/src/migrate-js-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,15 +196,38 @@ async function migrateTheme(
}

function migrateDarkMode(unresolvedConfig: Config & { darkMode: any }): string {
let variant: string = ''
let variant: string | string[] = ''
let addVariant = (_name: string, _variant: string) => (variant = _variant)
let config = () => unresolvedConfig.darkMode
darkModePlugin({ config, addVariant })

if (variant === '') {
return ''
}
return `\n@tw-bucket custom-variant {\n@custom-variant dark (${variant});\n}\n`

if (!Array.isArray(variant)) {
variant = [variant]
}

if (variant.length === 1 && !variant[0].includes('{')) {
return `\n@tw-bucket custom-variant {\n@custom-variant dark (${variant[0]});\n}\n`
}

let customVariant = ''
for (let variantName of variant) {
// Convert to the block syntax if a block is used
if (variantName.includes('{')) {
customVariant += variantName.replace('}', '{ @slot }}') + '\n'
} else {
customVariant += variantName + '{ @slot }\n'
}
Comment on lines +219 to +223
Copy link
Member

Choose a reason for hiding this comment

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

Not 100% if this is enough, can we add a few more test cases:

Nested media queries:

darkMode: ['variant', '@media not print { @media screen { .dark & } }'],

/* dark:flex */
@media not print {
  @media screen {
    .dark .dark\:flex {
      display: flex;
    }
  }
}

Play: https://play.tailwindcss.com/n3k65J6HJF?file=config

Copy link
Member

Choose a reason for hiding this comment

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

Here are few more fun ones: https://sourcegraph.com/search?q=context:global+%22darkMode:+%5B%27variant%27%22&patternType=keyword&sm=0 😅

Copy link
Member Author

Choose a reason for hiding this comment

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

I think this should work, we decided to go with the "replaces first closing brace with the slot stuff" in the addVariant API so this just makes sure whatever we create would be equivalent to running the compat layer at this point haha

Your specific example would convert to this which would work: https://play.tailwindcss.com/94rgXzHkCF

Copy link
Member

Choose a reason for hiding this comment

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

:shipit:

}

if (customVariant !== '') {
return `\n@tw-bucket custom-variant {\n@custom-variant dark {${customVariant}};\n}\n`
}

return ''
}

// Returns a string identifier used to section theme declarations
Expand Down