Merge branch 'next' into feat/v4-important-compat

CHANGELOG.md

@@ -12,6 +12,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for prefixes ([#14501](https://github.com/tailwindlabs/tailwindcss/pull/14501))
 - Add support wrapping utilities in a selector ([#14448](https://github.com/tailwindlabs/tailwindcss/pull/14448))
 - Add support marking all utilities as `!important` ([#14448](https://github.com/tailwindlabs/tailwindcss/pull/14448))
+- Expose timing information in debug mode ([#14553](https://github.com/tailwindlabs/tailwindcss/pull/14553))
+- Add support for `blocklist` in config files ([#14556](https://github.com/tailwindlabs/tailwindcss/pull/14556))
+- Add `color-scheme` utilities ([#14567](https://github.com/tailwindlabs/tailwindcss/pull/14567))
+- _Experimental_: Migrate `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514))
+- _Experimental_: Migrate `@apply` utilities with the template codemods ([#14574](https://github.com/tailwindlabs/tailwindcss/pull/14574))
+- _Experimental_: Add template codemods for migrating variant order ([#14524](https://github.com/tailwindlabs/tailwindcss/pull/14524]))
+- _Experimental_: Add template codemods for migrating `bg-gradient-*` utilities to `bg-linear-*` ([#14537](https://github.com/tailwindlabs/tailwindcss/pull/14537]))
+- _Experimental_: Add template codemods for migrating prefixes ([#14557](https://github.com/tailwindlabs/tailwindcss/pull/14557]))
+- _Experimental_: Add template codemods for removal of automatic `var(…)` injection ([#14526](https://github.com/tailwindlabs/tailwindcss/pull/14526))
+- _Experimental_: Add template codemods for migrating important utilities (e.g. `!flex` to `flex!`) ([#14502](https://github.com/tailwindlabs/tailwindcss/pull/14502))
 
 ### Fixed
 

packages/tailwindcss/src/compat/apply-compat-hooks.ts

@@ -252,6 +252,10 @@ export async function applyCompatibilityHooks({
     })
   }
 
+  for (let candidate of resolvedConfig.blocklist) {
+    designSystem.invalidCandidates.add(candidate)
+  }
+
   // Replace `resolveThemeValue` with a version that is backwards compatible
   // with dot-notation but also aware of any JS theme configurations registered
   // by plugins or JS config files. This is significantly slower than just

packages/tailwindcss/src/compat/config.test.ts

@@ -1443,3 +1443,72 @@ test('important: true', async () => {
     "
   `)
 })
+
+test('blocklisted canddiates are not generated', async () => {
+  let compiler = await compile(
+    css`
+      @theme reference {
+        --color-white: #fff;
+        --breakpoint-md: 48rem;
+      }
+      @tailwind utilities;
+      @config "./config.js";
+    `,
+    {
+      async loadModule(id, base) {
+        return {
+          base,
+          module: {
+            blocklist: ['bg-white'],
+          },
+        }
+      },
+    },
+  )
+
+  // bg-white will not get generated
+  expect(compiler.build(['bg-white'])).toEqual('')
+
+  // underline will as will md:bg-white
+  expect(compiler.build(['underline', 'bg-white', 'md:bg-white'])).toMatchInlineSnapshot(`
+    ".underline {
+      text-decoration-line: underline;
+    }
+    .md\\:bg-white {
+      @media (width >= 48rem) {
+        background-color: var(--color-white, #fff);
+      }
+    }
+    "
+  `)
+})
+
+test('blocklisted canddiates cannot be used with `@apply`', async () => {
+  await expect(() =>
+    compile(
+      css`
+        @theme reference {
+          --color-white: #fff;
+          --breakpoint-md: 48rem;
+        }
+        @tailwind utilities;
+        @config "./config.js";
+        .foo {
+          @apply bg-white;
+        }
+      `,
+      {
+        async loadModule(id, base) {
+          return {
+            base,
+            module: {
+              blocklist: ['bg-white'],
+            },
+          }
+        },
+      },
+    ),
+  ).rejects.toThrowErrorMatchingInlineSnapshot(
+    `[Error: Cannot apply unknown utility class: bg-white]`,
+  )
+})

packages/tailwindcss/src/compat/config/resolve-config.ts

@@ -67,6 +67,10 @@ export function resolveConfig(design: DesignSystem, files: ConfigFile[]): Resolv
       ctx.result.prefix = config.prefix ?? ''
     }
 
+    if ('blocklist' in config && config.blocklist !== undefined) {
+      ctx.result.blocklist = config.blocklist ?? []
+    }
+
     if ('important' in config && config.important !== undefined) {
       ctx.result.important = config.important ?? false
     }

packages/tailwindcss/src/compat/config/types.ts

@@ -79,6 +79,15 @@ export interface ResolvedConfig {
   prefix: string
 }
 
+// `blocklist` support
+export interface UserConfig {
+  blocklist?: string[]
+}
+
+export interface ResolvedConfig {
+  blocklist: string[]
+}
+
 // `important` support
 export interface UserConfig {
   important?: boolean | string

packages/tailwindcss/src/design-system.ts

@@ -13,6 +13,8 @@ export type DesignSystem = {
   utilities: Utilities
   variants: Variants
 
+  invalidCandidates: Set<string>
+
   // Whether to mark utility declarations as !important
   important: boolean
 
@@ -48,6 +50,7 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
     utilities,
     variants,
 
+    invalidCandidates: new Set(),
     important: false,
 
     candidatesToCss(classes: string[]) {

packages/tailwindcss/src/intellisense.test.ts

@@ -87,6 +87,15 @@ test('The variant `has-force` does not crash', () => {
   expect(has.selectors({ value: 'force' })).toMatchInlineSnapshot(`[]`)
 })
 
+test('Can produce CSS per candidate using `candidatesToCss`', () => {
+  let design = loadDesignSystem()
+  design.invalidCandidates = new Set(['bg-[#fff]'])
+
+  expect(
+    design.candidatesToCss(['underline', 'i-dont-exist', 'bg-[#fff]', 'bg-[#000]']),
+  ).toMatchInlineSnapshot()
+})
+
 test('Utilities do not show wrapping selector in intellisense', async () => {
   let input = css`
     @import 'tailwindcss/utilities';
@@ -106,22 +115,7 @@ test('Utilities do not show wrapping selector in intellisense', async () => {
     }),
   })
 
-  expect(design.candidatesToCss(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
-    [
-      ".underline {
-      text-decoration-line: underline;
-    }
-    ",
-      ".hover\\:line-through {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: line-through;
-        }
-      }
-    }
-    ",
-    ]
-  `)
+  expect(design.candidatesToCss(['underline', 'hover:line-through'])).toMatchInlineSnapshot()
 })
 
 test('Utilities, when marked as important, show as important in intellisense', async () => {
@@ -136,20 +130,5 @@ test('Utilities, when marked as important, show as important in intellisense', a
     }),
   })
 
-  expect(design.candidatesToCss(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
-    [
-      ".underline {
-      text-decoration-line: underline!important;
-    }
-    ",
-      ".hover\\:line-through {
-      &:hover {
-        @media (hover: hover) {
-          text-decoration-line: line-through!important;
-        }
-      }
-    }
-    ",
-    ]
-  `)
+  expect(design.candidatesToCss(['underline', 'hover:line-through'])).toMatchInlineSnapshot()
 })