PostCSS should not polyfill @property for CSS module files

Author: philipp-spiess

integrations/postcss/next.test.ts

@@ -48,7 +48,7 @@ test(
       'app/page.module.css': css`
         @reference './globals.css';
         .heading {
-          @apply text-red-500 animate-ping;
+          @apply text-red-500 animate-ping skew-7;
         }
       `,
       'app/globals.css': css`
@@ -77,9 +77,10 @@ test(
     ])
 
     await fs.expectFileToContain(moduleCss!, [
-      'color:var(--color-red-500,oklch(.637 .237 25.331)',
+      'color:var(--color-red-500,oklch(63.7% .237 25.331)',
       'animation:var(--animate-ping,ping 1s cubic-bezier(0,0,.2,1) infinite)',
       /@keyframes page_ping.*{75%,to{transform:scale\(2\);opacity:0}/,
+      '--tw-skew-x:skewX(7deg);',
     ])
   },
 )
@@ -130,7 +131,7 @@ describe.each(['turbo', 'webpack'])('%s', (bundler) => {
         'app/page.module.css': css`
           @reference './globals.css';
           .heading {
-            @apply text-red-500 animate-ping content-['module'];
+            @apply text-red-500 animate-ping skew-7 content-['module'];
           }
         `,
         'app/globals.css': css`
@@ -173,6 +174,7 @@ describe.each(['turbo', 'webpack'])('%s', (bundler) => {
         let css = await fetchStyles(url)
         expect(css).toContain(candidate`underline`)
         expect(css).toContain(candidate`bg-red-500`)
+        expect(css).toContain('--tw-skew-x: skewX(7deg);')
         expect(css).toContain('content: var(--tw-content)')
         expect(css).toContain('@keyframes')
       })

packages/@tailwindcss-node/src/compile.ts

@@ -9,26 +9,29 @@ import {
   compile as _compile,
   compileAst as _compileAst,
   Features,
+  Polyfills,
 } from 'tailwindcss'
 import type { AstNode } from '../../tailwindcss/src/ast'
 import { getModuleDependencies } from './get-module-dependencies'
 import { rewriteUrls } from './urls'
 
-export { Features }
+export { Features, Polyfills }
 
 export type Resolver = (id: string, base: string) => Promise<string | false | undefined>
 
 export interface CompileOptions {
   base: string
   onDependency: (path: string) => void
   shouldRewriteUrls?: boolean
+  polyfills?: Polyfills
 
   customCssResolver?: Resolver
   customJsResolver?: Resolver
 }
 
 function createCompileOptions({
   base,
+  polyfills,
   onDependency,
   shouldRewriteUrls,
 
@@ -37,6 +40,7 @@ function createCompileOptions({
 }: CompileOptions) {
   return {
     base,
+    polyfills,
     async loadModule(id: string, base: string) {
       return loadModule(id, base, onDependency, customJsResolver)
     },

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

@@ -5,6 +5,7 @@ import {
   Features,
   Instrumentation,
   optimize as optimizeCss,
+  Polyfills,
 } from '@tailwindcss/node'
 import { clearRequireCache } from '@tailwindcss/node/require-cache'
 import { Scanner } from '@tailwindcss/oxide'
@@ -72,6 +73,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
           using I = new Instrumentation()
 
           let inputFile = result.opts.from ?? ''
+          let isCSSModuleFile = inputFile.endsWith('.module.css')
 
           DEBUG && I.start(`[@tailwindcss/postcss] ${relative(base, inputFile)}`)
 
@@ -119,6 +121,10 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
               onDependency: (path) => {
                 context.fullRebuildPaths.push(path)
               },
+              // In CSS Module files, we have to disable the `@property` polyfill since these will
+              // emit global `*` rules which are considered to be non-pure and will cause builds
+              // to fail.
+              polyfills: isCSSModuleFile ? Polyfills.All ^ Polyfills.AtProperty : Polyfills.All,
             })
             DEBUG && I.end('Create compiler')
 

packages/tailwindcss/src/ast.ts

@@ -392,7 +392,7 @@ export function optimizeAst(
       // Collect fallbacks for `@property` rules for Firefox support
       // We turn these into rules on `:root` or `*` and some pseudo-elements
       // based on the value of `inherits``
-      if (polyfills & Polyfills.PolyfillAtProperty) {
+      if (polyfills & Polyfills.AtProperty) {
         let property = node.params
         let initialValue = null
         let inherits = false
@@ -556,7 +556,7 @@ export function optimizeAst(
   }
 
   // Fallbacks
-  if (polyfills & Polyfills.PolyfillAtProperty) {
+  if (polyfills & Polyfills.AtProperty) {
     {
       let fallbackAst = []
 

packages/tailwindcss/src/index.ts

@@ -41,10 +41,10 @@ export const enum Polyfills {
   None = 0,
 
   // Control if fallbacks for `@property` rules are emitted
-  PolyfillAtProperty = 1 << 0,
+  AtProperty = 1 << 0,
 
   // Enable all
-  All = PolyfillAtProperty,
+  All = AtProperty,
 }
 
 type CompileOptions = {

playgrounds/nextjs/app/page.module.css

@@ -1,3 +1,5 @@
+@reference "./globals.css";
+
 .heading {
-  color: var(--color-red-500);
+  @apply skew-7;
 }