From 446ddc7644100697d824488358a3fafe9e1de880 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Thu, 15 Aug 2024 14:25:54 +0200 Subject: [PATCH 1/5] Turbopack build: Fix Sass test (#68936) ## What? Updates the test to use the served page instead of readdir on the output directory. Updates the snapshots for Turbopack. No behavior changes. --- .../compilation-and-prefixing.test.ts | 221 ++++++++++++++---- test/turbopack-build-tests-manifest.json | 8 +- 2 files changed, 182 insertions(+), 47 deletions(-) diff --git a/test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts b/test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts index a65dc69772c68..b84370e0380e3 100644 --- a/test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts +++ b/test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts @@ -1,8 +1,6 @@ /* eslint-env jest */ import { nextTestSetup } from 'e2e-utils' -import { readdir, readFile } from 'fs-extra' -import { join } from 'path' const nextConfig = { productionBrowserSourceMaps: true, @@ -33,55 +31,194 @@ describe.each([ ;(isNextDev ? describe.skip : describe)('Production only', () => { describe('CSS Compilation and Prefixing', () => { it(`should've compiled and prefixed`, async () => { - const cssFolder = join(next.testDir, '.next/static/css') + const $ = await next.render$('/') - const files = await readdir(cssFolder) - const cssFiles = files.filter((f) => /\.css$/.test(f)) + const cssSheet = $('link[rel="stylesheet"]') + expect(cssSheet.length).toBe(1) - expect(cssFiles.length).toBe(1) - const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8') - expect( - cssContent.replace(/\/\*.*?\*\//g, '').trim() - ).toMatchInlineSnapshot( - `".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"` - ) + const stylesheetUrl = cssSheet.attr('href') + + const cssContent = await next + .fetch(stylesheetUrl) + .then((res) => res.text()) + const cssContentWithoutSourceMap = cssContent + .replace(/\/\*.*?\*\//g, '') + .trim() + + if (process.env.TURBOPACK) { + if (dependencies.sass) { + expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(` + ".redText ::placeholder { + color: red; + } + + .flex-parsing { + flex: 0 0 calc(50% - var(--vertical-gutter)); + }" + `) + } else { + expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(` + ".redText ::placeholder { + color: red; + } + + .flex-parsing { + flex: 0 0 calc(50% - var(--vertical-gutter)); + }" + `) + } + } else { + if (dependencies.sass) { + expect(cssContentWithoutSourceMap).toMatchInlineSnapshot( + `".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"` + ) + } else { + expect(cssContentWithoutSourceMap).toMatchInlineSnapshot( + `".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"` + ) + } + } // Contains a source map - console.log({ cssContent }) expect(cssContent).toMatch(/\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//) - }) - it(`should've emitted a source map`, async () => { - const cssFolder = join(next.testDir, '.next/static/css') + // Check sourcemap + const sourceMapUrl = /\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//.exec( + cssContent + )[1] - const files = await readdir(cssFolder) - const cssMapFiles = files.filter((f) => /\.css\.map$/.test(f)) + const actualSourceMapUrl = stylesheetUrl.replace(/[^/]+$/, sourceMapUrl) + const sourceMapContent = await next + .fetch(actualSourceMapUrl) + .then((res) => res.text()) + const sourceMapContentParsed = JSON.parse(sourceMapContent) + // Ensure it doesn't have a specific path in the snapshot. + delete sourceMapContentParsed.file + delete sourceMapContentParsed.sources - expect(cssMapFiles.length).toBe(1) - const cssMapContent = ( - await readFile(join(cssFolder, cssMapFiles[0]), 'utf8') - ).trim() + if (process.env.TURBOPACK) { + if (dependencies.sass) { + expect(sourceMapContentParsed).toMatchInlineSnapshot(` + { + "sections": [ + { + "map": { + "mappings": "AAAA;;;;AAAiC", + "names": [], + "sources": [ + "turbopack://[project]/styles/global.scss.css", + ], + "sourcesContent": [ + ".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}", + ], + "version": 3, + }, + "offset": { + "column": 0, + "line": 1, + }, + }, + { + "map": { + "mappings": "A", + "names": [], + "sources": [], + "version": 3, + }, + "offset": { + "column": 0, + "line": 8, + }, + }, + ], + "version": 3, + } + `) + } else { + expect(sourceMapContentParsed).toMatchInlineSnapshot(` + { + "sections": [ + { + "map": { + "mappings": "AAAA;;;;AAAiC", + "names": [], + "sources": [ + "turbopack://[project]/styles/global.scss.css", + ], + "sourcesContent": [ + ".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}", + ], + "version": 3, + }, + "offset": { + "column": 0, + "line": 1, + }, + }, + { + "map": { + "mappings": "A", + "names": [], + "sources": [], + "version": 3, + }, + "offset": { + "column": 0, + "line": 8, + }, + }, + ], + "version": 3, + } + `) + } + } else { + if (dependencies.sass) { + expect(sourceMapContentParsed).toMatchInlineSnapshot(` + { + "mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA", + "names": [], + "sourceRoot": "", + "sourcesContent": [ + "$var: red; + .redText { + ::placeholder { + color: $var; + } + } - const { version, mappings, sourcesContent } = JSON.parse(cssMapContent) - expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(` - { - "mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA", - "sourcesContent": [ - "$var: red; - .redText { - ::placeholder { - color: $var; - } - } - - .flex-parsing { - flex: 0 0 calc(50% - var(--vertical-gutter)); - } - ", - ], - "version": 3, - } - `) + .flex-parsing { + flex: 0 0 calc(50% - var(--vertical-gutter)); + } + ", + ], + "version": 3, + } + `) + } else { + expect(sourceMapContentParsed).toMatchInlineSnapshot(` + { + "mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA", + "names": [], + "sourceRoot": "", + "sourcesContent": [ + "$var: red; + .redText { + ::placeholder { + color: $var; + } + } + + .flex-parsing { + flex: 0 0 calc(50% - var(--vertical-gutter)); + } + ", + ], + "version": 3, + } + `) + } + } }) }) }) diff --git a/test/turbopack-build-tests-manifest.json b/test/turbopack-build-tests-manifest.json index fde602eb9ab4c..c94e058fff100 100644 --- a/test/turbopack-build-tests-manifest.json +++ b/test/turbopack-build-tests-manifest.json @@ -3623,13 +3623,11 @@ "runtimeError": false }, "test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts": { - "passed": [], - "failed": [ + "passed": [ "SCSS Support ({\"sass\": \"1.54.0\"}) Production only CSS Compilation and Prefixing should've compiled and prefixed", - "SCSS Support ({\"sass\": \"1.54.0\"}) Production only CSS Compilation and Prefixing should've emitted a source map", - "SCSS Support ({\"sass-embedded\": \"1.75.0\"}) Production only CSS Compilation and Prefixing should've compiled and prefixed", - "SCSS Support ({\"sass-embedded\": \"1.75.0\"}) Production only CSS Compilation and Prefixing should've emitted a source map" + "SCSS Support ({\"sass-embedded\": \"1.75.0\"}) Production only CSS Compilation and Prefixing should've compiled and prefixed" ], + "failed": [], "pending": [], "flakey": [], "runtimeError": false From 441a4108db2fd72923a17a93715e5b636b00453a Mon Sep 17 00:00:00 2001 From: Vercel Release Bot <88769842+vercel-release-bot@users.noreply.github.com> Date: Thu, 15 Aug 2024 08:45:03 -0400 Subject: [PATCH 2/5] Update Turbopack production test manifest (#68927) This auto-generated PR updates the production integration test manifest used when testing Turbopack. --- test/turbopack-build-tests-manifest.json | 37 +++++++++++++++++------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/test/turbopack-build-tests-manifest.json b/test/turbopack-build-tests-manifest.json index c94e058fff100..af7aafd3dc100 100644 --- a/test/turbopack-build-tests-manifest.json +++ b/test/turbopack-build-tests-manifest.json @@ -5830,6 +5830,21 @@ "flakey": [], "runtimeError": false }, + "test/e2e/on-request-error/isr/isr.test.ts": { + "passed": [ + "on-request-error - isr app router ISR should capture correct reason for build errored route", + "on-request-error - isr app router ISR should capture correct reason for on-demand revalidated page", + "on-request-error - isr app router ISR should capture correct reason for on-demand revalidated route", + "on-request-error - isr app router ISR should capture correct reason for stale errored page", + "on-request-error - isr app router ISR should capture revalidate from server action", + "on-request-error - isr pages router ISR should capture correct reason for on-demand revalidated page", + "on-request-error - isr pages router ISR should capture correct reason for stale errored page" + ], + "failed": [], + "pending": [], + "flakey": [], + "runtimeError": false + }, "test/e2e/on-request-error/server-action-error/server-action-error.test.ts": { "passed": [ "on-request-error - server-action-error should catch server action error in listener callback in edge runtime", @@ -7843,20 +7858,20 @@ }, "test/integration/css/test/css-compilation.test.js": { "passed": [ - "CSS Support production mode Has CSS in computed styles in Production useLightnincsss(false) should have CSS for page", - "CSS Support production mode Has CSS in computed styles in Production useLightnincsss(false) should've preloaded the CSS file and injected it in ", - "CSS Support production mode Has CSS in computed styles in Production useLightnincsss(true) should have CSS for page", - "CSS Support production mode Has CSS in computed styles in Production useLightnincsss(true) should've preloaded the CSS file and injected it in ", - "CSS Support production mode React Lifecyce Order (production) useLightnincsss(false) should have the correct color on mount after navigation", - "CSS Support production mode React Lifecyce Order (production) useLightnincsss(true) should have the correct color on mount after navigation", - "CSS Support production mode Good CSS Import from node_modules useLightnincsss(false) should've emitted a single CSS file", - "CSS Support production mode Good CSS Import from node_modules useLightnincsss(true) should've emitted a single CSS file", "CSS Property Ordering production mode useLightnincsss(false) should have the border width (property ordering)", "CSS Property Ordering production mode useLightnincsss(true) should have the border width (property ordering)", "CSS Support production mode CSS Compilation and Prefixing useLightnincsss(false) should've compiled and prefixed", "CSS Support production mode CSS Compilation and Prefixing useLightnincsss(true) should've compiled and prefixed", + "CSS Support production mode Good CSS Import from node_modules useLightnincsss(false) should've emitted a single CSS file", + "CSS Support production mode Good CSS Import from node_modules useLightnincsss(true) should've emitted a single CSS file", "CSS Support production mode Good Nested CSS Import from node_modules useLightnincsss(false) should've emitted a single CSS file", - "CSS Support production mode Good Nested CSS Import from node_modules useLightnincsss(true) should've emitted a single CSS file" + "CSS Support production mode Good Nested CSS Import from node_modules useLightnincsss(true) should've emitted a single CSS file", + "CSS Support production mode Has CSS in computed styles in Production useLightnincsss(false) should have CSS for page", + "CSS Support production mode Has CSS in computed styles in Production useLightnincsss(false) should've preloaded the CSS file and injected it in ", + "CSS Support production mode Has CSS in computed styles in Production useLightnincsss(true) should have CSS for page", + "CSS Support production mode Has CSS in computed styles in Production useLightnincsss(true) should've preloaded the CSS file and injected it in ", + "CSS Support production mode React Lifecyce Order (production) useLightnincsss(false) should have the correct color on mount after navigation", + "CSS Support production mode React Lifecyce Order (production) useLightnincsss(true) should have the correct color on mount after navigation" ], "failed": [], "pending": [], @@ -7921,12 +7936,12 @@ }, "test/integration/css/test/css-rendering.test.js": { "passed": [ + "CSS Support CSS page transition inject