remove ssr link injection and css flight

vercel · Jul 11, 2022 · e48e739 · e48e739
1 parent 94bd4e8
commit e48e739
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 38 deletions.
diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts
@@ -187,15 +187,15 @@ export class FlightManifestPlugin {
           .filter((name) => name !== null)
 
         // Get all CSS files imported from the module's dependencies.
-        const visitedCss = new Set()
+        const visitedModule = new Set()
         const cssChunks: Set<string> = new Set()
 
         function collectClientImportedCss(module: any) {
           if (!module) return
 
           const modRequest = module.userRequest
-          if (visitedCss.has(modRequest)) return
-          visitedCss.add(modRequest)
+          if (visitedModule.has(modRequest)) return
+          visitedModule.add(modRequest)
 
           if (/\.css$/.test(modRequest)) {
             // collect relative imported css chunks

diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx
@@ -186,7 +186,9 @@ function useInitialServerResponse(cacheKey: string) {
         buffer = buffer.slice(index + 1)
         loadCssFromStreamData(line)
       }
-      controller.enqueue(chunk)
+      if (!data.startsWith('CSS:')) {
+        controller.enqueue(chunk)
+      }
     },
     flush() {
       loadCssFromStreamData(buffer)

diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx
@@ -125,7 +125,6 @@ function useFlightResponse(
     rscCache.set(id, entry)
 
     let bootstrapped = false
-    let remainingFlightResponse = ''
     const forwardReader = forwardStream.getReader()
     const writer = writable.getWriter()
     function process() {
@@ -145,40 +144,11 @@ function useFlightResponse(
           writer.close()
         } else {
           const responsePartial = decodeText(value)
-          const css = responsePartial
-            .split('\n')
-            .map((partialLine) => {
-              const line = remainingFlightResponse + partialLine
-              remainingFlightResponse = ''
-
-              try {
-                const match = line.match(/^M\d+:(.+)/)
-                if (match) {
-                  return JSON.parse(match[1])
-                    .chunks.filter((chunkId: string) =>
-                      chunkId.endsWith('.css')
-                    )
-                    .map(
-                      (file: string) =>
-                        `<link rel="stylesheet" href="/_next/${file}">`
-                    )
-                    .join('')
-                }
-                return ''
-              } catch (err) {
-                // The JSON is partial
-                remainingFlightResponse = line
-                return ''
-              }
-            })
-            .join('')
-
           writer.write(
             encodeText(
-              css +
-                `<script>(self.__next_s=self.__next_s||[]).push(${htmlEscapeJsonString(
-                  JSON.stringify([1, id, responsePartial])
-                )})</script>`
+              `<script>(self.__next_s=self.__next_s||[]).push(${htmlEscapeJsonString(
+                JSON.stringify([1, id, responsePartial])
+              )})</script>`
             )
           )
           process()

diff --git a/test/e2e/app-dir/app/app/dashboard/page.server.js b/test/e2e/app-dir/app/app/dashboard/page.server.js
@@ -1,7 +1,7 @@
 export default function DashboardPage(props) {
   return (
     <>
-      <p>hello from app/dashboard</p>
+      <p className="p">hello from app/dashboard</p>
       <p className="green">this is green</p>
     </>
   )

diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
@@ -393,6 +393,24 @@ describe('app dir', () => {
   })
 
   describe('css support', () => {
+    it('should support global css inside server component layouts', async () => {
+      const browser = await webdriver(next.url, '/dashboard')
+
+      // Should body text in red
+      expect(
+        await browser.eval(
+          `window.getComputedStyle(document.querySelector('.p')).color`
+        )
+      ).toBe('rgb(255, 0, 0)')
+
+      // Should inject global css for .green selectors
+      expect(
+        await browser.eval(
+          `window.getComputedStyle(document.querySelector('.green')).color`
+        )
+      ).toBe('rgb(0, 128, 0)')
+    })
+
     it('should support css modules inside client layouts', async () => {
       const browser = await webdriver(next.url, '/client-nested')