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-05-25 06:56:56 +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-cssnano-preset/src/remove-overridden-custom-properties/index.js
+++ b/packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/index.js
@ -5,40 +5,38 @@
 * LICENSE file in the root directory of this source tree.
 */

-const postcss = require('postcss');
+/**
+ * This PostCSS plugin will remove duplicate/same custom properties (which are actually overridden ones) **only** from `:root` selector.
+ *
+ * Depending on the presence of an `!important` rule in value of custom property, the following actions will happens:
+ *
+ * - If the same custom properties do **not** have an `!important` rule, then all of them will be removed except for the last one (which will actually be applied).
+ * - If the same custom properties have at least one `!important` rule, then only those properties that do not have this rule will be removed.
+ * @returns {import('postcss').Plugin}
+ */
+module.exports = function creator() {
+  return {
+    postcssPlugin: 'postcss-remove-overridden-custom-properties',
+    Declaration(decl) {
+      if (decl.parent.selector !== ':root') {
+        return;
+      }

-/*
-This PostCSS plugin will remove duplicate/same custom properties (which are actually overridden ones) **only** from `:root` selector.
+      const sameProperties =
+        decl.parent.nodes.filter((n) => n.prop === decl.prop) || [];
+      const hasImportantProperties = sameProperties.some((p) =>
+        Object.prototype.hasOwnProperty.call(p, 'important'),
+      );

-Depending on the presence of an `!important` rule in value of custom property, the following actions will happens:
+      const overriddenProperties = hasImportantProperties
+        ? sameProperties.filter(
+            (p) => !Object.prototype.hasOwnProperty.call(p, 'important'),
+          )
+        : sameProperties.slice(0, -1);

- If the same custom properties do **not** have an `!important` rule, then all of them will be removed except for the last one (which will actually be applied).
- If the same custom properties have at least one `!important` rule, then only those properties that do not have this rule will be removed.
-*/
+      overriddenProperties.map((p) => p.remove());
+    },
+  };
+};

-module.exports = postcss.plugin(
-  'postcss-remove-overridden-custom-properties',
-  () => {
-    return (root) => {
-      root.walkDecls((decl) => {
-        if (decl.parent.selector !== ':root') {
-          return;
-        }
-
-        const sameProperties =
-          decl.parent.nodes.filter((n) => n.prop === decl.prop) || [];
-        const hasImportantProperties = sameProperties.some((p) =>
-          Object.prototype.hasOwnProperty.call(p, 'important'),
-        );
-
-        const overriddenProperties = hasImportantProperties
-          ? sameProperties.filter(
-              (p) => !Object.prototype.hasOwnProperty.call(p, 'important'),
-            )
-          : sameProperties.slice(0, -1);
-
-        overriddenProperties.map((p) => p.remove());
-      });
-    };
-  },
-);
+module.exports.postcss = true;