Do not rely on `cssText` #16611

Timer · 2020-08-26T19:41:34Z

Browsers do not reliably handle cssText for CSSRule classes returned from document.styleSheets.

For example, Safari's cssText property has been broken since 2013:
https://bugs.webkit.org/show_bug.cgi?id=107149

Browsers to not reliably handle `cssText` for `CSSRule` classes returned from `document.styleSheets`. For example, Safari's `cssText` property has been broken since 2013: https://bugs.webkit.org/show_bug.cgi?id=107149 --- Fixes vercel#16610

ijjk · 2020-08-26T19:50:29Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
buildDuration	11.9s	11.9s	⚠️ +11ms
nodeModulesSize	57.5 MB	57.5 MB	-1.18 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.152	2.176	⚠️ +0.02
/ avg req/sec	1161.85	1148.8	⚠️ -13.05
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.202	1.148	-0.05
/error-in-render avg req/sec	2079.01	2177.92	+98.91

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
677f882d2ed8..7f47.js gzip	10.3 kB	10.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-da593e2..abf1.js gzip	7.32 kB	7.24 kB	-79 B
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	-79 B

Client Bundles (main, webpack, commons) Modern Overall decrease ✓

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
677f882d2ed8..dule.js gzip	6.15 kB	6.15 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-34d17c2..dule.js gzip	6.39 kB	6.32 kB	-71 B
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.2 kB	-71 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-28298..e0c9.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-000f151..65d4.js gzip	1.29 kB	1.29 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.69 kB	7.69 kB	✓

Client Pages Modern

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-65c8a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-4cfda7a..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.35 kB	5.35 kB	✓

Client Build Manifests

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
index.html gzip	972 B	972 B	✓
link.html gzip	979 B	979 B	✓
withRouter.html gzip	964 B	964 B	✓
Overall change	2.92 kB	2.92 kB	✓

Diffs

Diff for main-08c9f8a..ce93003d7.js

@@ -323,29 +323,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         return [].slice.call(input);
       };
 
-      var pageLoader = new _pageLoader["default"](
-        buildId,
-        prefix,
-        page,
-        looseToArray(document.styleSheets)
-          .filter(function(el) {
-            return (
-              el.ownerNode &&
-              el.ownerNode.tagName === "LINK" &&
-              el.ownerNode.hasAttribute("data-n-p")
-            );
-          })
-          .map(function(sheet) {
-            return {
-              href: sheet.ownerNode.getAttribute("href"),
-              text: looseToArray(sheet.cssRules)
-                .map(function(r) {
-                  return r.cssText;
-                })
-                .join("")
-            };
-          })
-      );
+      var pageLoader = new _pageLoader["default"](buildId, prefix, page);
 
       var register = function register(_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
@@ -1681,16 +1659,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       }
 
       var PageLoader = /*#__PURE__*/ (function() {
-        function PageLoader(
-          buildId,
-          assetPrefix,
-          initialPage,
-          initialStyleSheets
-        ) {
+        function PageLoader(buildId, assetPrefix, initialPage) {
           _classCallCheck(this, PageLoader);
 
           this.initialPage = void 0;
-          this.initialStyleSheets = void 0;
           this.buildId = void 0;
           this.assetPrefix = void 0;
           this.pageCache = void 0;
@@ -1700,7 +1672,6 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           this.promisedSsgManifest = void 0;
           this.promisedDevPagesManifest = void 0;
           this.initialPage = initialPage;
-          this.initialStyleSheets = initialStyleSheets;
           this.buildId = buildId;
           this.assetPrefix = assetPrefix;
           this.pageCache = {};
@@ -2025,27 +1996,32 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
               var promisedDeps = // Shared styles will already be on the page:
                 route === "/_app" || false // We use `style-loader` in development:
-                  ? Promise.resolve([])
-                  : route === this.initialPage
-                  ? Promise.resolve(this.initialStyleSheets) // Tests that this does not block hydration:
+                  ? Promise.resolve([]) // Tests that this does not block hydration:
                   : // test/integration/css-fixtures/hydrate-without-deps/
-                    this.getDependencies(route)
-                      .then(function(deps) {
-                        return deps.filter(function(d) {
-                          return d.endsWith(".css");
-                        });
-                      })
-                      .then(function(cssFiles) {
-                        return (
-                          // These files should've already been fetched by now, so this
-                          // should resolve pretty much instantly.
-                          Promise.all(
-                            cssFiles.map(function(d) {
-                              return fetchStyleSheet(d);
+                    (route === this.initialPage
+                      ? Promise.resolve(
+                          [].slice
+                            .call(document.querySelectorAll("link[data-n-p]"))
+                            .map(function(e) {
+                              return e.getAttribute("href");
                             })
-                          )
-                        );
-                      });
+                        )
+                      : this.getDependencies(route).then(function(deps) {
+                          return deps.filter(function(d) {
+                            return d.endsWith(".css");
+                          });
+                        })
+                    ).then(function(cssFiles) {
+                      return (
+                        // These files should've already been fetched by now, so this
+                        // should resolve instantly.
+                        Promise.all(
+                          cssFiles.map(function(d) {
+                            return fetchStyleSheet(d);
+                          })
+                        )
+                      );
+                    });
               promisedDeps.then(
                 function(deps) {
                   return register(deps);

Diff for main-53b6374..43.module.js

@@ -241,24 +241,7 @@
 
       var looseToArray = input => [].slice.call(input);
 
-      var pageLoader = new _pageLoader.default(
-        buildId,
-        prefix,
-        page,
-        looseToArray(document.styleSheets)
-          .filter(
-            el =>
-              el.ownerNode &&
-              el.ownerNode.tagName === "LINK" &&
-              el.ownerNode.hasAttribute("data-n-p")
-          )
-          .map(sheet => ({
-            href: sheet.ownerNode.getAttribute("href"),
-            text: looseToArray(sheet.cssRules)
-              .map(r => r.cssText)
-              .join("")
-          }))
-      );
+      var pageLoader = new _pageLoader.default(buildId, prefix, page);
 
       var register = _ref => {
         var [r, f] = _ref;
@@ -1338,9 +1321,8 @@
       }
 
       class PageLoader {
-        constructor(buildId, assetPrefix, initialPage, initialStyleSheets) {
+        constructor(buildId, assetPrefix, initialPage) {
           this.initialPage = void 0;
-          this.initialStyleSheets = void 0;
           this.buildId = void 0;
           this.assetPrefix = void 0;
           this.pageCache = void 0;
@@ -1350,7 +1332,6 @@
           this.promisedSsgManifest = void 0;
           this.promisedDevPagesManifest = void 0;
           this.initialPage = initialPage;
-          this.initialStyleSheets = initialStyleSheets;
           this.buildId = buildId;
           this.assetPrefix = assetPrefix;
           this.pageCache = {};
@@ -1623,18 +1604,23 @@
 
           var promisedDeps = // Shared styles will already be on the page:
             route === "/_app" || false // We use `style-loader` in development:
-              ? Promise.resolve([])
-              : route === this.initialPage
-              ? Promise.resolve(this.initialStyleSheets) // Tests that this does not block hydration:
+              ? Promise.resolve([]) // Tests that this does not block hydration:
               : // test/integration/css-fixtures/hydrate-without-deps/
-                this.getDependencies(route)
-                  .then(deps => deps.filter(d => d.endsWith(".css")))
-                  .then((
-                    cssFiles // These files should've already been fetched by now, so this
-                  ) =>
-                    // should resolve pretty much instantly.
-                    Promise.all(cssFiles.map(d => fetchStyleSheet(d)))
-                  );
+                (route === this.initialPage
+                  ? Promise.resolve(
+                      [].slice
+                        .call(document.querySelectorAll("link[data-n-p]"))
+                        .map(e => e.getAttribute("href"))
+                    )
+                  : this.getDependencies(route).then(deps =>
+                      deps.filter(d => d.endsWith(".css"))
+                    )
+                ).then((
+                  cssFiles // These files should've already been fetched by now, so this
+                ) =>
+                  // should resolve instantly.
+                  Promise.all(cssFiles.map(d => fetchStyleSheet(d)))
+                );
           promisedDeps.then(
             deps => register(deps),
             error => {

Diff for index.html

@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      href="/_next/static/chunks/main-ab01a2feee63c40a7eda.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-08c9f8ab982ce93003d7.js"
+      src="/_next/static/chunks/main-acd71993db72b9788c3b.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      src="/_next/static/chunks/main-ab01a2feee63c40a7eda.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for link.html

@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      href="/_next/static/chunks/main-ab01a2feee63c40a7eda.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -87,13 +87,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-08c9f8ab982ce93003d7.js"
+      src="/_next/static/chunks/main-acd71993db72b9788c3b.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      src="/_next/static/chunks/main-ab01a2feee63c40a7eda.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for withRouter.html

@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      href="/_next/static/chunks/main-ab01a2feee63c40a7eda.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-08c9f8ab982ce93003d7.js"
+      src="/_next/static/chunks/main-acd71993db72b9788c3b.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      src="/_next/static/chunks/main-ab01a2feee63c40a7eda.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
buildDuration	13.6s	13.5s	-142ms
nodeModulesSize	57.5 MB	57.5 MB	-1.18 kB

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
677f882d2ed8..7f47.js gzip	10.3 kB	10.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-da593e2..abf1.js gzip	7.32 kB	N/A	N/A
webpack-e067..f178.js gzip	751 B	751 B	✓
main-c7c1581..cec2.js gzip	N/A	7.24 kB	N/A
Overall change	57.3 kB	57.3 kB	-79 B

Client Bundles (main, webpack, commons) Modern Overall decrease ✓

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
677f882d2ed8..dule.js gzip	6.15 kB	6.15 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-34d17c2..dule.js gzip	6.39 kB	N/A	N/A
webpack-07c5..dule.js gzip	751 B	751 B	✓
main-a8d947a..dule.js gzip	N/A	6.32 kB	N/A
Overall change	52.3 kB	52.2 kB	-71 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-28298..e0c9.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-000f151..65d4.js gzip	1.29 kB	1.29 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.69 kB	7.69 kB	✓

Client Pages Modern

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-65c8a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-4cfda7a..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.35 kB	5.35 kB	✓

Client Build Manifests

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.22 kB	4.22 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.07 MB	1.07 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.28 MB	5.28 MB	✓

Commit: ec76fc7

ijjk · 2020-08-26T20:21:23Z

Failing test suites

Commit: ec76fc7

test/integration/css/test/index.test.js

CSS Support > Page reload on CSS missing > Production Mode > should fall back to server-side transition on missing CSS

Expand output

● CSS Support › Page reload on CSS missing › Production Mode › should fall back to server-side transition on missing CSS

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  1308 |       }
  1309 | 
> 1310 |       it('should fall back to server-side transition on missing CSS', async () => {
       |       ^
  1311 |         const browser = await webdriver(appPort, '/')
  1312 |         try {
  1313 |           await checkBlackTitle(browser)

  at tests (integration/css/test/index.test.js:1310:7)
  at integration/css/test/index.test.js:1352:7
  at integration/css/test/index.test.js:1329:5
  at integration/css/test/index.test.js:1297:3

ijjk · 2020-08-27T01:58:20Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
buildDuration	11.3s	11.5s	⚠️ +207ms
nodeModulesSize	57.5 MB	57.5 MB	⚠️ +797 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.134	2.108	-0.03
/ avg req/sec	1171.42	1185.94	+14.52
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.179	1.153	-0.03
/error-in-render avg req/sec	2120.42	2167.73	+47.31

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
677f882d2ed8..7f47.js gzip	10.3 kB	10.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-da593e2..abf1.js gzip	7.32 kB	7.36 kB	⚠️ +34 B
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.4 kB	⚠️ +34 B

Client Bundles (main, webpack, commons) Modern Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
677f882d2ed8..dule.js gzip	6.15 kB	6.15 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-34d17c2..dule.js gzip	6.39 kB	6.42 kB	⚠️ +33 B
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	⚠️ +33 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-28298..e0c9.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-000f151..65d4.js gzip	1.29 kB	1.29 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.69 kB	7.69 kB	✓

Client Pages Modern

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-65c8a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-4cfda7a..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.35 kB	5.35 kB	✓

Client Build Manifests

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
index.html gzip	972 B	973 B	⚠️ +1 B
link.html gzip	979 B	979 B	✓
withRouter.html gzip	964 B	965 B	⚠️ +1 B
Overall change	2.92 kB	2.92 kB	⚠️ +2 B

Diffs

Diff for main-08c9f8a..ce93003d7.js

@@ -275,7 +275,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
       var _headManager = _interopRequireDefault(__webpack_require__("DqTX"));
 
-      var _pageLoader = _interopRequireDefault(__webpack_require__("zmvN"));
+      var _pageLoader = _interopRequireWildcard3(__webpack_require__("zmvN"));
 
       var _performanceRelayer = _interopRequireDefault(
         __webpack_require__("bGXG")
@@ -319,33 +319,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         asPath = (0, _router.delBasePath)(asPath);
       }
 
-      var looseToArray = function looseToArray(input) {
-        return [].slice.call(input);
-      };
-
-      var pageLoader = new _pageLoader["default"](
-        buildId,
-        prefix,
-        page,
-        looseToArray(document.styleSheets)
-          .filter(function(el) {
-            return (
-              el.ownerNode &&
-              el.ownerNode.tagName === "LINK" &&
-              el.ownerNode.hasAttribute("data-n-p")
-            );
-          })
-          .map(function(sheet) {
-            return {
-              href: sheet.ownerNode.getAttribute("href"),
-              text: looseToArray(sheet.cssRules)
-                .map(function(r) {
-                  return r.cssText;
-                })
-                .join("")
-            };
-          })
-      );
+      var pageLoader = new _pageLoader["default"](buildId, prefix, page);
 
       var register = function register(_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
@@ -1017,7 +991,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
             return false;
           }
 
-          var currentStyleTags = looseToArray(
+          var currentStyleTags = (0, _pageLoader.looseToArray)(
             document.querySelectorAll("style[data-n-href]")
           );
           var currentHrefs = new Set(
@@ -1054,7 +1028,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                 return s.href;
               })
             );
-            var currentStyleTags = looseToArray(
+            var currentStyleTags = (0, _pageLoader.looseToArray)(
               document.querySelectorAll("style[data-n-href]")
             );
             var currentHrefs = currentStyleTags.map(function(tag) {
@@ -1094,11 +1068,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               });
             } // Finally, clean up server rendered stylesheets:
 
-            looseToArray(document.querySelectorAll("link[data-n-p]")).forEach(
-              function(el) {
-                el.parentNode.removeChild(el);
-              }
-            ); // Force browser to recompute layout, which should prevent a flash of
+            (0, _pageLoader.looseToArray)(
+              document.querySelectorAll("link[data-n-p]")
+            ).forEach(function(el) {
+              el.parentNode.removeChild(el);
+            }); // Force browser to recompute layout, which should prevent a flash of
             // unstyled content:
 
             getComputedStyle(document.body, "height");
@@ -1581,7 +1555,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var _interopRequireDefault = __webpack_require__("TqRt");
 
       exports.__esModule = true;
-      exports["default"] = void 0;
+      exports["default"] = exports.looseToArray = void 0;
 
       var _mitt = _interopRequireDefault(__webpack_require__("dZ6Y"));
 
@@ -1605,6 +1579,33 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
       var _routeRegex = __webpack_require__("YTqd");
 
+      var looseToArray = function looseToArray(input) {
+        return [].slice.call(input);
+      };
+
+      exports.looseToArray = looseToArray;
+
+      function getInitialStylesheets() {
+        return looseToArray(document.styleSheets)
+          .filter(function(el) {
+            return (
+              el.ownerNode &&
+              el.ownerNode.tagName === "LINK" &&
+              el.ownerNode.hasAttribute("data-n-p")
+            );
+          })
+          .map(function(sheet) {
+            return {
+              href: sheet.ownerNode.getAttribute("href"),
+              text: looseToArray(sheet.cssRules)
+                .map(function(r) {
+                  return r.cssText;
+                })
+                .join("")
+            };
+          });
+      }
+
       function hasRel(rel, link) {
         try {
           link = document.createElement("link");
@@ -1681,16 +1682,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       }
 
       var PageLoader = /*#__PURE__*/ (function() {
-        function PageLoader(
-          buildId,
-          assetPrefix,
-          initialPage,
-          initialStyleSheets
-        ) {
+        function PageLoader(buildId, assetPrefix, initialPage) {
           _classCallCheck(this, PageLoader);
 
           this.initialPage = void 0;
-          this.initialStyleSheets = void 0;
           this.buildId = void 0;
           this.assetPrefix = void 0;
           this.pageCache = void 0;
@@ -1700,7 +1695,6 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           this.promisedSsgManifest = void 0;
           this.promisedDevPagesManifest = void 0;
           this.initialPage = initialPage;
-          this.initialStyleSheets = initialStyleSheets;
           this.buildId = buildId;
           this.assetPrefix = assetPrefix;
           this.pageCache = {};
@@ -2023,29 +2017,38 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                 });
               }
 
+              var isInitialLoad = route === this.initialPage;
               var promisedDeps = // Shared styles will already be on the page:
                 route === "/_app" || false // We use `style-loader` in development:
-                  ? Promise.resolve([])
-                  : route === this.initialPage
-                  ? Promise.resolve(this.initialStyleSheets) // Tests that this does not block hydration:
+                  ? Promise.resolve([]) // Tests that this does not block hydration:
                   : // test/integration/css-fixtures/hydrate-without-deps/
-                    this.getDependencies(route)
-                      .then(function(deps) {
-                        return deps.filter(function(d) {
-                          return d.endsWith(".css");
-                        });
-                      })
-                      .then(function(cssFiles) {
-                        return (
-                          // These files should've already been fetched by now, so this
-                          // should resolve pretty much instantly.
-                          Promise.all(
-                            cssFiles.map(function(d) {
-                              return fetchStyleSheet(d);
-                            })
-                          )
-                        );
-                      });
+                    (isInitialLoad
+                      ? Promise.resolve(
+                          looseToArray(
+                            document.querySelectorAll("link[data-n-p]")
+                          ).map(function(e) {
+                            return e.getAttribute("href");
+                          })
+                        )
+                      : this.getDependencies(route).then(function(deps) {
+                          return deps.filter(function(d) {
+                            return d.endsWith(".css");
+                          });
+                        })
+                    ).then(function(cssFiles) {
+                      return (
+                        // These files should've already been fetched by now, so this
+                        // should resolve instantly.
+                        Promise.all(
+                          cssFiles.map(function(d) {
+                            return fetchStyleSheet(d);
+                          })
+                        )["catch"](function(err) {
+                          if (isInitialLoad) return getInitialStylesheets();
+                          throw err;
+                        })
+                      );
+                    });
               promisedDeps.then(
                 function(deps) {
                   return register(deps);

Diff for main-53b6374..43.module.js

@@ -193,7 +193,7 @@
 
       var _headManager = _interopRequireDefault(__webpack_require__("DqTX"));
 
-      var _pageLoader = _interopRequireDefault(__webpack_require__("zmvN"));
+      var _pageLoader = _interopRequireWildcard3(__webpack_require__("zmvN"));
 
       var _performanceRelayer = _interopRequireDefault(
         __webpack_require__("bGXG")
@@ -239,26 +239,7 @@
         asPath = (0, _router.delBasePath)(asPath);
       }
 
-      var looseToArray = input => [].slice.call(input);
-
-      var pageLoader = new _pageLoader.default(
-        buildId,
-        prefix,
-        page,
-        looseToArray(document.styleSheets)
-          .filter(
-            el =>
-              el.ownerNode &&
-              el.ownerNode.tagName === "LINK" &&
-              el.ownerNode.hasAttribute("data-n-p")
-          )
-          .map(sheet => ({
-            href: sheet.ownerNode.getAttribute("href"),
-            text: looseToArray(sheet.cssRules)
-              .map(r => r.cssText)
-              .join("")
-          }))
-      );
+      var pageLoader = new _pageLoader.default(buildId, prefix, page);
 
       var register = _ref => {
         var [r, f] = _ref;
@@ -747,7 +728,7 @@
             return false;
           }
 
-          var currentStyleTags = looseToArray(
+          var currentStyleTags = (0, _pageLoader.looseToArray)(
             document.querySelectorAll("style[data-n-href]")
           );
           var currentHrefs = new Set(
@@ -777,7 +758,7 @@
             !canceled
           ) {
             var desiredHrefs = new Set(styleSheets.map(s => s.href));
-            var currentStyleTags = looseToArray(
+            var currentStyleTags = (0, _pageLoader.looseToArray)(
               document.querySelectorAll("style[data-n-href]")
             );
             var currentHrefs = currentStyleTags.map(tag =>
@@ -817,11 +798,11 @@
               });
             } // Finally, clean up server rendered stylesheets:
 
-            looseToArray(document.querySelectorAll("link[data-n-p]")).forEach(
-              el => {
-                el.parentNode.removeChild(el);
-              }
-            ); // Force browser to recompute layout, which should prevent a flash of
+            (0, _pageLoader.looseToArray)(
+              document.querySelectorAll("link[data-n-p]")
+            ).forEach(el => {
+              el.parentNode.removeChild(el);
+            }); // Force browser to recompute layout, which should prevent a flash of
             // unstyled content:
 
             getComputedStyle(document.body, "height");
@@ -1240,7 +1221,7 @@
       var _interopRequireDefault = __webpack_require__("TqRt");
 
       exports.__esModule = true;
-      exports.default = void 0;
+      exports.default = exports.looseToArray = void 0;
 
       var _mitt = _interopRequireDefault(__webpack_require__("dZ6Y"));
 
@@ -1264,6 +1245,26 @@
 
       var _routeRegex = __webpack_require__("YTqd");
 
+      var looseToArray = input => [].slice.call(input);
+
+      exports.looseToArray = looseToArray;
+
+      function getInitialStylesheets() {
+        return looseToArray(document.styleSheets)
+          .filter(
+            el =>
+              el.ownerNode &&
+              el.ownerNode.tagName === "LINK" &&
+              el.ownerNode.hasAttribute("data-n-p")
+          )
+          .map(sheet => ({
+            href: sheet.ownerNode.getAttribute("href"),
+            text: looseToArray(sheet.cssRules)
+              .map(r => r.cssText)
+              .join("")
+          }));
+      }
+
       function hasRel(rel, link) {
         try {
           link = document.createElement("link");
@@ -1338,9 +1339,8 @@
       }
 
       class PageLoader {
-        constructor(buildId, assetPrefix, initialPage, initialStyleSheets) {
+        constructor(buildId, assetPrefix, initialPage) {
           this.initialPage = void 0;
-          this.initialStyleSheets = void 0;
           this.buildId = void 0;
           this.assetPrefix = void 0;
           this.pageCache = void 0;
@@ -1350,7 +1350,6 @@
           this.promisedSsgManifest = void 0;
           this.promisedDevPagesManifest = void 0;
           this.initialPage = initialPage;
-          this.initialStyleSheets = initialStyleSheets;
           this.buildId = buildId;
           this.assetPrefix = assetPrefix;
           this.pageCache = {};
@@ -1621,20 +1620,31 @@
             });
           }
 
+          var isInitialLoad = route === this.initialPage;
           var promisedDeps = // Shared styles will already be on the page:
             route === "/_app" || false // We use `style-loader` in development:
-              ? Promise.resolve([])
-              : route === this.initialPage
-              ? Promise.resolve(this.initialStyleSheets) // Tests that this does not block hydration:
+              ? Promise.resolve([]) // Tests that this does not block hydration:
               : // test/integration/css-fixtures/hydrate-without-deps/
-                this.getDependencies(route)
-                  .then(deps => deps.filter(d => d.endsWith(".css")))
-                  .then((
-                    cssFiles // These files should've already been fetched by now, so this
-                  ) =>
-                    // should resolve pretty much instantly.
-                    Promise.all(cssFiles.map(d => fetchStyleSheet(d)))
-                  );
+                (isInitialLoad
+                  ? Promise.resolve(
+                      looseToArray(
+                        document.querySelectorAll("link[data-n-p]")
+                      ).map(e => e.getAttribute("href"))
+                    )
+                  : this.getDependencies(route).then(deps =>
+                      deps.filter(d => d.endsWith(".css"))
+                    )
+                ).then((
+                  cssFiles // These files should've already been fetched by now, so this
+                ) =>
+                  // should resolve instantly.
+                  Promise.all(cssFiles.map(d => fetchStyleSheet(d))).catch(
+                    err => {
+                      if (isInitialLoad) return getInitialStylesheets();
+                      throw err;
+                    }
+                  )
+                );
           promisedDeps.then(
             deps => register(deps),
             error => {

Diff for index.html

@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      href="/_next/static/chunks/main-62d89d6c0fd63280aa76.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-08c9f8ab982ce93003d7.js"
+      src="/_next/static/chunks/main-a169554ad39d61f3e3ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      src="/_next/static/chunks/main-62d89d6c0fd63280aa76.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for link.html

@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      href="/_next/static/chunks/main-62d89d6c0fd63280aa76.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -87,13 +87,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-08c9f8ab982ce93003d7.js"
+      src="/_next/static/chunks/main-a169554ad39d61f3e3ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      src="/_next/static/chunks/main-62d89d6c0fd63280aa76.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Diff for withRouter.html

@@ -7,7 +7,7 @@
     <noscript data-n-css="true"></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      href="/_next/static/chunks/main-62d89d6c0fd63280aa76.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -82,13 +82,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-08c9f8ab982ce93003d7.js"
+      src="/_next/static/chunks/main-a169554ad39d61f3e3ab.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-53b6374c64b7ade65c43.module.js"
+      src="/_next/static/chunks/main-62d89d6c0fd63280aa76.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
buildDuration	13.5s	13.2s	-278ms
nodeModulesSize	57.5 MB	57.5 MB	⚠️ +797 B

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
677f882d2ed8..7f47.js gzip	10.3 kB	10.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-da593e2..abf1.js gzip	7.32 kB	N/A	N/A
webpack-e067..f178.js gzip	751 B	751 B	✓
main-dc83a65..69bb.js gzip	N/A	7.36 kB	N/A
Overall change	57.3 kB	57.4 kB	⚠️ +34 B

Client Bundles (main, webpack, commons) Modern Overall increase ⚠️

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
677f882d2ed8..dule.js gzip	6.15 kB	6.15 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-34d17c2..dule.js gzip	6.39 kB	N/A	N/A
webpack-07c5..dule.js gzip	751 B	751 B	✓
main-529b07f..dule.js gzip	N/A	6.42 kB	N/A
Overall change	52.3 kB	52.3 kB	⚠️ +33 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-28298..e0c9.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-000f151..65d4.js gzip	1.29 kB	1.29 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.69 kB	7.69 kB	✓

Client Pages Modern

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-65c8a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-4cfda7a..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.35 kB	5.35 kB	✓

Client Build Manifests

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	Timer/next.js hotfix/do-not-rely-on-csstext	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.22 kB	4.22 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.07 MB	1.07 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.28 MB	5.28 MB	✓

Commit: e9feb03

Timer added 3 commits August 26, 2020 15:39

Do not rely on cssText

5c6ba46

Browsers to not reliably handle `cssText` for `CSSRule` classes returned from `document.styleSheets`. For example, Safari's `cssText` property has been broken since 2013: https://bugs.webkit.org/show_bug.cgi?id=107149 --- Fixes vercel#16610

remove extra comment

23b0c5d

remove "pretty much" because it would be instant

ec76fc7

Timer requested review from ijjk, lfades and timneutkens as code owners August 26, 2020 19:41

ijjk added the type: next label Aug 26, 2020

ijjk previously approved these changes Aug 26, 2020

View reviewed changes

Fix failed test case

e9feb03

Timer dismissed ijjk’s stale review via e9feb03 August 27, 2020 01:49

Timer merged commit 328abb7 into vercel:canary Aug 27, 2020

Timer deleted the hotfix/do-not-rely-on-csstext branch August 27, 2020 02:13

kwoncharles mentioned this pull request Nov 10, 2020

Next.js fetches same css file twice #19009

Closed

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Do not rely on `cssText` #16611

Do not rely on `cssText` #16611

Timer commented Aug 26, 2020 •

edited by ijjk

Loading

ijjk commented Aug 26, 2020

Diffs

ijjk commented Aug 26, 2020

ijjk commented Aug 27, 2020

Diffs

Do not rely on cssText #16611

Do not rely on cssText #16611

Conversation

Timer commented Aug 26, 2020 • edited by ijjk Loading

ijjk commented Aug 26, 2020

Stats from current PR

Diffs

ijjk commented Aug 26, 2020

Failing test suites

ijjk commented Aug 27, 2020

Stats from current PR

Diffs

Do not rely on `cssText` #16611

Do not rely on `cssText` #16611

Timer commented Aug 26, 2020 •

edited by ijjk

Loading