feature(gatsby): Extract non-css-in-js css and add add to <head> when SSRing in dev (#28471) (#28856)

GatsbyJS Bot · KyleAMathews · web-flow · commit 883d1847d494 · 2021-01-05T06:31:24.000-05:00
* feature(gatsby): Pause dev-ssr watching between page loads to avoid slowing down regular develop-js HMR * update snapshot * Don't double-resolve + add activity for building the SSR bundle * Add timeout for tests to ensure that dev server has time to bundle SSR + remove activity timers as not helpful * feature(gatsby): Extract and add CSS when SSRing in dev * Remove commented out code * get tests passing * WIP * Got hot-reloading working w/ mini-css-extract-plugin * remove mistakenly added file * remove change to yarn.lock * revert other mistakenly added files * Add an async module to test against * fix async module * Add postcss/tailwind * write webpack config for easy comparisons * that was a lot easier than I thought — just set hmr:true for non-production sites * cleanups * Don't need this since we're using <link> not <style> * pass in port * remove dev css from test comparisons * Update snapshots + add tailwind * cleanups * remove discarded changes * Move changes behind flag * Undo unnecesary changes * Update tests for signature change * Move more code behind the flag * dynamically set absolute URL for css files so works wherever it's hosted * start relative than make absolute * Remove now unused port * Remove changes from #28394 * use @pieh's suggested refactor in https://github.com/gatsbyjs/gatsby/pull/28471/files\#r546803732 * pass naming options for extractText in via options * Update packages/gatsby/src/utils/webpack.config.js Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com> * Update snapshot * Stop Jest from chocking on import of css * turned out we didn't need this * test(ssr): ignore src/test file (those are not tests) * test(ssr): update snapshot after removing inline script modyfing href Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com> (cherry picked from commit 121ccbf) Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>
diff --git a/integration-tests/ssr/__mocks__/styleMock.js b/integration-tests/ssr/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap b/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SSR is run for a page when it is requested 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"><div>Hello world</div></div><div id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
+exports[`SSR is run for a page when it is requested 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><link data-identity=\\"gatsby-dev-css\\" rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"/commons.css\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"><div><h1 class=\\"hi\\">Hello world</h1></div></div><div id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
 
 exports[`SSR it generates an error page correctly 1`] = `
 "<head>
diff --git a/integration-tests/ssr/__tests__/ssr.js b/integration-tests/ssr/__tests__/ssr.js
@@ -53,5 +53,5 @@ describe(`SSR`, () => {
         }, 400)
       }, 400)
     })
-  })
+  }, 15000)
 })
diff --git a/integration-tests/ssr/gatsby-browser.js b/integration-tests/ssr/gatsby-browser.js
@@ -0,0 +1 @@
+import "./sample.css"
diff --git a/integration-tests/ssr/gatsby-config.js b/integration-tests/ssr/gatsby-config.js
@@ -6,5 +6,5 @@ module.exports = {
     github: `sidharthachatterjee`,
     moreInfo: `Sid is amazing`,
   },
-  plugins: [],
+  plugins: ["gatsby-plugin-postcss"],
 }
diff --git a/integration-tests/ssr/jest.config.js b/integration-tests/ssr/jest.config.js
@@ -1,3 +1,14 @@
 module.exports = {
-  testPathIgnorePatterns: [`/node_modules/`, `__tests__/fixtures`, `.cache`],
+  testPathIgnorePatterns: [
+    `/node_modules/`,
+    `__tests__/fixtures`,
+    `.cache`,
+    `src/test`,
+  ],
+  transform: {
+    "^.+\\.[jt]sx?$": `<rootDir>../../jest-transformer.js`,
+  },
+  moduleNameMapper: {
+    "\\.(css)$": `<rootDir>/__mocks__/styleMock.js`,
+  },
 }
diff --git a/integration-tests/ssr/package.json b/integration-tests/ssr/package.json
@@ -8,8 +8,10 @@
   },
   "dependencies": {
     "gatsby": "^2.27.0",
+    "gatsby-plugin-postcss": "^3.3.0",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "tailwindcss": "1"
   },
   "devDependencies": {
     "cross-env": "^5.0.2",
diff --git a/integration-tests/ssr/postcss.config.js b/integration-tests/ssr/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer")],
+}
diff --git a/integration-tests/ssr/sample.css b/integration-tests/ssr/sample.css
@@ -0,0 +1,6 @@
+body {
+  background: tomato;
+  color: black;
+  font-style: italic;
+  font-weight: 400;
+}
diff --git a/integration-tests/ssr/src/pages/index.js b/integration-tests/ssr/src/pages/index.js
@@ -1,5 +1,6 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
+const lazyImport = import(`../test`)
 
 export default function Inline() {
   const { site } = useStaticQuery(graphql`
@@ -11,5 +12,9 @@ export default function Inline() {
       }
     }
   `)
-  return <div>{site.siteMetadata.title}</div>
+  return (
+    <div>
+      <h1 className="hi">{site.siteMetadata.title}</h1>
+    </div>
+  )
 }
diff --git a/integration-tests/ssr/src/pages/usingtailwind.js b/integration-tests/ssr/src/pages/usingtailwind.js
@@ -0,0 +1,4 @@
+import React from "react"
+import "../styles/tailwind.css"
+
+export default () => <h1 className="text-3xl">This is a 3xl text</h1>
diff --git a/integration-tests/ssr/src/styles/tailwind.css b/integration-tests/ssr/src/styles/tailwind.css
@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
diff --git a/integration-tests/ssr/src/test.css b/integration-tests/ssr/src/test.css
@@ -0,0 +1,3 @@
+.hi {
+  color: blue;
+}
diff --git a/integration-tests/ssr/src/test.js b/integration-tests/ssr/src/test.js
@@ -0,0 +1 @@
+import "./test.css"
diff --git a/integration-tests/ssr/tailwind.config.js b/integration-tests/ssr/tailwind.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  purge: [
+    './src/**/*.js',
+  ],
+  theme: {
+    extend: {}
+  },
+  variants: {},
+  plugins: []
+}
diff --git a/integration-tests/ssr/test-output.js b/integration-tests/ssr/test-output.js
@@ -21,8 +21,10 @@
       const $ = cheerio.load(htmlStr)
       // There are many script tag differences
       $(`script`).remove()
-      // Only added in production. Dev uses css-loader
+      // Only added in production
       $(`#gatsby-global-css`).remove()
+      // Only added in development
+      $(`link[data-identity='gatsby-dev-css']`).remove()
       // Only in prod
       $(`link[rel="preload"]`).remove()
       // Only in prod
diff --git a/packages/gatsby/cache-dir/__tests__/static-entry.js b/packages/gatsby/cache-dir/__tests__/static-entry.js
@@ -2,7 +2,6 @@ import React from "react"
 import fs from "fs"
 const { join } = require(`path`)
 
-import ssrDevelopStaticEntry from "../ssr-develop-static-entry"
 import developStaticEntry from "../develop-static-entry"
 
 jest.mock(`fs`, () => {
@@ -22,7 +21,7 @@ jest.mock(
   () => {
     return {
       ssrComponents: {
-        "page-component---src-pages-test-js": () => null,
+        "page-component---src-pages-about-js": () => null,
       },
     }
   },
@@ -151,8 +150,27 @@ const fakeComponentsPluginFactory = type => {
   }
 }
 
+const SSR_DEV_MOCK_FILE_INFO = {
+  [`${process.cwd()}/public/webpack.stats.json`]: `{}`,
+  [join(
+    process.cwd(),
+    `/public/page-data/about/page-data.json`
+  )]: JSON.stringify({
+    componentChunkName: `page-component---src-pages-about-js`,
+    path: `/about/`,
+    webpackCompilationHash: `1234567890abcdef1234`,
+    staticQueryHashes: [],
+  }),
+  [join(process.cwd(), `/public/page-data/app-data.json`)]: JSON.stringify({
+    webpackCompilationHash: `1234567890abcdef1234`,
+  }),
+}
+
 describe(`develop-static-entry`, () => {
+  let ssrDevelopStaticEntry
   beforeEach(() => {
+    fs.readFileSync.mockImplementation(file => SSR_DEV_MOCK_FILE_INFO[file])
+    ssrDevelopStaticEntry = require(`../ssr-develop-static-entry`).default
     global.__PATH_PREFIX__ = ``
     global.__BASE_PATH__ = ``
     global.__ASSET_PREFIX__ = ``
diff --git a/packages/gatsby/cache-dir/ssr-develop-static-entry.js b/packages/gatsby/cache-dir/ssr-develop-static-entry.js
@@ -1,7 +1,7 @@
 import React from "react"
 import fs from "fs"
 import { renderToString, renderToStaticMarkup } from "react-dom/server"
-import { merge } from "lodash"
+import { get, merge, isObject, flatten, uniqBy, concat } from "lodash"
 import { join } from "path"
 import apiRunner from "./api-runner-ssr"
 import { grabMatchParams } from "./find-path"
@@ -20,6 +20,10 @@ const testRequireError = (moduleName, err) => {
   return regex.test(firstLine)
 }
 
+const stats = JSON.parse(
+  fs.readFileSync(`${process.cwd()}/public/webpack.stats.json`, `utf-8`)
+)
+
 let Html
 try {
   Html = require(`../src/html`)
@@ -111,7 +115,66 @@ export default (pagePath, isClientOnlyPage, callback) => {
 
     const pageData = getPageData(pagePath)
 
-    const componentChunkName = pageData?.componentChunkName
+    const { componentChunkName, staticQueryHashes = [] } = pageData
+
+    let scriptsAndStyles = flatten(
+      [`commons`].map(chunkKey => {
+        const fetchKey = `assetsByChunkName[${chunkKey}]`
+
+        let chunks = get(stats, fetchKey)
+        const namedChunkGroups = get(stats, `namedChunkGroups`)
+
+        if (!chunks) {
+          return null
+        }
+
+        chunks = chunks.map(chunk => {
+          if (chunk === `/`) {
+            return null
+          }
+          return { rel: `preload`, name: chunk }
+        })
+
+        namedChunkGroups[chunkKey].assets.forEach(asset =>
+          chunks.push({ rel: `preload`, name: asset })
+        )
+
+        const childAssets = namedChunkGroups[chunkKey].childAssets
+        for (const rel in childAssets) {
+          chunks = concat(
+            chunks,
+            childAssets[rel].map(chunk => {
+              return { rel, name: chunk }
+            })
+          )
+        }
+
+        return chunks
+      })
+    )
+      .filter(s => isObject(s))
+      .sort((s1, s2) => (s1.rel == `preload` ? -1 : 1)) // given priority to preload
+
+    scriptsAndStyles = uniqBy(scriptsAndStyles, item => item.name)
+
+    const styles = scriptsAndStyles.filter(
+      style => style.name && style.name.endsWith(`.css`)
+    )
+
+    styles
+      .slice(0)
+      .reverse()
+      .forEach(style => {
+        headComponents.unshift(
+          <link
+            data-identity={`gatsby-dev-css`}
+            key={style.name}
+            rel="stylesheet"
+            type="text/css"
+            href={`${__PATH_PREFIX__}/${style.name}`}
+          />
+        )
+      })
 
     const createElement = React.createElement
 
diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
@@ -195,12 +195,28 @@ export const createWebpackUtils = (
     },
 
     miniCssExtract: (options = {}) => {
-      return {
-        options,
-        // use MiniCssExtractPlugin only on production builds
-        loader: PRODUCTION
-          ? MiniCssExtractPlugin.loader
-          : require.resolve(`style-loader`),
+      if (PRODUCTION) {
+        // production always uses MiniCssExtractPlugin
+        return {
+          loader: MiniCssExtractPlugin.loader,
+          options,
+        }
+      } else if (process.env.GATSBY_EXPERIMENTAL_DEV_SSR) {
+        // develop with ssr also uses MiniCssExtractPlugin
+        return {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            ...options,
+            // enable hmr for browser bundle, ssr bundle doesn't need it
+            hmr: stage === `develop`,
+          },
+        }
+      } else {
+        // develop without ssr is using style-loader
+        return {
+          loader: require.resolve(`style-loader`),
+          options,
+        }
       }
     },
 
@@ -690,8 +706,6 @@ export const createWebpackUtils = (
 
   plugins.extractText = (options: any): Plugin =>
     new MiniCssExtractPlugin({
-      filename: `[name].[contenthash].css`,
-      chunkFilename: `[name].[contenthash].css`,
       ...options,
     })
 
diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
@@ -230,10 +230,21 @@ module.exports = async (
             plugins.eslintGraphqlSchemaReload(),
           ])
           .filter(Boolean)
+        if (process.env.GATSBY_EXPERIMENTAL_DEV_SSR) {
+          // Don't use the default mini-css-extract-plugin setup as that
+          // breaks hmr.
+          configPlugins.push(
+            plugins.extractText({ filename: `[name].css` }),
+            plugins.extractStats()
+          )
+        }
         break
       case `build-javascript`: {
         configPlugins = configPlugins.concat([
-          plugins.extractText(),
+          plugins.extractText({
+            filename: `[name].[contenthash].css`,
+            chunkFilename: `[name].[contenthash].css`,
+          }),
           // Write out stats object mapping named dynamic imports (aka page
           // components) to all their async chunks.
           plugins.extractStats(),

-Original file line number
+Diff line change
         }, 400)
       }, 400)
     })
 -  })
 +  }, 15000)
 })
Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,5 @@ module.exports = {`
`6`	`6`	github: `sidharthachatterjee`,
`7`	`7`	moreInfo: `Sid is amazing`,
`8`	`8`	`},`
`9`		`- plugins: [],`
	`9`	`+ plugins: ["gatsby-plugin-postcss"],`
`10`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ plugins: [require("tailwindcss"), require("autoprefixer")],`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`import React from "react"`
`2`	`2`	`import { useStaticQuery, graphql } from "gatsby"`
	`3`	+const lazyImport = import(`../test`)
`3`	`4`
`4`	`5`	`export default function Inline() {`
`5`	`6`	const { site } = useStaticQuery(graphql`
`@@ -11,5 +12,9 @@ export default function Inline() {`
`11`	`12`	`}`
`12`	`13`	`}`
`13`	`14`	`)
`14`		`- return <div>{site.siteMetadata.title}</div>`
	`15`	`+ return (`
	`16`	`+ <div>`
	`17`	`+ <h1 className="hi">{site.siteMetadata.title}</h1>`
	`18`	`+ </div>`
	`19`	`+ )`
`15`	`20`	`}`