From e77af7415dd4fd835818b895c40aa1c88d51445b Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 16 May 2025 12:05:13 +0200
Subject: [PATCH 1/3] add failing integration test

---
 integrations/upgrade/index.test.ts | 81 ++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index 2dc9b7c678ee..c70c83ddc6df 100644
--- a/integrations/upgrade/index.test.ts
+++ b/integrations/upgrade/index.test.ts
@@ -2967,6 +2967,87 @@ test(
   },
 )
 
+test(
+  'upgrade <style> blocks carefully',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^4",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'src/index.vue': html`
+        <template
+          <div class="!flex"></div>
+        </template>
+
+        <style>
+        @reference "./input.css";
+
+        .foo {
+          @apply !bg-red-500;
+        }
+
+        .bar {
+          /* Do not upgrade the key: */
+          flex-shrink: 0;
+        }
+        </style>
+      `,
+      'src/input.css': css`
+        @import 'tailwindcss';
+
+        .foo {
+          flex-shrink: 1;
+        }
+
+        .bar {
+          @apply !underline;
+        }
+      `,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('./src/**/*.{css,vue}')).toMatchInlineSnapshot(`
+      "
+      --- ./src/index.vue ---
+      <template
+        <div class="flex!"></div>
+      </template>
+
+      <style>
+      @reference "./input.css";
+
+      .foo {
+        @apply !bg-red-500;
+      }
+
+      .bar {
+        /* Do not upgrade the key: */
+        flex-shrink: 0;
+      }
+      </style>
+
+      --- ./src/input.css ---
+      @import 'tailwindcss';
+
+      .foo {
+        flex-shrink: 1;
+      }
+
+      .bar {
+        @apply underline!;
+      }
+      "
+    `)
+  },
+)
+
 function withBOM(text: string): string {
   return '\uFEFF' + text
 }

From d296eafa9ece5a6b6f23e1b6f6f3c6793764dba5 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 16 May 2025 12:19:48 +0200
Subject: [PATCH 2/3] =?UTF-8?q?do=20not=20migrate=20declarations=20in=20`<?=
 =?UTF-8?q?style>=E2=80=A6</style>`=20blocks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

However, we also can't just ignore `<style></style>` blocks _if_ they
include `@apply` because we still want to migrate those instances.
---
 .../codemods/template/is-safe-migration.ts    | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
index dd540d5c57e7..a344e56ed18f 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.ts
@@ -22,6 +22,37 @@ export function isSafeMigration(
   location: { contents: string; start: number; end: number },
   designSystem: DesignSystem,
 ): boolean {
+  // Ensure we are not migrating a candidate in a `<style>` block. The heuristic
+  // would be if the candidate is preceded by a whitespace and followed by a
+  // colon and whitespace.
+  //
+  // E.g.:
+  // ```vue
+  // <template>
+  //   <div class="foo"></div>
+  // </template>
+  //
+  //
+  // <style>
+  // .foo {
+  //   flex-shrink: 0;
+  //  ^           ^^
+  // }
+  // </style>
+  // ```
+  if (
+    // Whitespace before the candidate
+    location.contents[location.start - 1]?.match(/\s/) &&
+    // A colon followed by whitespace after the candidate
+    location.contents.slice(location.end, location.end + 2)?.match(/^:\s/) &&
+    // A `<style` block is present before the candidate
+    location.contents.slice(0, location.start).includes('<style') &&
+    // `</style>` is present after the candidate
+    location.contents.slice(location.end).includes('</style>')
+  ) {
+    return false
+  }
+
   let [candidate] = Array.from(parseCandidate(rawCandidate, designSystem))
 
   // If we can't parse the candidate, then it's not a candidate at all. However,

From 07a073856b84f761b8d0da17dfa3c974e905b0fa Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 16 May 2025 12:29:38 +0200
Subject: [PATCH 3/3] update changelog

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f48d1c51fe2..a8a414fec022 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Upgrade: Do not migrate declarations that look like candidates in `<style>` blocks ([#18057](https://github.com/tailwindlabs/tailwindcss/pull/18057))
 
 ## [4.1.7] - 2025-05-15