vercel · jantimon · Nov 12, 2024 · Nov 12, 2024 · Nov 17, 2024 · Nov 25, 2024
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -281,7 +281,7 @@
     "platform": "1.3.6",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-modules-extract-imports": "3.0.0",
-    "postcss-modules-local-by-default": "4.0.4",
+    "postcss-modules-local-by-default": "4.2.0",
     "postcss-modules-scope": "3.0.0",
     "postcss-modules-values": "4.0.0",
     "postcss-preset-env": "7.4.3",

diff --git a/packages/next/src/compiled/lru-cache/index.js b/packages/next/src/compiled/lru-cache/index.js
diff --git a/packages/next/src/compiled/postcss-modules-local-by-default/index.js b/packages/next/src/compiled/postcss-modules-local-by-default/index.js
diff --git a/packages/next/src/compiled/postcss-preset-env/index.cjs b/packages/next/src/compiled/postcss-preset-env/index.cjs
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/integration/css-fixtures/global-function/app/globals.css b/test/integration/css-fixtures/global-function/app/globals.css
@@ -0,0 +1,8 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/test/integration/css-fixtures/global-function/app/home.module.css b/test/integration/css-fixtures/global-function/app/home.module.css
@@ -0,0 +1,3 @@
+.home {
+  animation: global(fadeIn) 0.5s ease-in;
+}
diff --git a/test/integration/css-fixtures/global-function/app/layout.tsx b/test/integration/css-fixtures/global-function/app/layout.tsx
@@ -0,0 +1,15 @@
+import './globals.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
diff --git a/test/integration/css-fixtures/global-function/app/page.tsx b/test/integration/css-fixtures/global-function/app/page.tsx
@@ -0,0 +1,9 @@
+import styles from './home.module.css'
+
+export default function Home() {
+  return (
+    <div id="my-div" className={styles.home}>
+      <div>Hello world!</div>
+    </div>
+  )
+}
diff --git a/test/integration/css-fixtures/global-function/tsconfig.json b/test/integration/css-fixtures/global-function/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/test/integration/css-modules/test/index.test.js b/test/integration/css-modules/test/index.test.js
@@ -724,3 +724,72 @@ describe('Catch-all Route CSS Module Usage', () => {
     }
   )
 })
+
+describe('global() function usage', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      const appDir = join(fixturesDir, 'global-function')
+
+      let stdout
+      let code
+      let app
+      let appPort
+
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+        ;({ code, stdout } = await nextBuild(appDir, [], {
+          stdout: true,
+        }))
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+
+      afterAll(() => killApp(app))
+
+      it('should have compiled successfully', () => {
+        expect(code).toBe(0)
+        expect(stdout).toMatch(/Compiled successfully/)
+      })
+
+      it('should apply styles correctly', async () => {
+        const browser = await webdriver(appPort, '/')
+
+        const animation = await browser
+          .elementByCss('#my-div')
+          .getComputedCss('animation')
+
+        expect(animation).toMatch(
+          /0.5s ease-in 0s 1 normal none running fadeIn/
+        )
+      })
+
+      it(`should've emitted two CSS files`, async () => {
+        const content = await renderViaHTTP(appPort, '/')
+        const $ = cheerio.load(content)
+
+        const cssSheet = $('link[rel="stylesheet"]')
+        expect(cssSheet.length).toBe(2)
+        const stylesheet = cssSheet[1].attribs['href']
+
+        const cssContent = await fetchViaHTTP(appPort, stylesheet).then((res) =>
+          res.text()
+        )
+
+        if (process.env.TURBOPACK) {
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(
+            `"home-module__txgM7a__home{animation:fadeIn .5s ease-in}"`
+          )
+        } else {
+          expect(
+            cssContent.replace(/\/\*.*?\*\//g, '').trim()
+          ).toMatchInlineSnapshot(
+            `".home_home__kcaw_{animation:fadeIn .5s ease-in}"`
+          )
+        }
+      })
+    }
+  )
+})