Skip to content

Commit

Permalink
perf(v2): improve blog mdx-loader and postcss loader (#4355)
Browse files Browse the repository at this point in the history 
* perf(v2): improve blog mdx-loader and postcss loader

* Adjust advanced preset settings

* Update css-loader
  • Loading branch information
@lex111
lex111 committed Mar 8, 2021
1 parent 620b8f8 commit 36dc206
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 32 deletions.
5 changes: 4 additions & 1 deletion packages/docusaurus-cssnano-preset/index.js
View file
Expand Up @@ -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],
Expand Down
4 changes: 2 additions & 2 deletions packages/docusaurus-plugin-content-blog/src/__tests__/linkify.test.ts
View file
Expand Up @@ -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');
Expand Down Expand Up @@ -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)}`,
Expand Down
18 changes: 9 additions & 9 deletions packages/docusaurus-plugin-content-blog/src/blogUtils.ts
View file
Expand Up @@ -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,
Expand All @@ -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?$/;
Expand Down Expand Up @@ -247,26 +253,20 @@ export type LinkifyParams = {
fileContent: string;
} & Pick<
BlogMarkdownLoaderOptions,
'blogPosts' | 'siteDir' | 'contentPaths' | 'onBrokenMarkdownLink'
'blogPostsBySource' | 'siteDir' | 'contentPaths' | 'onBrokenMarkdownLink'
>;

export function linkify({
filePath,
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('```')) {
Expand Down
3 changes: 2 additions & 1 deletion packages/docusaurus-plugin-content-blog/src/index.ts
View file
Expand Up @@ -50,6 +50,7 @@ import {
generateBlogFeed,
generateBlogPosts,
getContentPathList,
getPostsBySource,
} from './blogUtils';

export default function pluginContentBlog(
Expand Down Expand Up @@ -415,7 +416,7 @@ export default function pluginContentBlog(
siteDir,
contentPaths,
truncateMarker,
blogPosts,
blogPostsBySource: getPostsBySource(blogPosts),
onBrokenMarkdownLink: (brokenMarkdownLink) => {
if (onBrokenMarkdownLinks === 'ignore') {
return;
Expand Down
2 changes: 1 addition & 1 deletion packages/docusaurus-plugin-content-blog/src/types.ts
View file
Expand Up @@ -151,6 +151,6 @@ export type BlogMarkdownLoaderOptions = {
siteDir: string;
contentPaths: BlogContentPaths;
truncateMarker: RegExp;
blogPosts: BlogPost[];
blogPostsBySource: Record<string, BlogPost>;
onBrokenMarkdownLink: (brokenMarkdownLink: BlogBrokenMarkdownLink) => void;
};
5 changes: 3 additions & 2 deletions packages/docusaurus/package.json
View file
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
7 changes: 1 addition & 6 deletions packages/docusaurus/src/webpack/utils.ts
View file
Expand Up @@ -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')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 4,
}),
require('autoprefixer'),
],
},
},
Expand Down
68 changes: 58 additions & 10 deletions yarn.lock
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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:
version "5.0.2"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.0.2.tgz#24f758dae349bad0a440c50d7e2067742e0899cb"
integrity sha512-gbkBigdcHbmNvZ1Cg6aV6qh6k9N6XOr8YWzISLQGrwk2mgOH8LLrizhkxbDhQtaLtktyKHD4970S0xwz5btfTA==
css-loader@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.1.1.tgz#9362d444a0f7c08c148a109596715c904e252879"
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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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:
version "8.2.6"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.6.tgz#5d69a974543b45f87e464bc4c3e392a97d6be9fe"
integrity sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==
postcss@^8.2.6, postcss@^8.2.7:
version "8.2.7"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.7.tgz#48ed8d88b4de10afa0dfd1c3f840aa57b55c4d47"
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"

Expand Down

0 comments on commit 36dc206

Please sign in to comment.