Upgrade lightningcss to 1.29.0 (#15576)

Closes #15438
Closes #15560
Closes #15561
Closes #15562

This PR upgrades `lightningcss` to `1.29.0` and uses the [new feature
flag](parcel-bundler/lightningcss@3043896)
to disable the light-dark function transpilation.

package.json

@@ -63,7 +63,7 @@
   "packageManager": "pnpm@9.6.0",
   "pnpm": {
     "patchedDependencies": {
-      "lightningcss@1.26.0": "patches/lightningcss@1.26.0.patch",
+      "lightningcss@1.29.0": "patches/lightningcss@1.29.0.patch",
       "@parcel/watcher@2.5.0": "patches/@parcel__watcher@2.5.0.patch"
     }
   }

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -445,7 +445,7 @@ function optimizeCss(
         deepSelectorCombinator: true,
       },
       include: Features.Nesting,
-      exclude: Features.LogicalProperties | Features.DirSelector,
+      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
       targets: {
         safari: (16 << 16) | (4 << 8),
         ios_saf: (16 << 16) | (4 << 8),

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -400,9 +400,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   hr {
+    height: 0;
     color: inherit;
     border-top-width: 1px;
-    height: 0;
   }
 
   abbr:where([title]) {
@@ -472,7 +472,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   ol, ul, menu {
-    list-style: none;
+    list-style-type: none;
   }
 
   img, svg, video, canvas, audio, iframe, embed, object {
@@ -533,8 +533,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   ::-webkit-date-and-time-value {
-    text-align: inherit;
     min-height: 1lh;
+    text-align: inherit;
   }
 
   ::-webkit-datetime-edit {

packages/@tailwindcss-postcss/src/index.ts

@@ -317,7 +317,10 @@ function optimizeCss(
         deepSelectorCombinator: true,
       },
       include: LightningCssFeatures.Nesting,
-      exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector,
+      exclude:
+        LightningCssFeatures.LogicalProperties |
+        LightningCssFeatures.DirSelector |
+        LightningCssFeatures.LightDark,
       targets: {
         safari: (16 << 16) | (4 << 8),
         ios_saf: (16 << 16) | (4 << 8),

packages/@tailwindcss-vite/src/index.ts

@@ -375,7 +375,10 @@ function optimizeCss(
         deepSelectorCombinator: true,
       },
       include: LightningCssFeatures.Nesting,
-      exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector,
+      exclude:
+        LightningCssFeatures.LogicalProperties |
+        LightningCssFeatures.DirSelector |
+        LightningCssFeatures.LightDark,
       targets: {
         safari: (16 << 16) | (4 << 8),
         ios_saf: (16 << 16) | (4 << 8),

packages/tailwindcss/preflight.css

@@ -205,7 +205,7 @@ summary {
 ol,
 ul,
 menu {
-  list-style: none;
+  list-style-type: none;
 }
 
 /*

packages/tailwindcss/src/test-utils/run.ts

@@ -28,7 +28,7 @@ export function optimizeCss(
         deepSelectorCombinator: true,
       },
       include: Features.Nesting,
-      exclude: Features.LogicalProperties | Features.DirSelector,
+      exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark,
       targets: {
         safari: (16 << 16) | (4 << 8),
         ios_saf: (16 << 16) | (4 << 8),

packages/tailwindcss/src/utilities.test.ts

@@ -6839,53 +6839,26 @@ test('color-scheme', async () => {
     ]),
   ).toMatchInlineSnapshot(`
     ".scheme-dark {
-      --lightningcss-light: ;
-      --lightningcss-dark: initial;
-      --lightningcss-light: ;
-      --lightningcss-dark: initial;
       color-scheme: dark;
     }
 
     .scheme-light {
-      --lightningcss-light: initial;
-      --lightningcss-dark: ;
-      --lightningcss-light: initial;
-      --lightningcss-dark: ;
       color-scheme: light;
     }
 
     .scheme-light-dark {
-      --lightningcss-light: initial;
-      --lightningcss-dark: ;
-      --lightningcss-light: initial;
-      --lightningcss-dark: ;
       color-scheme: light dark;
     }
 
-    @media (prefers-color-scheme: dark) {
-      .scheme-light-dark {
-        --lightningcss-light: ;
-        --lightningcss-dark: initial;
-      }
-    }
-
     .scheme-normal {
       color-scheme: normal;
     }
 
     .scheme-only-dark {
-      --lightningcss-light: ;
-      --lightningcss-dark: initial;
-      --lightningcss-light: ;
-      --lightningcss-dark: initial;
       color-scheme: dark only;
     }
 
     .scheme-only-light {
-      --lightningcss-light: initial;
-      --lightningcss-dark: ;
-      --lightningcss-light: initial;
-      --lightningcss-dark: ;
       color-scheme: light only;
     }"
   `)
@@ -14376,7 +14349,7 @@ test('transition', async () => {
     }
 
     .transition {
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
@@ -14443,7 +14416,7 @@ test('transition', async () => {
     }
 
     .transition {
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
       transition-timing-function: var(--tw-ease, ease);
       transition-duration: var(--tw-duration, .1s);
     }

packages/tailwindcss/src/variants.test.ts

@@ -53,7 +53,11 @@ test('first-line', async () => {
 
 test('marker', async () => {
   expect(await run(['marker:flex'])).toMatchInlineSnapshot(`
-    ".marker\\:flex ::marker, .marker\\:flex::marker {
+    ".marker\\:flex ::marker {
+      display: flex;
+    }
+
+    .marker\\:flex::marker {
       display: flex;
     }"
   `)
@@ -1533,25 +1537,25 @@ test('not', async () => {
       }
     }
 
-    @media not (width < 640px) {
+    @media (width >= 640px) {
       .not-max-sm\\:flex {
         display: flex;
       }
     }
 
-    @media not (width < 130px) {
+    @media (width >= 130px) {
       .not-max-\\[130px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not (width >= 130px) {
+    @media (width < 130px) {
       .not-min-\\[130px\\]\\:flex {
         display: flex;
       }
     }
 
-    @media not (width >= 640px) {
+    @media (width < 640px) {
       .not-min-sm\\:flex, .not-sm\\:flex {
         display: flex;
       }
@@ -2165,7 +2169,15 @@ test('variant order', async () => {
       }
     }
 
-    .first-letter\\:flex:first-letter, .first-line\\:flex:first-line, .marker\\:flex ::marker, .marker\\:flex::marker {
+    .first-letter\\:flex:first-letter, .first-line\\:flex:first-line {
+      display: flex;
+    }
+
+    .marker\\:flex ::marker {
+      display: flex;
+    }
+
+    .marker\\:flex::marker {
       display: flex;
     }