From 413d1223d85f00d7eb2b1a9cac394fef3df9503a Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 21 May 2024 21:39:46 +0200 Subject: [PATCH] Upgrade lightningcss, disable grid prefixing (#65986) ## What? Requires https://github.com/vercel/turbo/pull/8176 first. Grid scoping in CSS Modules is disabled because Webpack CSS Modules handling doesn't handle grid currently. This ensures moving from Webpack to Turbopack doesn't have mismatching behavior around CSS grid. Fixes #64509 Fixes #63758 Fixes PACK-2976 --- Cargo.lock | 2 +- packages/next/package.json | 2 +- pnpm-lock.yaml | 8 +-- .../app/animation/animation.module.css | 24 +++++++ .../app/animation/page.tsx | 9 +++ .../app/grid/grid.module.css | 25 ++++++++ .../css-modules-scoping/app/grid/page.tsx | 22 +++++++ .../css-modules-scoping/app/layout.tsx | 9 +++ .../css-modules-scoping.test.ts | 63 +++++++++++++++++++ .../css-modules-scoping/next.config.js | 6 ++ .../{{ toFileName name }}/app/layout.tsx | 3 +- 11 files changed, 166 insertions(+), 7 deletions(-) create mode 100644 test/e2e/app-dir/css-modules-scoping/app/animation/animation.module.css create mode 100644 test/e2e/app-dir/css-modules-scoping/app/animation/page.tsx create mode 100644 test/e2e/app-dir/css-modules-scoping/app/grid/grid.module.css create mode 100644 test/e2e/app-dir/css-modules-scoping/app/grid/page.tsx create mode 100644 test/e2e/app-dir/css-modules-scoping/app/layout.tsx create mode 100644 test/e2e/app-dir/css-modules-scoping/css-modules-scoping.test.ts create mode 100644 test/e2e/app-dir/css-modules-scoping/next.config.js diff --git a/Cargo.lock b/Cargo.lock index 8299047ff3987..20e33b068aada 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2048,7 +2048,7 @@ dependencies = [ "httpdate", "itoa", "pin-project-lite", - "socket2 0.5.6", + "socket2 0.4.9", "tokio", "tower-service", "tracing", diff --git a/packages/next/package.json b/packages/next/package.json index c40def520bac1..b01f214f044bb 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -206,7 +206,7 @@ "@types/ws": "8.2.0", "@vercel/ncc": "0.34.0", "@vercel/nft": "0.27.1", - "@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240517.2", + "@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240521.2", "acorn": "8.11.3", "amphtml-validator": "1.0.35", "anser": "1.4.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0447937ca5cfd..aef5d8ee71144 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1085,8 +1085,8 @@ importers: specifier: 0.27.1 version: 0.27.1 '@vercel/turbopack-ecmascript-runtime': - specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240517.2 - version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240517.2' + specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240521.2 + version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240521.2' acorn: specifier: 8.11.3 version: 8.11.3 @@ -25800,8 +25800,8 @@ packages: /zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} - '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240517.2': - resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240517.2} + '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240521.2': + resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240521.2} name: '@vercel/turbopack-ecmascript-runtime' version: 0.0.0 dependencies: diff --git a/test/e2e/app-dir/css-modules-scoping/app/animation/animation.module.css b/test/e2e/app-dir/css-modules-scoping/app/animation/animation.module.css new file mode 100644 index 0000000000000..a3524065670d3 --- /dev/null +++ b/test/e2e/app-dir/css-modules-scoping/app/animation/animation.module.css @@ -0,0 +1,24 @@ +@keyframes example { + 0% { + background-color: red; + } + 25% { + background-color: yellow; + } + 50% { + background-color: blue; + } + 75% { + background-color: green; + } + 100% { + background-color: red; + } +} + +.animated-item { + position: relative; + animation-name: example; + animation-duration: 4s; + animation-iteration-count: infinite; +} diff --git a/test/e2e/app-dir/css-modules-scoping/app/animation/page.tsx b/test/e2e/app-dir/css-modules-scoping/app/animation/page.tsx new file mode 100644 index 0000000000000..e5410d5aa2983 --- /dev/null +++ b/test/e2e/app-dir/css-modules-scoping/app/animation/page.tsx @@ -0,0 +1,9 @@ +import styles from './animation.module.css' + +export default function Page() { + return ( +

+ Animated +

+ ) +} diff --git a/test/e2e/app-dir/css-modules-scoping/app/grid/grid.module.css b/test/e2e/app-dir/css-modules-scoping/app/grid/grid.module.css new file mode 100644 index 0000000000000..47542d72567f7 --- /dev/null +++ b/test/e2e/app-dir/css-modules-scoping/app/grid/grid.module.css @@ -0,0 +1,25 @@ +.grid-container { + display: grid; + grid-template-areas: + 'header header' + 'sidebar main' + 'footer footer'; + grid-gap: 10px; +} +.header { + grid-area: header; +} +.sidebar { + grid-area: sidebar; +} +.main { + grid-area: main; +} +.footer { + grid-area: footer; +} + +.grid-item { + padding: 20px; + background-color: lightgrey; +} diff --git a/test/e2e/app-dir/css-modules-scoping/app/grid/page.tsx b/test/e2e/app-dir/css-modules-scoping/app/grid/page.tsx new file mode 100644 index 0000000000000..fcbfd4098730a --- /dev/null +++ b/test/e2e/app-dir/css-modules-scoping/app/grid/page.tsx @@ -0,0 +1,22 @@ +import styles from './grid.module.css' +export default function Page() { + return ( +
+ + +
+ Main +
+ +
+ ) +} diff --git a/test/e2e/app-dir/css-modules-scoping/app/layout.tsx b/test/e2e/app-dir/css-modules-scoping/app/layout.tsx new file mode 100644 index 0000000000000..716a8db36f52c --- /dev/null +++ b/test/e2e/app-dir/css-modules-scoping/app/layout.tsx @@ -0,0 +1,9 @@ +import { ReactNode } from 'react' + +export default function Root({ children }: { children: ReactNode }) { + return ( + + {children} + + ) +} diff --git a/test/e2e/app-dir/css-modules-scoping/css-modules-scoping.test.ts b/test/e2e/app-dir/css-modules-scoping/css-modules-scoping.test.ts new file mode 100644 index 0000000000000..eca18ce59c86d --- /dev/null +++ b/test/e2e/app-dir/css-modules-scoping/css-modules-scoping.test.ts @@ -0,0 +1,63 @@ +import { nextTestSetup } from 'e2e-utils' +import { retry } from 'next-test-utils' + +describe('css-modules-scoping', () => { + const { next } = nextTestSetup({ + files: __dirname, + }) + + it('should not prefix grid areas', async () => { + const browser = await next.browser('/grid') + + // Check grid-area of header + await retry(async () => { + expect( + await browser.eval( + `window.getComputedStyle(document.querySelector('#header')).gridArea` + ) + ).toBe('header') + }) + + // Check grid-area of sidebar + await retry(async () => { + expect( + await browser.eval( + `window.getComputedStyle(document.querySelector('#sidebar')).gridArea` + ) + ).toBe('sidebar') + }) + + // Check grid-area of main + await retry(async () => { + expect( + await browser.eval( + `window.getComputedStyle(document.querySelector('#main')).gridArea` + ) + ).toBe('main') + }) + + // Check grid-area of footer + await retry(async () => { + expect( + await browser.eval( + `window.getComputedStyle(document.querySelector('#footer')).gridArea` + ) + ).toBe('footer') + }) + }) + + it('should prefix animation', async () => { + const browser = await next.browser('/animation') + + // Check animation-name + await retry(async () => { + const animationName = await browser.eval( + `window.getComputedStyle(document.querySelector('#animated')).animationName` + ) + // Check if the animation name is not `example` exactly. If it's exactly `example` then it's not scoped. + expect(animationName).not.toBe('example') + // Check if the animation name has `example` anywhere in it + expect(animationName).toContain('example') + }) + }) +}) diff --git a/test/e2e/app-dir/css-modules-scoping/next.config.js b/test/e2e/app-dir/css-modules-scoping/next.config.js new file mode 100644 index 0000000000000..807126e4cf0bf --- /dev/null +++ b/test/e2e/app-dir/css-modules-scoping/next.config.js @@ -0,0 +1,6 @@ +/** + * @type {import('next').NextConfig} + */ +const nextConfig = {} + +module.exports = nextConfig diff --git a/test/e2e/app-dir/test-template/{{ toFileName name }}/app/layout.tsx b/test/e2e/app-dir/test-template/{{ toFileName name }}/app/layout.tsx index e7077399c03ce..888614deda3ba 100644 --- a/test/e2e/app-dir/test-template/{{ toFileName name }}/app/layout.tsx +++ b/test/e2e/app-dir/test-template/{{ toFileName name }}/app/layout.tsx @@ -1,4 +1,5 @@ -export default function Root({ children }: { children: React.ReactNode }) { +import { ReactNode } from 'react' +export default function Root({ children }: { children: ReactNode }) { return ( {children}