Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Swap swc_css out #57347

Closed
wants to merge 12 commits into from
Closed

refactor: Swap swc_css out #57347

wants to merge 12 commits into from

Conversation

kdy1
Copy link
Member

@kdy1 kdy1 commented Oct 24, 2023

What?

Use lightningcss instead

Why?

For matainenance

How?

Closes NEXT-
Fixes #

Turbopack counterpart: vercel/turborepo#5737

Closes WEB-1842

@kdy1 kdy1 self-assigned this Oct 24, 2023
@ijjk ijjk added Turbopack Related to Turbopack with Next.js. created-by: Turbopack team PRs by the Turbopack team. type: next labels Oct 24, 2023
@ijjk
Copy link
Member

ijjk commented Oct 24, 2023

Failing test suites

Commit: 69d5a49

pnpm test test/integration/edge-runtime-module-errors/test/module-imports.test.js

  • Edge runtime code with imports > Edge API importing unused node.js module > does not throw in dev at runtime
  • Edge runtime code with imports > Middleware importing unused node.js module > does not throw in dev at runtime
Expand output

● Edge runtime code with imports › Edge API importing unused node.js module › does not throw in dev at runtime

expect(received).not.toContain(expected) // indexOf

Expected substring: not "Module not found: Can't resolve 'child_process'"
Received string:        "   ▲ Next.js 14.0.3-canary.8 (turbo)
   - Local:        http://localhost:33187

 ✓ Ready in 675ms
  ⚠ /api/route error - [project]/test/integration/edge-runtime-module-errors/pages/api/route.js - Error resolving EcmaScript Modules request
[object Object]

 error - test/integration/edge-runtime-module-errors/pages/api/route.js:4:21

  2 |           export default async function handler(request) {
  3 |             if (process.env === 'production') {
> 4 |               (await import(\"child_process\")).spawn('ls', ['-lh', '/usr'])
    |                      ^^^^^^^^^^^^^^^^^^^^^^^
  5 |             }
  6 |             return Response.json({ ok: true })
  7 |           }
Module not found: Can't resolve 'child_process'
    
It was not possible to find the requested file.
    Parsed request as written in source code: module \"child_process\"
    Path where resolving has started: [project]/test/integration/edge-runtime-module-errors/pages/api/route.js
    Type of request: EcmaScript Modules request
    Import map: No import map entry
    


 ✓ Compiled /api/route in 114ms
"

  93 | export function expectNoError(moduleName) {
  94 |   expect(context.logs.output).not.toContain(getUnsupportedModule(moduleName))
> 95 |   expect(context.logs.output).not.toContain(getModuleNotFound(moduleName))
     |                                   ^
  96 | }
  97 |

  at toContain (integration/edge-runtime-module-errors/test/utils.js:95:35)
  at Object.<anonymous> (integration/edge-runtime-module-errors/test/module-imports.test.js:296:20)

● Edge runtime code with imports › Middleware importing unused node.js module › does not throw in dev at runtime

expect(received).not.toContain(expected) // indexOf

Expected substring: not "Module not found: Can't resolve 'child_process'"
Received string:        "
   ▲ Next.js 14.0.3-canary.8 (turbo)
   - Local:        http://localhost:44981

  ⚠ middleware error - [project]/test/integration/edge-runtime-module-errors/middleware.js - Error resolving EcmaScript Modules request
[object Object]

 error - test/integration/edge-runtime-module-errors/middleware.js:6:21

  4 |           export async function middleware(request) {
  5 |             if (process.env === 'production') {
> 6 |               (await import(\"child_process\")).spawn('ls', ['-lh', '/usr'])
    |                      ^^^^^^^^^^^^^^^^^^^^^^^
  7 |             }
  8 |             return NextResponse.next()
  9 |           }
Module not found: Can't resolve 'child_process'
    
It was not possible to find the requested file.
    Parsed request as written in source code: module \"child_process\"
    Path where resolving has started: [project]/test/integration/edge-runtime-module-errors/middleware.js
    Type of request: EcmaScript Modules request
    Import map: No import map entry
    


 ✓ Ready in 750ms
 ○ Compiling / ...
 ✓ Compiled / in 724ms
"

  93 | export function expectNoError(moduleName) {
  94 |   expect(context.logs.output).not.toContain(getUnsupportedModule(moduleName))
> 95 |   expect(context.logs.output).not.toContain(getModuleNotFound(moduleName))
     |                                   ^
  96 | }
  97 |

  at toContain (integration/edge-runtime-module-errors/test/utils.js:95:35)
  at Object.<anonymous> (integration/edge-runtime-module-errors/test/module-imports.test.js:296:20)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/next-image-legacy/default/test/index.test.ts

  • Image Component Tests > dev mode > should apply filter style after image loads
Expand output

● Image Component Tests › dev mode › should apply filter style after image loads

expect(received).toMatch(expected)

Expected substring: "iVBORw0KGgo="
Received string:    "url(\"http://localhost:40043/_next/static/chunks/UVtBYG\")"

  1138 |     expect(
  1139 |       await getComputedStyle(browser, 'img-plain', 'background-image')
> 1140 |     ).toMatch('iVBORw0KGgo=')
       |       ^
  1141 |     expect(
  1142 |       await getComputedStyle(browser, 'img-plain', 'background-position')
  1143 |     ).toBe('1px 2px')

  at Object.toMatch (integration/next-image-legacy/default/test/index.test.ts:1140:7)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/next-image-new/app-dir/test/index.test.ts

  • Image Component Default Tests > dev mode > should apply filter style after image loads
Expand output

● Image Component Default Tests › dev mode › should apply filter style after image loads

expect(received).toMatch(expected)

Expected substring: "iVBORw0KGgo="
Received string:    "url(\"http://localhost:34499/_next/static/chunks/6yRecq\")"

  1230 |     expect(
  1231 |       await getComputedStyle(browser, 'img-plain', 'background-image')
> 1232 |     ).toMatch('iVBORw0KGgo=')
       |       ^
  1233 |     expect(
  1234 |       await getComputedStyle(browser, 'img-plain', 'background-position')
  1235 |     ).toBe('1px 2px')

  at Object.toMatch (integration/next-image-new/app-dir/test/index.test.ts:1232:7)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/app-dir/app-css/index.test.ts

  • app dir - css > HMR > should not break HMR when CSS is imported in a server component
  • app dir - css > HMR > should support HMR with sass/scss
  • app dir - css > Suspensey CSS > should suspend on CSS imports if its slow on client navigation
  • app dir - css > css support > should reload @import styles during HMR
  • app dir - css > sass support > client layouts > should support global sass/scss inside client layouts
  • app dir - css > sass support > client layouts > should support sass/scss modules inside client layouts
  • app dir - css > sass support > client pages > should support sass/scss modules inside client pages
  • app dir - css > sass support > server layouts > should support global sass/scss inside server layouts
  • app dir - css > sass support > server pages > should support global sass/scss inside server pages
Expand output

● app dir - css › css support › should reload @import styles during HMR

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(255, 0, 0)"
Received: "rgba(0, 0, 0, 0)"

  386 |               `window.getComputedStyle(document.querySelector('body')).backgroundColor`
  387 |             )
> 388 |           ).toBe('rgb(255, 0, 0)')
      |             ^
  389 |
  390 |           try {
  391 |             await next.patchFile(

  at Object.toBe (e2e/app-dir/app-css/index.test.ts:388:13)

● app dir - css › sass support › server layouts › should support global sass/scss inside server layouts

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(222, 184, 135)"
Received: null

  487 |               `window.getComputedStyle(document.querySelector('#scss-server-layout')).color`
  488 |             )
> 489 |           ).toBe('rgb(222, 184, 135)')
      |             ^
  490 |         })
  491 |
  492 |         it('should support sass/scss modules inside server layouts', async () => {

  at Object.toBe (e2e/app-dir/app-css/index.test.ts:489:13)

● app dir - css › sass support › server pages › should support global sass/scss inside server pages

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(245, 222, 179)"
Received: null

  515 |               `window.getComputedStyle(document.querySelector('#sass-server-page')).color`
  516 |             )
> 517 |           ).toBe('rgb(245, 222, 179)')
      |             ^
  518 |           // .scss
  519 |           expect(
  520 |             await browser.eval(

  at Object.toBe (e2e/app-dir/app-css/index.test.ts:517:13)

● app dir - css › sass support › client layouts › should support global sass/scss inside client layouts

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(165, 42, 42)"
Received: null

  549 |               `window.getComputedStyle(document.querySelector('#sass-client-layout')).color`
  550 |             )
> 551 |           ).toBe('rgb(165, 42, 42)')
      |             ^
  552 |           // .scss
  553 |           expect(
  554 |             await browser.eval(

  at Object.toBe (e2e/app-dir/app-css/index.test.ts:551:13)

● app dir - css › sass support › client layouts › should support sass/scss modules inside client layouts

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(139, 0, 0)"
Received: null

  571 |               `window.getComputedStyle(document.querySelector('#scss-client-layout')).backgroundColor`
  572 |             )
> 573 |           ).toBe('rgb(139, 0, 0)')
      |             ^
  574 |         })
  575 |       })
  576 |

  at Object.toBe (e2e/app-dir/app-css/index.test.ts:573:13)

● app dir - css › sass support › client pages › should support sass/scss modules inside client pages

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(0, 255, 255)"
Received: null

  610 |               `window.getComputedStyle(document.querySelector('#scss-client-page')).backgroundColor`
  611 |             )
> 612 |           ).toBe('rgb(0, 255, 255)')
      |             ^
  613 |         })
  614 |       })
  615 |     })

  at Object.toBe (e2e/app-dir/app-css/index.test.ts:612:13)

● app dir - css › HMR › should not break HMR when CSS is imported in a server component

TIMED OUT: hmr!

undefined

Error: elementHandle.innerText: Element is not attached to the DOM

  626 |
  627 |   if (hardError) {
> 628 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  629 |   }
  630 |   return false
  631 | }

  at check (lib/next-test-utils.ts:628:11)
  at Object.<anonymous> (e2e/app-dir/app-css/index.test.ts:707:13)

● app dir - css › HMR › should support HMR with sass/scss

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(165, 42, 42)"
Received: null

  761 |               `window.getComputedStyle(document.querySelector('#sass-server-layout')).color`
  762 |             )
> 763 |           ).toBe('rgb(165, 42, 42)')
      |             ^
  764 |
  765 |           try {
  766 |             await next.patchFile(

  at Object.toBe (e2e/app-dir/app-css/index.test.ts:763:13)

● app dir - css › Suspensey CSS › should suspend on CSS imports if its slow on client navigation

elementHandle.click: Protocol error (DOM.scrollIntoViewIfNeeded): Cannot find context with specified id
=========================== logs ===========================
attempting click action
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
============================================================

  333 |   click() {
  334 |     return this.chain((el: ElementHandleExt) => {
> 335 |       return el.click().then(() => el)
      |                 ^
  336 |     })
  337 |   }
  338 |

  at click (lib/browsers/playwright.ts:335:17)
  at Object.<anonymous> (e2e/app-dir/app-css/index.test.ts:804:11)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/next-font/index.test.ts

  • next/font > app > import values > page with font
  • next/font > app > import values > page with local fonts
  • next/font > app > import values > Variable font without weight range
  • next/font > app-old > import values > page with font
  • next/font > app-old > import values > page with local fonts
  • next/font > app-old > import values > Variable font without weight range
Expand output

● next/font › app › import values › page with font

expect(received).toEqual(expected) // deep equality

- Expected  - 2
+ Received  + 2

  Object {
-   "className": StringMatching /^className__.*__.{8}$/,
+   "className": "open_sans_51ef63f8-module__po25MG__className",
    "style": Object {
      "fontFamily": StringMatching /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/,
      "fontStyle": "normal",
    },
-   "variable": StringMatching /^variable__.*__.{8}$/,
+   "variable": "open_sans_51ef63f8-module__po25MG__variable",
  }

  49 |
  50 |         // _app.js
> 51 |         expect(JSON.parse($('#app-open-sans').text())).toEqual({
     |                                                        ^
  52 |           className: expect.stringMatching(getClassNameRegex('className')),
  53 |           variable: expect.stringMatching(getClassNameRegex('variable')),
  54 |           style: {

  at Object.toEqual (e2e/next-font/index.test.ts:51:56)

● next/font › app › import values › page with local fonts

expect(received).toEqual(expected) // deep equality

- Expected  - 2
+ Received  + 2

  Object {
-   "className": StringMatching /^className__.*__.{8}$/,
+   "className": "open_sans_51ef63f8-module__po25MG__className",
    "style": Object {
      "fontFamily": StringMatching /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/,
      "fontStyle": "normal",
    },
-   "variable": StringMatching /^variable__.*__.{8}$/,
+   "variable": "open_sans_51ef63f8-module__po25MG__variable",
  }

  100 |
  101 |         // _app.js
> 102 |         expect(JSON.parse($('#app-open-sans').text())).toEqual({
      |                                                        ^
  103 |           className: expect.stringMatching(getClassNameRegex('className')),
  104 |           variable: expect.stringMatching(getClassNameRegex('variable')),
  105 |           style: {

  at Object.toEqual (e2e/next-font/index.test.ts:102:56)

● next/font › app › import values › Variable font without weight range

expect(received).toEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Object {
-   "className": StringMatching /^className__.*__.{8}$/,
+   "className": "nabla_abb2401d-module__ks7jmG__className",
    "style": Object {
      "fontFamily": StringMatching /^'__Nabla_.{6}', '__Nabla_Fallback_.{6}'$/,
      "fontStyle": "normal",
    },
  }

  140 |         const $ = cheerio.load(html)
  141 |
> 142 |         expect(JSON.parse($('#nabla').text())).toEqual({
      |                                                ^
  143 |           className: expect.stringMatching(getClassNameRegex('className')),
  144 |           style: {
  145 |             fontFamily: expect.stringMatching(

  at Object.toEqual (e2e/next-font/index.test.ts:142:48)

● next/font › app-old › import values › page with font

expect(received).toEqual(expected) // deep equality

- Expected  - 2
+ Received  + 2

  Object {
-   "className": StringMatching /^className__.*__.{8}$/,
+   "className": "open_sans_51ef63f8-module__po25MG__className",
    "style": Object {
      "fontFamily": StringMatching /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/,
      "fontStyle": "normal",
    },
-   "variable": StringMatching /^variable__.*__.{8}$/,
+   "variable": "open_sans_51ef63f8-module__po25MG__variable",
  }

  49 |
  50 |         // _app.js
> 51 |         expect(JSON.parse($('#app-open-sans').text())).toEqual({
     |                                                        ^
  52 |           className: expect.stringMatching(getClassNameRegex('className')),
  53 |           variable: expect.stringMatching(getClassNameRegex('variable')),
  54 |           style: {

  at Object.toEqual (e2e/next-font/index.test.ts:51:56)

● next/font › app-old › import values › page with local fonts

expect(received).toEqual(expected) // deep equality

- Expected  - 2
+ Received  + 2

  Object {
-   "className": StringMatching /^className__.*__.{8}$/,
+   "className": "open_sans_51ef63f8-module__po25MG__className",
    "style": Object {
      "fontFamily": StringMatching /^'__Open_Sans_.{6}', '__Open_Sans_Fallback_.{6}'$/,
      "fontStyle": "normal",
    },
-   "variable": StringMatching /^variable__.*__.{8}$/,
+   "variable": "open_sans_51ef63f8-module__po25MG__variable",
  }

  100 |
  101 |         // _app.js
> 102 |         expect(JSON.parse($('#app-open-sans').text())).toEqual({
      |                                                        ^
  103 |           className: expect.stringMatching(getClassNameRegex('className')),
  104 |           variable: expect.stringMatching(getClassNameRegex('variable')),
  105 |           style: {

  at Object.toEqual (e2e/next-font/index.test.ts:102:56)

● next/font › app-old › import values › Variable font without weight range

expect(received).toEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Object {
-   "className": StringMatching /^className__.*__.{8}$/,
+   "className": "nabla_abb2401d-module__ks7jmG__className",
    "style": Object {
      "fontFamily": StringMatching /^'__Nabla_.{6}', '__Nabla_Fallback_.{6}'$/,
      "fontStyle": "normal",
    },
  }

  140 |         const $ = cheerio.load(html)
  141 |
> 142 |         expect(JSON.parse($('#nabla').text())).toEqual({
      |                                                ^
  143 |           className: expect.stringMatching(getClassNameRegex('className')),
  144 |           style: {
  145 |             fontFamily: expect.stringMatching(

  at Object.toEqual (e2e/next-font/index.test.ts:142:48)

Read more about building and testing Next.js in contributing.md.

@ijjk
Copy link
Member

ijjk commented Oct 24, 2023

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary vercel/next.js kdy1/swap-css Change
buildDuration 10.3s 10.3s N/A
buildDurationCached 6s 6.6s ⚠️ +599ms
nodeModulesSize 199 MB 199 MB ⚠️ +6.71 kB
nextStartRea..uration (ms) 399ms 400ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js kdy1/swap-css Change
199-HASH.js gzip 29.1 kB 29.1 kB N/A
3f784ff6-HASH.js gzip 53.3 kB 53.3 kB N/A
494.HASH.js gzip 180 B 181 B N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 241 B 239 B N/A
main-HASH.js gzip 31.7 kB 31.7 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB
Overall change 46.9 kB 46.9 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js kdy1/swap-css Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js kdy1/swap-css Change
_app-HASH.js gzip 194 B 195 B N/A
_error-HASH.js gzip 182 B 181 B N/A
amp-HASH.js gzip 501 B 503 B N/A
css-HASH.js gzip 322 B 323 B N/A
dynamic-HASH.js gzip 2.5 kB 2.5 kB
edge-ssr-HASH.js gzip 253 B 255 B N/A
head-HASH.js gzip 348 B 347 B N/A
hooks-HASH.js gzip 369 B 368 B N/A
image-HASH.js gzip 4.28 kB 4.27 kB N/A
index-HASH.js gzip 256 B 256 B
link-HASH.js gzip 2.63 kB 2.63 kB N/A
routerDirect..HASH.js gzip 311 B 311 B
script-HASH.js gzip 384 B 383 B N/A
withRouter-HASH.js gzip 307 B 308 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.17 kB 3.17 kB
Client Build Manifests
vercel/next.js canary vercel/next.js kdy1/swap-css Change
_buildManifest.js gzip 486 B 484 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js kdy1/swap-css Change
index.html gzip 529 B 527 B N/A
link.html gzip 541 B 543 B N/A
withRouter.html gzip 524 B 523 B N/A
Overall change 0 B 0 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js kdy1/swap-css Change
edge-ssr.js gzip 92.4 kB 92.4 kB N/A
page.js gzip 145 kB 145 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js kdy1/swap-css Change
middleware-b..fest.js gzip 625 B 626 B N/A
middleware-r..fest.js gzip 150 B 151 B N/A
middleware.js gzip 24.8 kB 24.8 kB
edge-runtime..pack.js gzip 1.92 kB 1.92 kB
Overall change 26.7 kB 26.7 kB
Next Runtimes
vercel/next.js canary vercel/next.js kdy1/swap-css Change
app-page-exp...dev.js gzip 167 kB 167 kB
app-page-exp..prod.js gzip 93.2 kB 93.2 kB
app-page-tur..prod.js gzip 93.9 kB 93.9 kB
app-page-tur..prod.js gzip 88.5 kB 88.5 kB
app-page.run...dev.js gzip 137 kB 137 kB
app-page.run..prod.js gzip 87.9 kB 87.9 kB
app-route-ex...dev.js gzip 23.8 kB 23.8 kB
app-route-ex..prod.js gzip 16.4 kB 16.4 kB
app-route-tu..prod.js gzip 16.4 kB 16.4 kB
app-route-tu..prod.js gzip 16 kB 16 kB
app-route.ru...dev.js gzip 23.2 kB 23.2 kB
app-route.ru..prod.js gzip 16 kB 16 kB
pages-api-tu..prod.js gzip 9.37 kB 9.37 kB
pages-api.ru...dev.js gzip 9.64 kB 9.64 kB
pages-api.ru..prod.js gzip 9.37 kB 9.37 kB
pages-turbo...prod.js gzip 21.8 kB 21.8 kB
pages.runtim...dev.js gzip 22.5 kB 22.5 kB
pages.runtim..prod.js gzip 21.8 kB 21.8 kB
server.runti..prod.js gzip 49 kB 49 kB
Overall change 923 kB 923 kB
Commit: 69d5a49

@kdy1
Copy link
Member Author

kdy1 commented Nov 15, 2023

Closing in favor of #58471

@kdy1 kdy1 closed this Nov 15, 2023
@kdy1 kdy1 deleted the kdy1/swap-css branch November 15, 2023 21:58
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
created-by: Turbopack team PRs by the Turbopack team. locked Turbopack Related to Turbopack with Next.js. type: next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants