Ensure CSS Is Preloaded First (#9486)

* Ensure CSS Is Preloaded First * add test polyfills

Ensure CSS Is Preloaded First (#9486)
* Ensure CSS Is Preloaded First * add test polyfills
8e7ddeb6 · Joe Haddad · GitHub · 7ff95951 · 8e7ddeb6 · 8e7ddeb6
隐藏空白更改
内联并排

Showing with 46 addition and 1 deletion

packages/next/pages/_document.tsx packages/next/pages/_document.tsx +1 -1

test/integration/css/test/index.test.js test/integration/css/test/index.test.js +45 -0

未找到文件。
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -474,6 +474,7 @@ export class Head extends Component<
                href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
              />
            )}
+            {this.getCssLinks()}
            {page !== '/_error' && (
              <link
                rel="preload"
@@ -513,7 +514,6 @@ export class Head extends Component<
                // (by default, style-loader injects at the bottom of <head />)
                <noscript id="__next_css__DO_NOT_USE__" />
              )}
-            {this.getCssLinks()}
            {styles || null}
          </>
        )}

--- a/test/integration/css/test/index.test.js
+++ b/test/integration/css/test/index.test.js
@@ -21,6 +21,44 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 2

 const fixturesDir = join(__dirname, '..', 'fixtures')

+if (!Array.prototype.flat) {
+  // eslint-disable-next-line no-extend-native
+  Object.defineProperty(Array.prototype, 'flat', {
+    configurable: true,
+    value: function flat() {
+      var depth = isNaN(arguments[0]) ? 1 : Number(arguments[0])
+
+      return depth
+        ? Array.prototype.reduce.call(
+            this,
+            function(acc, cur) {
+              if (Array.isArray(cur)) {
+                acc.push.apply(acc, flat.call(cur, depth - 1))
+              } else {
+                acc.push(cur)
+              }
+
+              return acc
+            },
+            []
+          )
+        : Array.prototype.slice.call(this)
+    },
+    writable: true,
+  })
+}
+
+if (!Array.prototype.flatMap) {
+  // eslint-disable-next-line no-extend-native
+  Object.defineProperty(Array.prototype, 'flatMap', {
+    configurable: true,
+    value: function flatMap() {
+      return Array.prototype.map.apply(this, arguments).flat()
+    },
+    writable: true,
+  })
+}
+
 describe('CSS Support', () => {
  describe('Basic Global Support', () => {
    const appDir = join(fixturesDir, 'single-global')
@@ -476,6 +514,13 @@ describe('CSS Support', () => {
      const cssSheet = $('link[rel="stylesheet"]')
      expect(cssSheet.length).toBe(1)
      expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
+
+      /* ensure CSS preloaded first */
+      const allPreloads = [].slice.call($('link[rel="preload"]'))
+      const styleIndexes = allPreloads.flatMap((p, i) =>
+        p.attribs.as === 'style' ? i : []
+      )
+      expect(styleIndexes).toEqual([0])
    })
  })