Merge branch 'next' into details-content

Author: RobinMalfait

CHANGELOG.md

@@ -4719,7 +4719,6 @@ exports[`getClassList 1`] = `
   "min-h-lvw",
   "min-h-max",
   "min-h-min",
-  "min-h-none",
   "min-h-px",
   "min-h-screen",
   "min-h-svh",
@@ -4767,7 +4766,6 @@ exports[`getClassList 1`] = `
   "min-w-lvw",
   "min-w-max",
   "min-w-min",
-  "min-w-none",
   "min-w-px",
   "min-w-screen",
   "min-w-svh",

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -570,6 +570,13 @@ it('should parse a utility with an arbitrary value with parens', () => {
   `)
 })
 
+it('should not parse a utility with an arbitrary value with parens that does not start with --', () => {
+  let utilities = new Utilities()
+  utilities.functional('bg', () => [])
+
+  expect(run('bg-(my-color)', { utilities })).toMatchInlineSnapshot(`[]`)
+})
+
 it('should parse a utility with an arbitrary value including a typehint', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
@@ -616,6 +623,13 @@ it('should parse a utility with an arbitrary value with parens including a typeh
   `)
 })
 
+it('should not parse a utility with an arbitrary value with parens including a typehint that does not start with --', () => {
+  let utilities = new Utilities()
+  utilities.functional('bg', () => [])
+
+  expect(run('bg-(color:my-color)', { utilities })).toMatchInlineSnapshot(`[]`)
+})
+
 it('should parse a utility with an arbitrary value with parens and a fallback', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
@@ -888,6 +902,8 @@ it('should not parse invalid arbitrary values in variants', () => {
 
     'data-foo-(--value)/(number:--mod):flex',
     'data-foo(--value)/(number:--mod):flex',
+
+    'data-(value):flex',
   ]) {
     expect(run(candidate, { utilities, variants })).toEqual([])
   }
@@ -945,6 +961,13 @@ it('should parse a utility with an implicit variable as the modifier using the s
   `)
 })
 
+it('should not parse a utility with an implicit invalid variable as the modifier using the shorthand', () => {
+  let utilities = new Utilities()
+  utilities.functional('bg', () => [])
+
+  expect(run('bg-red-500/(value)', { utilities })).toMatchInlineSnapshot(`[]`)
+})
+
 it('should parse a utility with an implicit variable as the modifier that is important', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])

packages/tailwindcss/src/candidate.test.ts

@@ -517,6 +517,9 @@ function parseModifier(modifier: string): CandidateModifier | null {
     //                                                 ^^
     if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null
 
+    // Arbitrary values must start with `--` since it represents a CSS variable.
+    if (arbitraryValue[0] !== '-' && arbitraryValue[1] !== '-') return null
+
     return {
       kind: 'arbitrary',
       value: `var(${arbitraryValue})`,
@@ -651,6 +654,9 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
             //                                                 ^^
             if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null
 
+            // Arbitrary values must start with `--` since it represents a CSS variable.
+            if (arbitraryValue[0] !== '-' && arbitraryValue[1] !== '-') return null
+
             return {
               kind: 'functional',
               root,

packages/tailwindcss/src/candidate.ts

@@ -14927,6 +14927,7 @@ test('text', async () => {
           --color-red-500: #ef4444;
           --text-sm: 0.875rem;
           --text-sm--line-height: 1.25rem;
+          --leading-snug: 1.375;
         }
         @tailwind utilities;
       `,
@@ -14962,6 +14963,9 @@ test('text', async () => {
         // font-size / line-height / letter-spacing / font-weight
         'text-sm',
         'text-sm/6',
+        'text-sm/none',
+        'text-[10px]/none',
+        'text-sm/snug',
         'text-sm/[4px]',
         'text-[12px]',
         'text-[12px]/6',
@@ -14986,13 +14990,19 @@ test('text', async () => {
       --color-red-500: #ef4444;
       --text-sm: .875rem;
       --text-sm--line-height: 1.25rem;
+      --leading-snug: 1.375;
     }
 
     .text-sm {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
 
+    .text-\\[10px\\]\\/none {
+      font-size: 10px;
+      line-height: 1;
+    }
+
     .text-\\[12px\\]\\/6 {
       font-size: 12px;
       line-height: calc(var(--spacing) * 6);
@@ -15028,6 +15038,16 @@ test('text', async () => {
       line-height: 4px;
     }
 
+    .text-sm\\/none {
+      font-size: var(--text-sm);
+      line-height: 1;
+    }
+
+    .text-sm\\/snug {
+      font-size: var(--text-sm);
+      line-height: var(--leading-snug);
+    }
+
     .text-\\[12px\\] {
       font-size: 12px;
     }
@@ -15121,29 +15141,39 @@ test('text', async () => {
     }"
   `)
   expect(
-    await run([
-      'text',
-      // color
-      '-text-red-500',
-      '-text-red-500/50',
-      '-text-red-500/[0.5]',
-      '-text-red-500/[50%]',
-      '-text-current',
-      '-text-current/50',
-      '-text-current/[0.5]',
-      '-text-current/[50%]',
-      '-text-inherit',
-      '-text-transparent',
-      '-text-[#0088cc]',
-      '-text-[#0088cc]/50',
-      '-text-[#0088cc]/[0.5]',
-      '-text-[#0088cc]/[50%]',
-
-      // font-size / line-height / letter-spacing / font-weight
-      '-text-sm',
-      '-text-sm/6',
-      '-text-sm/[4px]',
-    ]),
+    await compileCss(
+      css`
+        @theme inline reference {
+          --text-sm: 0.875rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'text',
+        // color
+        '-text-red-500',
+        '-text-red-500/50',
+        '-text-red-500/[0.5]',
+        '-text-red-500/[50%]',
+        '-text-current',
+        '-text-current/50',
+        '-text-current/[0.5]',
+        '-text-current/[50%]',
+        '-text-inherit',
+        '-text-transparent',
+        '-text-[#0088cc]',
+        '-text-[#0088cc]/50',
+        '-text-[#0088cc]/[0.5]',
+        '-text-[#0088cc]/[50%]',
+
+        // font-size / line-height / letter-spacing / font-weight
+        '-text-sm',
+        '-text-sm/6',
+        'text-sm/foo',
+        '-text-sm/[4px]',
+        'text-[10px]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 

packages/tailwindcss/src/utilities.test.ts

@@ -896,9 +896,7 @@ export function createUtilities(theme: Theme) {
   staticUtility(`min-h-screen`, [['min-height', '100vh']])
   staticUtility(`max-h-screen`, [['max-height', '100vh']])
 
-  staticUtility(`min-w-none`, [['min-width', 'none']])
   staticUtility(`max-w-none`, [['max-width', 'none']])
-  staticUtility(`min-h-none`, [['min-height', 'none']])
   staticUtility(`max-h-none`, [['max-height', 'none']])
 
   spacingUtility(
@@ -4042,9 +4040,16 @@ export function createUtilities(theme: Theme) {
               modifier = `calc(${multiplier} * ${candidate.modifier.value})`
             }
 
+            // Shorthand for `leading-none`
+            if (!modifier && candidate.modifier.value === 'none') {
+              modifier = '1'
+            }
+
             if (modifier) {
               return [decl('font-size', value), decl('line-height', modifier)]
             }
+
+            return null
           }
 
           return [decl('font-size', value)]
@@ -4088,6 +4093,15 @@ export function createUtilities(theme: Theme) {
             modifier = `calc(${multiplier} * ${candidate.modifier.value})`
           }
 
+          // Shorthand for `leading-none`
+          if (!modifier && candidate.modifier.value === 'none') {
+            modifier = '1'
+          }
+
+          if (!modifier) {
+            return null
+          }
+
           let declarations = [decl('font-size', fontSize)]
           modifier && declarations.push(decl('line-height', modifier))
           return declarations

packages/tailwindcss/src/utilities.ts

@@ -242,7 +242,7 @@ test('target', async () => {
 
 test('open', async () => {
   expect(await run(['open:flex', 'group-open:flex', 'peer-open:flex'])).toMatchInlineSnapshot(`
-    ".group-open\\:flex:is(:where(.group):is([open], :popover-open) *), .peer-open\\:flex:is(:where(.peer):is([open], :popover-open) ~ *), .open\\:flex:is([open], :popover-open) {
+    ".group-open\\:flex:is(:where(.group):is([open], :popover-open, :open) *), .peer-open\\:flex:is(:where(.peer):is([open], :popover-open, :open) ~ *), .open\\:flex:is([open], :popover-open, :open) {
       display: flex;
     }"
   `)
@@ -1482,7 +1482,7 @@ test('not', async () => {
       display: flex;
     }
 
-    .not-open\\:flex:not([open], :popover-open) {
+    .not-open\\:flex:not([open], :popover-open, :open) {
       display: flex;
     }
 
@@ -2228,7 +2228,7 @@ test('variant order', async () => {
       display: flex;
     }
 
-    .first\\:flex:first-child, .last\\:flex:last-child, .only\\:flex:only-child, .odd\\:flex:nth-child(odd), .even\\:flex:nth-child(2n), .first-of-type\\:flex:first-of-type, .last-of-type\\:flex:last-of-type, .only-of-type\\:flex:only-of-type, .visited\\:flex:visited, .target\\:flex:target, .open\\:flex:is([open], :popover-open), .default\\:flex:default, .checked\\:flex:checked, .indeterminate\\:flex:indeterminate, .placeholder-shown\\:flex:placeholder-shown, .autofill\\:flex:autofill, .optional\\:flex:optional, .required\\:flex:required, .valid\\:flex:valid, .invalid\\:flex:invalid, .in-range\\:flex:in-range, .out-of-range\\:flex:out-of-range, .read-only\\:flex:read-only, .empty\\:flex:empty, .focus-within\\:flex:focus-within {
+    .first\\:flex:first-child, .last\\:flex:last-child, .only\\:flex:only-child, .odd\\:flex:nth-child(odd), .even\\:flex:nth-child(2n), .first-of-type\\:flex:first-of-type, .last-of-type\\:flex:last-of-type, .only-of-type\\:flex:only-of-type, .visited\\:flex:visited, .target\\:flex:target, .open\\:flex:is([open], :popover-open, :open), .default\\:flex:default, .checked\\:flex:checked, .indeterminate\\:flex:indeterminate, .placeholder-shown\\:flex:placeholder-shown, .autofill\\:flex:autofill, .optional\\:flex:optional, .required\\:flex:required, .valid\\:flex:valid, .invalid\\:flex:invalid, .in-range\\:flex:in-range, .out-of-range\\:flex:out-of-range, .read-only\\:flex:read-only, .empty\\:flex:empty, .focus-within\\:flex:focus-within {
       display: flex;
     }
 

packages/tailwindcss/src/variants.test.ts

@@ -682,7 +682,7 @@ export function createVariants(theme: Theme): Variants {
   // State
   staticVariant('visited', ['&:visited'])
   staticVariant('target', ['&:target'])
-  staticVariant('open', ['&:is([open], :popover-open)'])
+  staticVariant('open', ['&:is([open], :popover-open, :open)'])
 
   // Forms
   staticVariant('default', ['&:default'])

packages/tailwindcss/src/variants.ts

@@ -18,9 +18,9 @@
   },
   "devDependencies": {
     "@types/node": "catalog:",
-    "@types/react": "^19.0.2",
+    "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.2",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-config-next": "^15.1.3",
     "typescript": "^5.5.4"
   }

playgrounds/nextjs/package.json

@@ -16,10 +16,10 @@
   },
   "devDependencies": {
     "@types/node": "^20.14.8",
-    "@types/react": "^19.0.2",
+    "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.2",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-config-next": "^15.1.3",
     "typescript": "^5.5.4"
   }

playgrounds/v3/package.json

@@ -16,7 +16,7 @@
     "tailwindcss": "workspace:^"
   },
   "devDependencies": {
-    "@types/react": "^19.0.2",
+    "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.2",
     "bun": "^1.1.29",
     "vite": "catalog:"