perf(v2): improve blog mdx-loader and postcss loader (#4355)

* perf(v2): improve blog mdx-loader and postcss loader

* Adjust advanced preset settings

* Update css-loader

packages/docusaurus-cssnano-preset/index.js

@@ -9,7 +9,10 @@ const advancedBasePreset = require('cssnano-preset-advanced');
 const postCssSortMediaQueries = require('postcss-sort-media-queries');
 const postCssRemoveOverriddenCustomProperties = require('./src/remove-overridden-custom-properties');
 
-const preset = advancedBasePreset({autoprefixer: {add: true}});
+const preset = advancedBasePreset({
+  autoprefixer: {add: false},
+  discardComments: {removeAll: true},
+});
 
 preset.plugins.unshift(
   [postCssSortMediaQueries],

packages/docusaurus-plugin-content-blog/src/__tests__/linkify.test.ts

@@ -7,7 +7,7 @@
 
 import fs from 'fs-extra';
 import path from 'path';
-import {linkify, LinkifyParams} from '../blogUtils';
+import {linkify, LinkifyParams, getPostsBySource} from '../blogUtils';
 import {BlogBrokenMarkdownLink, BlogContentPaths, BlogPost} from '../types';
 
 const siteDir = path.join(__dirname, '__fixtures__', 'website');
@@ -46,7 +46,7 @@ const transform = (filePath: string, options?: Partial<LinkifyParams>) => {
     fileContent,
     siteDir,
     contentPaths,
-    blogPosts,
+    blogPostsBySource: getPostsBySource(blogPosts),
     onBrokenMarkdownLink: (brokenMarkdownLink) => {
       throw new Error(
         `Broken markdown link found: ${JSON.stringify(brokenMarkdownLink)}`,

packages/docusaurus-plugin-content-blog/src/blogUtils.ts

@@ -12,6 +12,7 @@ import path from 'path';
 import {resolve} from 'url';
 import readingTime from 'reading-time';
 import {Feed} from 'feed';
+import {keyBy} from 'lodash';
 import {
   PluginOptions,
   BlogPost,
@@ -30,12 +31,17 @@ import {
   getDateTimeFormat,
 } from '@docusaurus/utils';
 import {LoadContext} from '@docusaurus/types';
-import {keyBy} from 'lodash';
 
 export function truncate(fileString: string, truncateMarker: RegExp): string {
   return fileString.split(truncateMarker, 1).shift()!;
 }
 
+export function getPostsBySource(
+  blogPosts: BlogPost[],
+): Record<string, BlogPost> {
+  return keyBy(blogPosts, (item) => item.metadata.source);
+}
+
 // YYYY-MM-DD-{name}.mdx?
 // Prefer named capture, but older Node versions do not support it.
 const FILENAME_PATTERN = /^(\d{4}-\d{1,2}-\d{1,2})-?(.*?).mdx?$/;
@@ -247,7 +253,7 @@ export type LinkifyParams = {
   fileContent: string;
 } & Pick<
   BlogMarkdownLoaderOptions,
-  'blogPosts' | 'siteDir' | 'contentPaths' | 'onBrokenMarkdownLink'
+  'blogPostsBySource' | 'siteDir' | 'contentPaths' | 'onBrokenMarkdownLink'
 >;
 
 export function linkify({
@@ -255,18 +261,12 @@ export function linkify({
   contentPaths,
   fileContent,
   siteDir,
-  blogPosts,
+  blogPostsBySource,
   onBrokenMarkdownLink,
 }: LinkifyParams): string {
   // TODO temporary, should consider the file being in localized folder!
   const folderPath = contentPaths.contentPath;
 
-  // TODO perf refactor: do this earlier (once for all md files, not per file)
-  const blogPostsBySource: Record<string, BlogPost> = keyBy(
-    blogPosts,
-    (item) => item.metadata.source,
-  );
-
   let fencedBlock = false;
   const lines = fileContent.split('\n').map((line) => {
     if (line.trim().startsWith('```')) {

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -50,6 +50,7 @@ import {
   generateBlogFeed,
   generateBlogPosts,
   getContentPathList,
+  getPostsBySource,
 } from './blogUtils';
 
 export default function pluginContentBlog(
@@ -415,7 +416,7 @@ export default function pluginContentBlog(
         siteDir,
         contentPaths,
         truncateMarker,
-        blogPosts,
+        blogPostsBySource: getPostsBySource(blogPosts),
         onBrokenMarkdownLink: (brokenMarkdownLink) => {
           if (onBrokenMarkdownLinks === 'ignore') {
             return;

packages/docusaurus-plugin-content-blog/src/types.ts

@@ -151,6 +151,6 @@ export type BlogMarkdownLoaderOptions = {
   siteDir: string;
   contentPaths: BlogContentPaths;
   truncateMarker: RegExp;
-  blogPosts: BlogPost[];
+  blogPostsBySource: Record<string, BlogPost>;
   onBrokenMarkdownLink: (brokenMarkdownLink: BlogBrokenMarkdownLink) => void;
 };

packages/docusaurus/package.json

@@ -56,6 +56,7 @@
     "@docusaurus/utils-validation": "2.0.0-alpha.70",
     "@endiliey/static-site-generator-webpack-plugin": "^4.0.0",
     "@svgr/webpack": "^5.5.0",
+    "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "2.3.0",
     "boxen": "^5.0.0",
@@ -66,7 +67,7 @@
     "commander": "^5.1.0",
     "copy-webpack-plugin": "^6.4.1",
     "core-js": "^2.6.5",
-    "css-loader": "^5.0.2",
+    "css-loader": "^5.1.1",
     "del": "^6.0.0",
     "detect-port": "^1.3.0",
     "eta": "^1.12.1",
@@ -93,7 +94,7 @@
     "null-loader": "^4.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "pnp-webpack-plugin": "^1.6.4",
-    "postcss": "^8.2.6",
+    "postcss": "^8.2.7",
     "postcss-loader": "^4.1.0",
     "postcss-preset-env": "^6.7.0",
     "prompts": "^2.4.0",

packages/docusaurus/src/webpack/utils.ts

@@ -73,12 +73,7 @@ export function getStyleLoaders(
           ident: 'postcss',
           plugins: [
             // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-            require('postcss-preset-env')({
+            require('autoprefixer'),
-              autoprefixer: {
-                flexbox: 'no-2009',
-              },
-              stage: 4,
-            }),
           ],
         },
       },

yarn.lock

@@ -4803,6 +4803,18 @@ autolinker@~0.28.0:
   dependencies:
     gulp-header "^1.7.1"
 
+autoprefixer@^10.2.5:
+  version "10.2.5"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.5.tgz#096a0337dbc96c0873526d7fef5de4428d05382d"
+  integrity sha512-7H4AJZXvSsn62SqZyJCP+1AWwOuoYpUfK6ot9vm0e87XD6mT8lDywc9D9OTJPMULyGcvmIxzTAMeG2Cc+YX+fA==
+  dependencies:
+    browserslist "^4.16.3"
+    caniuse-lite "^1.0.30001196"
+    colorette "^1.2.2"
+    fraction.js "^4.0.13"
+    normalize-range "^0.1.2"
+    postcss-value-parser "^4.1.0"
+
 autoprefixer@^9.4.7, autoprefixer@^9.6.1, autoprefixer@^9.7.5, autoprefixer@^9.8.6:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -5361,6 +5373,17 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4
     escalade "^3.1.1"
     node-releases "^1.1.69"
 
+browserslist@^4.16.3:
+  version "4.16.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
+  integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
+  dependencies:
+    caniuse-lite "^1.0.30001181"
+    colorette "^1.2.1"
+    electron-to-chromium "^1.3.649"
+    escalade "^3.1.1"
+    node-releases "^1.1.70"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -5728,6 +5751,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz#bacb432b6701f690c8c5f7c680166b9a9f0843d9"
   integrity sha512-xJJqzyd+7GCJXkcoBiQ1GuxEiOBCLQ0aVW9HMekifZsAVGdj5eJ4mFB9fEhSHipq9IOk/QXFJUiIr9lZT+EsGw==
 
+caniuse-lite@^1.0.30001181, caniuse-lite@^1.0.30001196:
+  version "1.0.30001196"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001196.tgz#00518a2044b1abf3e0df31fadbe5ed90b63f4e64"
+  integrity sha512-CPvObjD3ovWrNBaXlAIGWmg2gQQuJ5YhuciUOjPRox6hIQttu8O+b51dx6VIpIY9ESd2d0Vac1RKpICdG4rGUg==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -6301,6 +6329,11 @@ colorette@^1.2.1:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
   integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
 
+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
 colors@^1.1.2, colors@^1.2.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
@@ -7015,16 +7048,16 @@ css-has-pseudo@^0.10.0:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
 
-css-loader@^5.0.2:
+css-loader@^5.1.1:
-  version "5.0.2"
+  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.0.2.tgz#24f758dae349bad0a440c50d7e2067742e0899cb"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.1.1.tgz#9362d444a0f7c08c148a109596715c904e252879"
-  integrity sha512-gbkBigdcHbmNvZ1Cg6aV6qh6k9N6XOr8YWzISLQGrwk2mgOH8LLrizhkxbDhQtaLtktyKHD4970S0xwz5btfTA==
+  integrity sha512-5FfhpjwtuRgxqmusDidowqmLlcb+1HgnEDMsi2JhiUrZUcoc+cqw+mUtMIF/+OfeMYaaFCLYp1TaIt9H6I/fKA==
   dependencies:
     camelcase "^6.2.0"
     cssesc "^3.0.0"
     icss-utils "^5.1.0"
     loader-utils "^2.0.0"
-    postcss "^8.2.4"
+    postcss "^8.2.6"
     postcss-modules-extract-imports "^3.0.0"
     postcss-modules-local-by-default "^4.0.0"
     postcss-modules-scope "^3.0.0"
@@ -7975,6 +8008,11 @@ electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.634:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.671.tgz#8feaed6eae42d279fa4611f58c42a5a1eb81b2a0"
   integrity sha512-RTD97QkdrJKaKwRv9h/wGAaoR2lGxNXEcBXS31vjitgTPwTWAbLdS7cEsBK68eEQy7p6YyT8D5BxBEYHu2SuwQ==
 
+electron-to-chromium@^1.3.649:
+  version "1.3.681"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.681.tgz#facd915ae46a020e8be566a2ecdc0b9444439be9"
+  integrity sha512-W6uYvSUTHuyX2DZklIESAqx57jfmGjUkd7Z3RWqLdj9Mmt39ylhBuvFXlskQnvBHj0MYXIeQI+mjiwVddZLSvA==
+
 elf-tools@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/elf-tools/-/elf-tools-1.1.1.tgz#b71bbdd37a9474bde2ad7a86057982da7b166582"
@@ -9414,6 +9452,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fraction.js@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe"
+  integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -14228,6 +14271,11 @@ node-releases@^1.1.61, node-releases@^1.1.69:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08"
   integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==
 
+node-releases@^1.1.70:
+  version "1.1.71"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
+  integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==
+
 node-source-walk@^4.0.0, node-source-walk@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-4.2.0.tgz#c2efe731ea8ba9c03c562aa0a9d984e54f27bc2c"
@@ -16198,12 +16246,12 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.1
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.2.4, postcss@^8.2.6:
+postcss@^8.2.6, postcss@^8.2.7:
-  version "8.2.6"
+  version "8.2.7"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.6.tgz#5d69a974543b45f87e464bc4c3e392a97d6be9fe"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.7.tgz#48ed8d88b4de10afa0dfd1c3f840aa57b55c4d47"
-  integrity sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==
+  integrity sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==
   dependencies:
-    colorette "^1.2.1"
+    colorette "^1.2.2"
     nanoid "^3.1.20"
     source-map "^0.6.1"