From ee315ed7e2309f19be61f238f34710bfdb73d996 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 30 Nov 2020 17:03:37 -0800 Subject: [PATCH 01/40] feature(gatsby): Pause dev-ssr watching between page loads to avoid slowing down regular develop-js HMR --- packages/gatsby/src/commands/build-html.ts | 24 ++++++++++++++++++- .../src/utils/dev-ssr/render-dev-html.ts | 23 ++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/packages/gatsby/src/commands/build-html.ts b/packages/gatsby/src/commands/build-html.ts index 01ef5a0f10d1b..22ea1e7619581 100644 --- a/packages/gatsby/src/commands/build-html.ts +++ b/packages/gatsby/src/commands/build-html.ts @@ -6,6 +6,7 @@ import telemetry from "gatsby-telemetry" import { chunk } from "lodash" import webpack from "webpack" +import { emitter } from "../redux" import webpackConfig from "../utils/webpack.config" import { structureWebpackErrors } from "../utils/webpack-error-utils" @@ -14,6 +15,23 @@ import { IProgram, Stage } from "./types" type IActivity = any // TODO type IWorkerPool = any // TODO +export interface IWebpackWatchingPauseResume extends webpack.Watching { + suspend: () => void + resume: () => void +} + +let devssrWebpackCompilier: webpack.Compiler +let devssrWebpackWatcher: IWebpackWatchingPauseResume +export const getDevSSRWebpack = (): Record< + IWebpackWatchingPauseResume, + webpack.Compiler +> => { + if (process.env.gatsby_executing_command !== `develop`) { + throw new Error(`This function can only be called in development`) + } + return { devssrWebpackWatcher, devssrWebpackCompilier } +} + let oldHash = `` let newHash = `` const runWebpack = ( @@ -34,11 +52,15 @@ const runWebpack = ( process.env.GATSBY_EXPERIMENTAL_DEV_SSR && stage === `develop-html` ) { - webpack(compilerConfig).watch( + devssrWebpackCompilier = webpack(compilerConfig) + devssrWebpackWatcher = devssrWebpackCompilier.watch( { ignored: /node_modules/, }, (err, stats) => { + emitter.emit(`DEV_SSR_COMPILATION_DONE`) + devssrWebpackWatcher.suspend() + if (err) { return reject(err) } else { diff --git a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts index f3e811a00562e..1f970c3d7519e 100644 --- a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts +++ b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts @@ -6,6 +6,8 @@ import report from "gatsby-cli/lib/reporter" import { startListener } from "../../bootstrap/requires-writer" import { findPageByPath } from "../find-page-by-path" import { getPageData as getPageDataExperimental } from "../get-page-data" +import { getDevSSRWebpack } from "../../commands/build-html" +import { emitter } from "../../redux" const startWorker = (): any => { const newWorker = new JestWorker(require.resolve(`./render-dev-html-child`), { @@ -143,6 +145,27 @@ export const renderDevHTML = ({ return reject(`404 page`) } + // Resume the webpack watcher and wait for any compilation necessary to happen. + // We timeout after 1.5s as the user might not care per se about SSR. + // + // We pause and resume so there's no excess webpack activity during normal development. + const { devssrWebpackCompilier, devssrWebpackWatcher } = getDevSSRWebpack() + if (devssrWebpackWatcher && devssrWebpackCompilier) { + await new Promise(resolve => { + function finish(stats: Stats): void { + emitter.off(`DEV_SSR_COMPILATION_DONE`, finish) + resolve(stats) + } + emitter.on(`DEV_SSR_COMPILATION_DONE`, finish) + devssrWebpackWatcher.resume() + // Suspending is just a flag, so it's safe to re-suspend right away + devssrWebpackWatcher.suspend() + + // Timeout after 1.5s. + setTimeout(() => resolve(), 1500) + }) + } + // Wait for public/render-page.js to update w/ the page component. const found = await ensurePathComponentInSSRBundle(pageObj, directory) From b94ced155f6220f7a8fb5916ceb2da4db8e1b9d9 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 30 Nov 2020 18:04:47 -0800 Subject: [PATCH 02/40] update snapshot --- .../src/utils/__tests__/__snapshots__/handle-flags.ts.snap | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/gatsby/src/utils/__tests__/__snapshots__/handle-flags.ts.snap b/packages/gatsby/src/utils/__tests__/__snapshots__/handle-flags.ts.snap index 46b63e30cbab9..640b8b1199403 100644 --- a/packages/gatsby/src/utils/__tests__/__snapshots__/handle-flags.ts.snap +++ b/packages/gatsby/src/utils/__tests__/__snapshots__/handle-flags.ts.snap @@ -13,6 +13,13 @@ Object { ], "message": "The following flags are active: - ALL_COMMANDS · (Umbrella Issue (test)) · test + +There are 5 other flags available that you might be interested in: +- FAST_DEV · Enable all experiments aimed at improving develop server start time +- DEV_SSR · (Umbrella Issue (https://github.com/gatsbyjs/gatsby/discussions/28138)) · SSR pages on full reloads during develop. Helps you detect SSR bugs and fix them without needing to do full builds. +- QUERY_ON_DEMAND · (Umbrella Issue (https://github.com/gatsbyjs/gatsby/discussions/27620)) · Only run queries when needed instead of running all queries upfront. Speeds starting the develop server. +- ONLY_BUILDS · (Umbrella Issue (test)) · test +- YET_ANOTHER · (Umbrella Issue (test)) · test ", "unknownFlagMessage": "The following flag(s) found in your gatsby-config.js are not known: - FASTLY_DEV (did you mean: FAST_DEV) From 0228936fff46ce93b40de02db9b9b1284a752ef0 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Tue, 1 Dec 2020 08:31:42 -0800 Subject: [PATCH 03/40] Don't double-resolve + add activity for building the SSR bundle --- .../gatsby/src/utils/dev-ssr/render-dev-html.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts index 1f970c3d7519e..a512d4b5053e2 100644 --- a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts +++ b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts @@ -150,11 +150,17 @@ export const renderDevHTML = ({ // // We pause and resume so there's no excess webpack activity during normal development. const { devssrWebpackCompilier, devssrWebpackWatcher } = getDevSSRWebpack() + const ssrWebpackActivity = report.activityTimer(`Building SSR bundle`) + ssrWebpackActivity.start() if (devssrWebpackWatcher && devssrWebpackCompilier) { + let isResolved = false await new Promise(resolve => { function finish(stats: Stats): void { emitter.off(`DEV_SSR_COMPILATION_DONE`, finish) - resolve(stats) + ssrWebpackActivity.end() + if (!isResolved) { + resolve(stats) + } } emitter.on(`DEV_SSR_COMPILATION_DONE`, finish) devssrWebpackWatcher.resume() @@ -162,7 +168,10 @@ export const renderDevHTML = ({ devssrWebpackWatcher.suspend() // Timeout after 1.5s. - setTimeout(() => resolve(), 1500) + setTimeout(() => { + isResolved = true + resolve() + }, 1500) }) } From b96c520ce537018d6e7ecbdb4d4439278baff075 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Tue, 1 Dec 2020 09:26:55 -0800 Subject: [PATCH 04/40] Add timeout for tests to ensure that dev server has time to bundle SSR + remove activity timers as not helpful --- integration-tests/ssr/__tests__/ssr.js | 4 +++- integration-tests/ssr/test-output.js | 9 +++++++++ packages/gatsby/src/utils/dev-ssr/render-dev-html.ts | 3 --- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/integration-tests/ssr/__tests__/ssr.js b/integration-tests/ssr/__tests__/ssr.js index 248426f972cec..c09a8923a5bcf 100644 --- a/integration-tests/ssr/__tests__/ssr.js +++ b/integration-tests/ssr/__tests__/ssr.js @@ -9,11 +9,13 @@ describe(`SSR`, () => { expect(html).toMatchSnapshot() }) + test(`dev & build outputs match`, async () => { const childProcess = await execa(`yarn`, [`test-output`]) expect(childProcess.code).toEqual(0) - }) + }, 15000) + test(`it generates an error page correctly`, async () => { const src = path.join(__dirname, `/fixtures/bad-page.js`) const dest = path.join(__dirname, `../src/pages/bad-page.js`) diff --git a/integration-tests/ssr/test-output.js b/integration-tests/ssr/test-output.js index cf2d1731c387a..4cbaa9715ac50 100644 --- a/integration-tests/ssr/test-output.js +++ b/integration-tests/ssr/test-output.js @@ -42,6 +42,15 @@ ) ) + // Fetch once to trigger re-compilation. + await fetch(`${devSiteBasePath}/${path}`) + + // Then wait for 6 seconds to ensure it's ready to go. + // Otherwise, tests are flaky depending on the speed of the testing machine. + await new Promise(resolve => { + setTimeout(() => resolve(), 6000) + }) + const rawDevHtml = await fetch(`${devSiteBasePath}/${path}`).then(res => res.text() ) diff --git a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts index d39340ce92024..db348b4c54e71 100644 --- a/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts +++ b/packages/gatsby/src/utils/dev-ssr/render-dev-html.ts @@ -151,14 +151,11 @@ export const renderDevHTML = ({ // // We pause and resume so there's no excess webpack activity during normal development. const { devssrWebpackCompilier, devssrWebpackWatcher } = getDevSSRWebpack() - const ssrWebpackActivity = report.activityTimer(`Building SSR bundle`) - ssrWebpackActivity.start() if (devssrWebpackWatcher && devssrWebpackCompilier) { let isResolved = false await new Promise(resolve => { function finish(stats: Stats): void { emitter.off(`DEV_SSR_COMPILATION_DONE`, finish) - ssrWebpackActivity.end() if (!isResolved) { resolve(stats) } From 36e7f9eb4077f05fefd8e77a2faaeb08e6d23d9e Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 3 Dec 2020 13:21:23 -0800 Subject: [PATCH 05/40] feature(gatsby): Extract and add CSS when SSRing in dev --- .../cache-dir/ssr-develop-static-entry.js | 70 ++++++++++++++++++- packages/gatsby/src/utils/webpack-utils.ts | 21 ++++-- packages/gatsby/src/utils/webpack.config.js | 16 +++-- 3 files changed, 94 insertions(+), 13 deletions(-) diff --git a/packages/gatsby/cache-dir/ssr-develop-static-entry.js b/packages/gatsby/cache-dir/ssr-develop-static-entry.js index f35cb8a3db0c8..e39b2d581cefd 100644 --- 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,69 @@ export default (pagePath, isClientOnlyPage, callback) => { const pageData = getPageData(pagePath) - const componentChunkName = pageData?.componentChunkName + const { componentChunkName, staticQueryHashes = [] } = pageData + + let scriptsAndStyles = flatten( + [`app`, componentChunkName].map(s => { + const fetchKey = `assetsByChunkName[${s}]` + + 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[`main`].assets.forEach(asset => + chunks.push({ rel: `preload`, name: asset }) + ) + + const childAssets = namedChunkGroups[`main`].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( +
Hello world
" +`; exports[`SSR it generates an error page correctly 1`] = ` " diff --git a/integration-tests/ssr/src/pages/index.js b/integration-tests/ssr/src/pages/index.js index 850e99d4638bb..67bb721dc079e 100644 --- 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" +import "./sample.css" export default function Inline() { const { site } = useStaticQuery(graphql` diff --git a/integration-tests/ssr/src/pages/sample.css b/integration-tests/ssr/src/pages/sample.css new file mode 100644 index 0000000000000..cc9eaffcc9550 --- /dev/null +++ b/integration-tests/ssr/src/pages/sample.css @@ -0,0 +1,3 @@ +body { + background: pink; +} diff --git a/packages/gatsby/cache-dir/__tests__/static-entry.js b/packages/gatsby/cache-dir/__tests__/static-entry.js index 4f26a9c6bb6dd..e6c4c1351f650 100644 --- 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 index e39b2d581cefd..69689c343b091 100644 --- a/packages/gatsby/cache-dir/ssr-develop-static-entry.js +++ b/packages/gatsby/cache-dir/ssr-develop-static-entry.js @@ -118,10 +118,10 @@ export default (pagePath, isClientOnlyPage, callback) => { const { componentChunkName, staticQueryHashes = [] } = pageData let scriptsAndStyles = flatten( - [`app`, componentChunkName].map(s => { - const fetchKey = `assetsByChunkName[${s}]` + [`main`].map(chunkKey => { + const fetchKey = `assetsByChunkName[${chunkKey}]` - let chunks = get(stats, fetchKey, []) + let chunks = get(stats, fetchKey) const namedChunkGroups = get(stats, `namedChunkGroups`) if (!chunks) { @@ -135,7 +135,7 @@ export default (pagePath, isClientOnlyPage, callback) => { return { rel: `preload`, name: chunk } }) - namedChunkGroups[`main`].assets.forEach(asset => + namedChunkGroups[chunkKey].assets.forEach(asset => chunks.push({ rel: `preload`, name: asset }) ) From 64bc7f9d8c811ff118b0751d5803e9a3d5b1866e Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 3 Dec 2020 17:40:36 -0800 Subject: [PATCH 08/40] WIP --- integration-tests/ssr/gatsby-browser.js | 1 + integration-tests/ssr/index.html | 45 +++++++++++++++++++ integration-tests/ssr/package.json | 2 +- integration-tests/ssr/sample.css | 5 +++ integration-tests/ssr/src/pages/bad-page.js | 9 ++++ integration-tests/ssr/src/pages/index.js | 1 - integration-tests/ssr/src/pages/sample.css | 3 -- packages/gatsby/package.json | 1 + .../src/services/start-webpack-server.ts | 28 +++++++++++- packages/gatsby/src/utils/webpack-utils.ts | 26 +++++++---- packages/gatsby/src/utils/webpack.config.js | 6 +-- yarn.lock | 5 +++ 12 files changed, 114 insertions(+), 18 deletions(-) create mode 100644 integration-tests/ssr/gatsby-browser.js create mode 100644 integration-tests/ssr/index.html create mode 100644 integration-tests/ssr/sample.css create mode 100644 integration-tests/ssr/src/pages/bad-page.js delete mode 100644 integration-tests/ssr/src/pages/sample.css diff --git a/integration-tests/ssr/gatsby-browser.js b/integration-tests/ssr/gatsby-browser.js new file mode 100644 index 0000000000000..d30aa3ea07cd5 --- /dev/null +++ b/integration-tests/ssr/gatsby-browser.js @@ -0,0 +1 @@ +import "./sample.css" diff --git a/integration-tests/ssr/index.html b/integration-tests/ssr/index.html new file mode 100644 index 0000000000000..24e93cf78d7ed --- /dev/null +++ b/integration-tests/ssr/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + +
+
+
Hello world
+
+
+
+ + + + diff --git a/integration-tests/ssr/package.json b/integration-tests/ssr/package.json index f0b0b554ac26b..11ef8f6cd6d23 100644 --- a/integration-tests/ssr/package.json +++ b/integration-tests/ssr/package.json @@ -7,7 +7,7 @@ "url": "https://github.com/gatsbyjs/gatsby/issues" }, "dependencies": { - "gatsby": "^2.27.0", + "gatsby": "2.29.0-next.2-dev-1607033909282", "react": "^16.12.0", "react-dom": "^16.12.0" }, diff --git a/integration-tests/ssr/sample.css b/integration-tests/ssr/sample.css new file mode 100644 index 0000000000000..49303487ff4ef --- /dev/null +++ b/integration-tests/ssr/sample.css @@ -0,0 +1,5 @@ +body { + background: pink; + color: red; + font-display: italic; +} diff --git a/integration-tests/ssr/src/pages/bad-page.js b/integration-tests/ssr/src/pages/bad-page.js new file mode 100644 index 0000000000000..429c52813c049 --- /dev/null +++ b/integration-tests/ssr/src/pages/bad-page.js @@ -0,0 +1,9 @@ +import React from "react" + +const Component = () => { + const a = window.width + + return
hi
+} + +export default Component diff --git a/integration-tests/ssr/src/pages/index.js b/integration-tests/ssr/src/pages/index.js index 67bb721dc079e..850e99d4638bb 100644 --- a/integration-tests/ssr/src/pages/index.js +++ b/integration-tests/ssr/src/pages/index.js @@ -1,6 +1,5 @@ import React from "react" import { useStaticQuery, graphql } from "gatsby" -import "./sample.css" export default function Inline() { const { site } = useStaticQuery(graphql` diff --git a/integration-tests/ssr/src/pages/sample.css b/integration-tests/ssr/src/pages/sample.css deleted file mode 100644 index cc9eaffcc9550..0000000000000 --- a/integration-tests/ssr/src/pages/sample.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background: pink; -} diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 27bbcb3071bce..29e5d6625f11d 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -110,6 +110,7 @@ "mini-css-extract-plugin": "^0.11.2", "mitt": "^1.2.0", "mkdirp": "^0.5.1", + "multi-loader": "0.1.0", "moment": "^2.27.0", "name-all-modules-plugin": "^1.0.1", "normalize-path": "^3.0.0", diff --git a/packages/gatsby/src/services/start-webpack-server.ts b/packages/gatsby/src/services/start-webpack-server.ts index c95ff0eedde4a..fe007900330a7 100644 --- a/packages/gatsby/src/services/start-webpack-server.ts +++ b/packages/gatsby/src/services/start-webpack-server.ts @@ -4,6 +4,10 @@ import formatWebpackMessages from "react-dev-utils/formatWebpackMessages" import chalk from "chalk" import { Compiler } from "webpack" import { isEqual } from "lodash" +import got from "got" +import fs from "fs-extra" +import path from "path" + import { Stage } from "../commands/types" import { @@ -88,7 +92,8 @@ export async function startWebpackServer({ // We have switched off the default Webpack output in WebpackDevServer // options so we are going to "massage" the warnings and errors and present // them in a readable focused way. - const messages = formatWebpackMessages(stats.toJson({}, true)) + const statsToJson = stats.toJson({}, true) + const messages = formatWebpackMessages(statsToJson) const urls = prepareUrls( program.https ? `https` : `http`, program.host, @@ -115,6 +120,27 @@ export async function startWebpackServer({ } } + // Download css assets + const cssAssets = statsToJson.assets.filter(asset => { + console.log({ asset }) + return asset.name.endsWith(`.css`) + }) + + console.log({ cssAssets, port: program.port }) + // Stream to public directory so we can access during SSR. + cssAssets.forEach(asset => { + console.log( + `writing to`, + path.join(program.directory, `public`, asset.name) + ) + const writeStream = fs.createWriteStream( + path.join(program.directory, `public`, asset.name) + ) + const url = new URL(`/${asset.name}`, urls.localUrlForBrowser) + console.log(url) + got.stream(url.href).pipe(writeStream) + }) + isFirstCompile = false if (webpackActivity) { diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts index e67d32855d0a0..dc89a82e344b9 100644 --- a/packages/gatsby/src/utils/webpack-utils.ts +++ b/packages/gatsby/src/utils/webpack-utils.ts @@ -197,10 +197,10 @@ export const createWebpackUtils = ( miniCssExtract: (options = {}) => { return { options, - loader: - stage === `develop` - ? require.resolve(`style-loader`) - : MiniCssExtractPlugin.loader, + loader: MiniCssExtractPlugin.loader, + // stage === false //`develop` + // ? require.resolve(`style-loader`) + // : MiniCssExtractPlugin.loader, } }, @@ -540,11 +540,19 @@ export const createWebpackUtils = ( loaders.miniCssExtract({ hmr: !PRODUCTION && !restOptions.modules }) ) - if (stage === `develop-html`) { - use.unshift( - loaders.miniCssExtract({ hmr: false && !restOptions.modules }) - ) - } + // if (stage === `develop-html`) { + // use.unshift( + // loaders.miniCssExtract({ hmr: false && !restOptions.modules }) + // ) + // } + // if (stage === `develop`) { + // use + // .unshift + // // require.resolve(`style-loader`) + // // loaders.miniCssExtract({ hmr: false && !restOptions.modules }) + // () + // use.unshift(loaders.miniCssExtract()) + // } return { use, diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index c7d08a474fefc..b54534a28047d 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -227,16 +227,16 @@ module.exports = async ( plugins.hotModuleReplacement(), plugins.noEmitOnErrors(), plugins.eslintGraphqlSchemaReload(), + plugins.extractText(), + plugins.extractStats(), ]) .filter(Boolean) break case `develop-html`: configPlugins = configPlugins.concat([ - plugins.extractText(), - // Write out stats object mapping named dynamic imports (aka page // components) to all their async chunks. - plugins.extractStats(), + // plugins.extractStats(), ]) break diff --git a/yarn.lock b/yarn.lock index 3e91ef3aa26d3..506ff028e2940 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17198,6 +17198,11 @@ ms@2.1.2, ms@^2.0.0, ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== +multi-loader@0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/multi-loader/-/multi-loader-0.1.0.tgz#2f0cc7438ec6e4a4ebc1a387015849b04f875f44" + integrity sha1-LwzHQ47G5KTrwaOHAVhJsE+HX0Q= + multicast-dns-service-types@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901" From 8e5f6f0c580d352788d807b561f871addf2cbaec Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 3 Dec 2020 20:25:59 -0800 Subject: [PATCH 09/40] Got hot-reloading working w/ mini-css-extract-plugin --- .../ssr/__tests__/__snapshots__/ssr.js.snap | 9 +---- integration-tests/ssr/sample.css | 7 ++-- integration-tests/ssr/src/pages/bad-page.js | 9 ----- .../cache-dir/ssr-develop-static-entry.js | 18 ++++------ .../src/services/start-webpack-server.ts | 17 ++++++---- packages/gatsby/src/utils/webpack-utils.ts | 2 +- packages/gatsby/src/utils/webpack.config.js | 34 +++++++++++++------ 7 files changed, 47 insertions(+), 49 deletions(-) delete mode 100644 integration-tests/ssr/src/pages/bad-page.js diff --git a/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap b/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap index 71ada6292549b..d89a25dc5414b 100644 --- a/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap +++ b/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap @@ -1,13 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SSR is run for a page when it is requested 1`] = ` -"
Hello world
" -`; +exports[`SSR is run for a page when it is requested 1`] = `"
Hello world
"`; exports[`SSR it generates an error page correctly 1`] = ` " diff --git a/integration-tests/ssr/sample.css b/integration-tests/ssr/sample.css index 49303487ff4ef..e41b85dfee61c 100644 --- a/integration-tests/ssr/sample.css +++ b/integration-tests/ssr/sample.css @@ -1,5 +1,6 @@ body { - background: pink; - color: red; - font-display: italic; + background: tomato; + color: black; + font-style: italic; + font-weight: bold; } diff --git a/integration-tests/ssr/src/pages/bad-page.js b/integration-tests/ssr/src/pages/bad-page.js deleted file mode 100644 index 429c52813c049..0000000000000 --- a/integration-tests/ssr/src/pages/bad-page.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react" - -const Component = () => { - const a = window.width - - return
hi
-} - -export default Component diff --git a/packages/gatsby/cache-dir/ssr-develop-static-entry.js b/packages/gatsby/cache-dir/ssr-develop-static-entry.js index 69689c343b091..1134ca0088e73 100644 --- a/packages/gatsby/cache-dir/ssr-develop-static-entry.js +++ b/packages/gatsby/cache-dir/ssr-develop-static-entry.js @@ -118,7 +118,7 @@ export default (pagePath, isClientOnlyPage, callback) => { const { componentChunkName, staticQueryHashes = [] } = pageData let scriptsAndStyles = flatten( - [`main`].map(chunkKey => { + [`commons`].map(chunkKey => { const fetchKey = `assetsByChunkName[${chunkKey}]` let chunks = get(stats, fetchKey) @@ -139,7 +139,7 @@ export default (pagePath, isClientOnlyPage, callback) => { chunks.push({ rel: `preload`, name: asset }) ) - const childAssets = namedChunkGroups[`main`].childAssets + const childAssets = namedChunkGroups[chunkKey].childAssets for (const rel in childAssets) { chunks = concat( chunks, @@ -161,20 +161,16 @@ export default (pagePath, isClientOnlyPage, callback) => { style => style.name && style.name.endsWith(`.css`) ) + console.log(styles) styles .slice(0) .reverse() .forEach(style => { headComponents.unshift( - - - - - -
-
-
Hello world
-
-
-
- - - - From 410424c66a5bb720f36b38a78696d08bb6a7d17a Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 3 Dec 2020 20:32:46 -0800 Subject: [PATCH 11/40] remove change to yarn.lock --- yarn.lock | 5 ----- 1 file changed, 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index 506ff028e2940..3e91ef3aa26d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17198,11 +17198,6 @@ ms@2.1.2, ms@^2.0.0, ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -multi-loader@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/multi-loader/-/multi-loader-0.1.0.tgz#2f0cc7438ec6e4a4ebc1a387015849b04f875f44" - integrity sha1-LwzHQ47G5KTrwaOHAVhJsE+HX0Q= - multicast-dns-service-types@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901" From d27291f415cac5066322e1d87cf52d579967d23b Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Thu, 3 Dec 2020 20:33:59 -0800 Subject: [PATCH 12/40] revert other mistakenly added files --- integration-tests/ssr/package.json | 2 +- packages/gatsby/package.json | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/integration-tests/ssr/package.json b/integration-tests/ssr/package.json index 11ef8f6cd6d23..f0b0b554ac26b 100644 --- a/integration-tests/ssr/package.json +++ b/integration-tests/ssr/package.json @@ -7,7 +7,7 @@ "url": "https://github.com/gatsbyjs/gatsby/issues" }, "dependencies": { - "gatsby": "2.29.0-next.2-dev-1607033909282", + "gatsby": "^2.27.0", "react": "^16.12.0", "react-dom": "^16.12.0" }, diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 29e5d6625f11d..27bbcb3071bce 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -110,7 +110,6 @@ "mini-css-extract-plugin": "^0.11.2", "mitt": "^1.2.0", "mkdirp": "^0.5.1", - "multi-loader": "0.1.0", "moment": "^2.27.0", "name-all-modules-plugin": "^1.0.1", "normalize-path": "^3.0.0", From 68b32adffe578132ac20cdedca127b7e983610e2 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Fri, 4 Dec 2020 08:22:00 -0800 Subject: [PATCH 13/40] Add an async module to test against --- integration-tests/ssr/sample.css | 4 ++-- integration-tests/ssr/src/pages/index.js | 1 + integration-tests/ssr/src/test.css | 3 +++ integration-tests/ssr/src/test.js | 1 + packages/gatsby/cache-dir/ssr-develop-static-entry.js | 1 + 5 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 integration-tests/ssr/src/test.css create mode 100644 integration-tests/ssr/src/test.js diff --git a/integration-tests/ssr/sample.css b/integration-tests/ssr/sample.css index e41b85dfee61c..efe5f9295ed0e 100644 --- a/integration-tests/ssr/sample.css +++ b/integration-tests/ssr/sample.css @@ -1,6 +1,6 @@ body { - background: tomato; + background: pink; color: black; font-style: italic; - font-weight: bold; + font-weight: 400; } diff --git a/integration-tests/ssr/src/pages/index.js b/integration-tests/ssr/src/pages/index.js index 850e99d4638bb..09b5e82d58b0a 100644 --- 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" +import("../test") export default function Inline() { const { site } = useStaticQuery(graphql` diff --git a/integration-tests/ssr/src/test.css b/integration-tests/ssr/src/test.css new file mode 100644 index 0000000000000..3ed8f82d8cc7d --- /dev/null +++ b/integration-tests/ssr/src/test.css @@ -0,0 +1,3 @@ +.hi { + color: red; +} diff --git a/integration-tests/ssr/src/test.js b/integration-tests/ssr/src/test.js new file mode 100644 index 0000000000000..1a0ddf56abf67 --- /dev/null +++ b/integration-tests/ssr/src/test.js @@ -0,0 +1 @@ +import "./test.css" diff --git a/packages/gatsby/cache-dir/ssr-develop-static-entry.js b/packages/gatsby/cache-dir/ssr-develop-static-entry.js index 1134ca0088e73..7d6a6ce540d1c 100644 --- a/packages/gatsby/cache-dir/ssr-develop-static-entry.js +++ b/packages/gatsby/cache-dir/ssr-develop-static-entry.js @@ -168,6 +168,7 @@ export default (pagePath, isClientOnlyPage, callback) => { .forEach(style => { headComponents.unshift( Date: Fri, 4 Dec 2020 08:37:02 -0800 Subject: [PATCH 14/40] fix async module --- integration-tests/ssr/src/pages/index.js | 8 ++++++-- integration-tests/ssr/src/test.css | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/integration-tests/ssr/src/pages/index.js b/integration-tests/ssr/src/pages/index.js index 09b5e82d58b0a..d2b3ba51878af 100644 --- a/integration-tests/ssr/src/pages/index.js +++ b/integration-tests/ssr/src/pages/index.js @@ -1,6 +1,6 @@ import React from "react" import { useStaticQuery, graphql } from "gatsby" -import("../test") +const lazyImport = import(`../test`) export default function Inline() { const { site } = useStaticQuery(graphql` @@ -12,5 +12,9 @@ export default function Inline() { } } `) - return
{site.siteMetadata.title}
+ return ( +
+

{site.siteMetadata.title}

+
+ ) } diff --git a/integration-tests/ssr/src/test.css b/integration-tests/ssr/src/test.css index 3ed8f82d8cc7d..6b92c18bd39b7 100644 --- a/integration-tests/ssr/src/test.css +++ b/integration-tests/ssr/src/test.css @@ -1,3 +1,3 @@ .hi { - color: red; + color: tomato; } From 9ecb314f327404b6581c782aaf826b41e50a47d5 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Fri, 4 Dec 2020 14:16:32 -0800 Subject: [PATCH 15/40] Add postcss/tailwind --- integration-tests/ssr/gatsby-config.js | 2 +- integration-tests/ssr/package.json | 4 +++- integration-tests/ssr/src/test.css | 2 +- packages/gatsby-plugin-postcss/src/gatsby-node.js | 11 +++++++---- packages/gatsby/src/services/start-webpack-server.ts | 1 + packages/gatsby/src/utils/webpack.config.js | 3 +++ 6 files changed, 16 insertions(+), 7 deletions(-) diff --git a/integration-tests/ssr/gatsby-config.js b/integration-tests/ssr/gatsby-config.js index cc785a9507538..7227b35bf4e61 100644 --- 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/package.json b/integration-tests/ssr/package.json index f0b0b554ac26b..37b7c68e5e71f 100644 --- 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/src/test.css b/integration-tests/ssr/src/test.css index 6b92c18bd39b7..7e6738ee67d84 100644 --- a/integration-tests/ssr/src/test.css +++ b/integration-tests/ssr/src/test.css @@ -1,3 +1,3 @@ .hi { - color: tomato; + color: blue; } diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js index 1305bb43955cc..6eb16824be2b1 100644 --- a/packages/gatsby-plugin-postcss/src/gatsby-node.js +++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js @@ -21,6 +21,7 @@ exports.onCreateWebpackConfig = ( const isSSR = stage.includes(`html`) const config = getConfig() const cssRules = findCssRules(config) + console.log(cssRules) delete postcssLoaderOptions.plugins @@ -50,10 +51,12 @@ exports.onCreateWebpackConfig = ( ], } - if (!isSSR) { - postcssRule.use.unshift(loaders.miniCssExtract()) - postcssRuleModules.use.unshift(loaders.miniCssExtract({ hmr: false })) - } + console.log(postcssLoader, postcssRule, postcssRuleModules) + + // if (!isSSR) { + // postcssRule.use.unshift(loaders.miniCssExtract()) + // postcssRuleModules.use.unshift(loaders.miniCssExtract({ hmr: false })) + // } const postcssRules = { oneOf: [] } diff --git a/packages/gatsby/src/services/start-webpack-server.ts b/packages/gatsby/src/services/start-webpack-server.ts index eab832ffcef4d..f0c89b8254c6e 100644 --- a/packages/gatsby/src/services/start-webpack-server.ts +++ b/packages/gatsby/src/services/start-webpack-server.ts @@ -142,6 +142,7 @@ export async function startWebpackServer({ path.join(program.directory, `public`, `__${asset.name}`) ) const url = new URL(`/${asset.name}`, urls.localUrlForBrowser) + console.log(url) await pipeline(got.stream(url.href), writeStream) console.log(`done`) }) diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index b56bbb77ae093..0eae35ca5afaa 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -722,5 +722,8 @@ module.exports = async ( parentSpan, }) + require("util").inspect.defaultOptions.depth = null + console.log(getConfig()) + return getConfig() } From 84a4f2cfb2d8dfdde28c8140d2b833cf6fa45f8e Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 7 Dec 2020 10:41:48 -0800 Subject: [PATCH 16/40] write webpack config for easy comparisons --- packages/gatsby/src/utils/webpack.config.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 0eae35ca5afaa..22108a7e3b431 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -722,8 +722,14 @@ module.exports = async ( parentSpan, }) - require("util").inspect.defaultOptions.depth = null - console.log(getConfig()) + require(`util`).inspect.defaultOptions.depth = null + console.log( + process.cwd() + `/webpack-config-${stage}-${new Date().toJSON()}.json` + ) + fs.writeFileSync( + process.cwd() + `/webpack-config-${stage}-${new Date().toJSON()}.json`, + require(`util`).inspect(getConfig()) + ) return getConfig() } From 3e8fa675c302a4d6f2da18dd58543626ce65b9cf Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 7 Dec 2020 14:20:09 -0800 Subject: [PATCH 17/40] =?UTF-8?q?that=20was=20a=20lot=20easier=20than=20I?= =?UTF-8?q?=20thought=20=E2=80=94=20just=20set=20hmr:true=20for=20non-prod?= =?UTF-8?q?uction=20sites?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- integration-tests/ssr/sample.css | 2 +- .../gatsby-plugin-postcss/src/gatsby-node.js | 8 ++++---- .../gatsby-plugin-stylus/src/gatsby-node.js | 2 +- packages/gatsby/src/utils/webpack-utils.ts | 7 ++----- packages/gatsby/src/utils/webpack.config.js | 18 ------------------ 5 files changed, 8 insertions(+), 29 deletions(-) diff --git a/integration-tests/ssr/sample.css b/integration-tests/ssr/sample.css index efe5f9295ed0e..bfbad3af78724 100644 --- a/integration-tests/ssr/sample.css +++ b/integration-tests/ssr/sample.css @@ -1,5 +1,5 @@ body { - background: pink; + background: tomato; color: black; font-style: italic; font-weight: 400; diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js index 6eb16824be2b1..d243fcedb7871 100644 --- a/packages/gatsby-plugin-postcss/src/gatsby-node.js +++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js @@ -53,10 +53,10 @@ exports.onCreateWebpackConfig = ( console.log(postcssLoader, postcssRule, postcssRuleModules) - // if (!isSSR) { - // postcssRule.use.unshift(loaders.miniCssExtract()) - // postcssRuleModules.use.unshift(loaders.miniCssExtract({ hmr: false })) - // } + if (!isSSR) { + postcssRule.use.unshift(loaders.miniCssExtract()) + postcssRuleModules.use.unshift(loaders.miniCssExtract()) + } const postcssRules = { oneOf: [] } diff --git a/packages/gatsby-plugin-stylus/src/gatsby-node.js b/packages/gatsby-plugin-stylus/src/gatsby-node.js index e0476957fe63b..614abfdb361f4 100644 --- a/packages/gatsby-plugin-stylus/src/gatsby-node.js +++ b/packages/gatsby-plugin-stylus/src/gatsby-node.js @@ -53,7 +53,7 @@ exports.onCreateWebpackConfig = ( const stylusRuleModules = { test: /\.module\.styl$/, use: [ - !isSSR && loaders.miniCssExtract({ hmr: false }), + !isSSR && loaders.miniCssExtract(), loaders.css({ modules: true, importLoaders: 2 }), loaders.postcss({ plugins: postCssPlugins }), stylusLoader, diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts index 4f464f51a99a8..27299a32d23be 100644 --- a/packages/gatsby/src/utils/webpack-utils.ts +++ b/packages/gatsby/src/utils/webpack-utils.ts @@ -196,11 +196,8 @@ export const createWebpackUtils = ( miniCssExtract: (options = {}) => { return { - options, + options: { ...options, hmr: !PRODUCTION }, loader: MiniCssExtractPlugin.loader, - // stage === false //`develop` - // ? require.resolve(`style-loader`) - // : MiniCssExtractPlugin.loader, } }, @@ -567,7 +564,7 @@ export const createWebpackUtils = ( css.external = makeExternalOnly(css) const cssModules: IRuleUtils["cssModules"] = (options): RuleSetRule => { - const rule = css({ ...options, modules: true }) + const rule = css({ ...options, modules: true, hmr: !PRODUCTION }) delete rule.exclude rule.test = /\.module\.css$/ return rule diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 22108a7e3b431..cf02633953cde 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -232,14 +232,6 @@ module.exports = async ( ]) .filter(Boolean) console.log(configPlugins) - break - case `develop-html`: - configPlugins = configPlugins.concat([ - // Write out stats object mapping named dynamic imports (aka page - // components) to all their async chunks. - // plugins.extractStats(), - ]) - break case `build-javascript`: { configPlugins = configPlugins.concat([ @@ -349,16 +341,6 @@ module.exports = async ( oneOf: [rules.cssModules(), rules.css()], }, ]) - // configRules.push({ - // test: /\.css$/, - // use: [ - // { - // loader: MiniCssExtractPlugin.loader, - // options: {}, - // }, - // "css-loader", - // ], - // }) // RHL will patch React, replace React-DOM by React-🔥-DOM and work with fiber directly // It's necessary to remove the warning in console (https://github.com/gatsbyjs/gatsby/issues/11934) From baf7a65b7e99dbb7d9765e9b3d4e61bdc93d84d0 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 7 Dec 2020 14:26:25 -0800 Subject: [PATCH 18/40] cleanups --- packages/gatsby-plugin-postcss/src/gatsby-node.js | 3 --- packages/gatsby/src/services/start-webpack-server.ts | 2 -- packages/gatsby/src/utils/webpack.config.js | 10 ---------- 3 files changed, 15 deletions(-) diff --git a/packages/gatsby-plugin-postcss/src/gatsby-node.js b/packages/gatsby-plugin-postcss/src/gatsby-node.js index d243fcedb7871..4fea5c2b52d3b 100644 --- a/packages/gatsby-plugin-postcss/src/gatsby-node.js +++ b/packages/gatsby-plugin-postcss/src/gatsby-node.js @@ -21,7 +21,6 @@ exports.onCreateWebpackConfig = ( const isSSR = stage.includes(`html`) const config = getConfig() const cssRules = findCssRules(config) - console.log(cssRules) delete postcssLoaderOptions.plugins @@ -51,8 +50,6 @@ exports.onCreateWebpackConfig = ( ], } - console.log(postcssLoader, postcssRule, postcssRuleModules) - if (!isSSR) { postcssRule.use.unshift(loaders.miniCssExtract()) postcssRuleModules.use.unshift(loaders.miniCssExtract()) diff --git a/packages/gatsby/src/services/start-webpack-server.ts b/packages/gatsby/src/services/start-webpack-server.ts index f0c89b8254c6e..a4fb57dde205f 100644 --- a/packages/gatsby/src/services/start-webpack-server.ts +++ b/packages/gatsby/src/services/start-webpack-server.ts @@ -126,11 +126,9 @@ export async function startWebpackServer({ // Download css assets const cssAssets = statsToJson.assets.filter(asset => { - // console.log({ asset }) return asset.name.endsWith(`.css`) }) - console.log({ asset: cssAssets[0], port: program.port }) // Stream to public directory so we can access during SSR. cssAssets.forEach(async asset => { console.log( diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index cf02633953cde..23fcf18f0d791 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -231,7 +231,6 @@ module.exports = async ( plugins.extractStats(), ]) .filter(Boolean) - console.log(configPlugins) break case `build-javascript`: { configPlugins = configPlugins.concat([ @@ -704,14 +703,5 @@ module.exports = async ( parentSpan, }) - require(`util`).inspect.defaultOptions.depth = null - console.log( - process.cwd() + `/webpack-config-${stage}-${new Date().toJSON()}.json` - ) - fs.writeFileSync( - process.cwd() + `/webpack-config-${stage}-${new Date().toJSON()}.json`, - require(`util`).inspect(getConfig()) - ) - return getConfig() } From 31354f2e91614bc7a394ef185ebf0c4ffe0738f8 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Mon, 7 Dec 2020 14:58:16 -0800 Subject: [PATCH 19/40] Don't need this since we're using not