feat(v2): Webpack 5, PostCSS 8 (#4089)

* Initial webpack 5 work * It works on my machine (lol) * Committing a bit more work * It works - sorta * Update packages/docusaurus/package.json * at least fix prettier /shrug * making more progress. build should work now, css stuff is still a bit broken * Terser things Signed-off-by: Reece Dunham <me@rdil.rocks> * Working on things * Vendor webpack * Repair chunks, and tests * Rerun prettier * Re-add client prefetching * Update snapshots * Update snapshots * I hope this works * Remove redundant dev server code * relock * Trying to reduce memory usage and fix things * Dead code elim * Search bar works!!! * Prefetching should work again * lock * ts issue * Repair snapshot * Run prettier * Fix the CI for now * fix lint-prettier * clean-css works, now for the other one * Fix lockfile * Fixes prettier * Other css minification works!!! * Add clean-css options, fix webpack versions Signed-off-by: Reece Dunham <me@rdil.rocks> * Fix tests and several of the webpack loaders Signed-off-by: Reece Dunham <me@rdil.rocks> * Re-add support for simple css minifier * Update other related dependencies * Fix lockfile * Dev server fixups Signed-off-by: Reece Dunham <me@rdil.rocks> * Simplify css things * Update webpack, try with postcss 7 * Other cssnano repairs * fix lockfile * Clean up the babel preset * Fix lockfile * Bump RL SSR version * Fix the build errors * Lockfile fix * It works again * webpack 5 should close compiler after run * add proper webpack5 persistent caching config * upgrade webpack deps again * reduce build perf timeouts to avoid build time regressions * test if incremental build can run on netlify * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * test * test * test * test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * netlify test * fix existsSync() calls * replace @ts-nocheck by a temporary Webpack type * replace @ts-nocheck by a temporary Webpack type * replace @ts-nocheck by a temporary Webpack type * migrate existing stats.warningsFilter to config.ignoreWarnings * remove stats from postBuild lifecycle data doc, as it is likely unused (we'll add it back if someone ask for it) * improve build.ts TS issues + move some sync code to async * cleanup TS of start.ts * fix TS error * fix TS issues * fix TS issues * fix ts error * netlify test * netlify test * netlify test * netlify test * netlify test * script cleanup * script cleanup * re-enable @typescript-eslint/ban-ts-comment * Deprecate getCacheLoader / getBabelLoader but keep retrocompatibility * useless TS * fix and comment gca(chunkName) prefetching function * remove deprecated mainTemplate.requireFn * temporarily use react-loadable-ssr-addon-v5-slorber until PR merged: https://github.com/facebook/docusaurus/pull/4089 * comment unsafeCache option * add explicit and more precise webpack targets * splitChunks, use new type: "css/mini-extract" as it seems recommended for webpack 5 * webpack error handling: - log error.details as documented - keep using react-dev-utils/formatWebpackMessages for now * fix webpack5 warnings for evalSourceMapMiddleware.js * typo * rename webpackHotDevClient * make all modifications of react-dev-utils explicit with a comment * revert LogPlugin adapter * loader-utils update * add useful share cache comment * add useful comments regarding the null-loader used in SSR for css files * upgrade webpack-merge in a retrocompatible way * use MiniCssExtractPlugin.emit false as recommended * use @docusaurus/responsive-loader * revert MiniCssExtractPlugin esModule: false change * add link to PR for custom CleanWebpackPlugin * pwa: add fallback to env variable or webpack 5 fails to build * upgrade to CssMinimizerPlugin 2.0 * only build en locale for windows tests * line breaks between errors * add useful comment * Fix e2e tests with Yarn2 not finding new init template dependencies * fix bad import * disable browserslist target as webpack already tries to use browserlists if a config is found, and it is a problem for existing sites * webpack5 TS fixes * fix getMinimizer order (even if it does not work yet) * update postcss to v8, fix cssnano minimizer errors * add NavbarItem position to types (useful for QuestDB site upgrade to Webpack5) * add webpack cache env variable to reduce risk of webpack 5 adoption Co-authored-by: slorber <lorber.sebastien@gmail.com>
2025-06-01 18:32:52 +02:00 · 2021-04-30 11:06:53 -05:00 · 2021-04-30 11:06:53 -05:00 · 05e7250c08
commit 05e7250c08
parent 27b9f34635
63 changed files with 1790 additions and 1556 deletions
--- a/packages/docusaurus-theme-classic/src/index.ts
+++ b/packages/docusaurus-theme-classic/src/index.ts
@ -10,7 +10,7 @@ import {ThemeConfig} from '@docusaurus/theme-common';
 import {getTranslationFiles, translateThemeConfig} from './translations';
 import path from 'path';
 import Module from 'module';
-import postcss, {Root as PostCssRoot} from 'postcss';
+import type {AcceptedPlugin, Result, Plugin as PostCssPlugin} from 'postcss';
 import rtlcss from 'rtlcss';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/utils';

@ -139,14 +139,11 @@ export default function docusaurusThemeClassic(
        .map((lang) => `prism-${lang}`)
        .join('|');

-      // See https://github.com/facebook/docusaurus/pull/3382
-      const useDocsWarningFilter = (warning: string) =>
-        warning.includes("Can't resolve '@theme-init/hooks/useDocs");
-
      return {
-        stats: {
-          warningsFilter: useDocsWarningFilter,
-        },
+        ignoreWarnings: [
+          // See https://github.com/facebook/docusaurus/pull/3382
+          (e) => e.message.includes("Can't resolve '@theme-init/hooks/useDocs"),
+        ],
        plugins: [
          new ContextReplacementPlugin(
            /prismjs[\\/]components$/,
@ -156,29 +153,21 @@ export default function docusaurusThemeClassic(
      };
    },

-    configurePostCss(postCssOptions) {
+    configurePostCss(postCssOptions: {plugins: AcceptedPlugin[]}) {
      if (direction === 'rtl') {
-        postCssOptions.plugins.push(
-          postcss.plugin('RtlCssPlugin', () => {
-            const resolvedInfimaFile = require.resolve(
-              getInfimaCSSFile(direction),
-            );
-            function isInfimaCSSFile(file?: string) {
-              return file === resolvedInfimaFile;
+        const resolvedInfimaFile = require.resolve(getInfimaCSSFile(direction));
+        const plugin: PostCssPlugin = {
+          postcssPlugin: 'RtlCssPlugin',
+          prepare: (result: Result) => {
+            const file = result.root?.source?.input?.file;
+            // Skip Infima as we are using the its RTL version.
+            if (file === resolvedInfimaFile) {
+              return {};
            }
-
-            return function (root: PostCssRoot) {
-              const file = root?.source?.input.file;
-
-              // Skip Infima as we are using the its RTL version.
-              if (isInfimaCSSFile(file)) {
-                return;
-              }
-
-              rtlcss.process(root);
-            };
-          }),
-        );
+            return rtlcss(result.root);
+          },
+        };
+        postCssOptions.plugins.push(plugin);
      }

      return postCssOptions;