Skip to content

Commit

Permalink
perf: only bundle woff2 fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
davidmurdoch committed Aug 20, 2024
1 parent 1ef8d87 commit 8fe8185
Show file tree
Hide file tree
Showing 7 changed files with 198 additions and 7 deletions.
3 changes: 2 additions & 1 deletion development/build/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const gulpStylelint = require('gulp-stylelint');
const watch = require('gulp-watch');
const sourcemaps = require('gulp-sourcemaps');
const rtlcss = require('postcss-rtlcss');
const discardFonts = require('postcss-discard-font-face');
const postcss = require('gulp-postcss');
const pipeline = pify(require('readable-stream').pipeline);
const sass = require('sass-embedded');
Expand Down Expand Up @@ -83,7 +84,7 @@ async function buildScssPipeline(src, dest, devMode) {
'-mm-fa-path()': () => new sass.SassString('./fonts/fontawesome'),
},
}).on('error', gulpSass.logError),
postcss([autoprefixer(), rtlcss()]),
postcss([autoprefixer(), rtlcss(), discardFonts(['woff2'])]),
devMode && sourcemaps.write(),
gulp.dest(dest),
].filter(Boolean),
Expand Down
5 changes: 0 additions & 5 deletions development/webpack/utils/plugins/ManifestPlugin/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,6 @@ export class ManifestPlugin<Z extends boolean> {
'.txt',
'.wasm',
'.vtt', // very slow to process?
// ttf is disabled as some were getting corrupted during compression. You
// can test this by uncommenting it, running with --zip, and then unzipping
// the resulting zip file. If it is still broken the unzip operation will
// show an error.
// '.ttf',
'.wav',
'.xml',
]);
Expand Down
4 changes: 3 additions & 1 deletion development/webpack/webpack.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import CopyPlugin from 'copy-webpack-plugin';
import HtmlBundlerPlugin from 'html-bundler-webpack-plugin';
import rtlCss from 'postcss-rtlcss';
import autoprefixer from 'autoprefixer';
import discardFonts from 'postcss-discard-font-face';
import type ReactRefreshPluginType from '@pmmmwh/react-refresh-webpack-plugin';
import { SelfInjectPlugin } from './utils/plugins/SelfInjectPlugin';
import {
Expand Down Expand Up @@ -290,6 +291,7 @@ const config = {
plugins: [
autoprefixer({ overrideBrowserslist: browsersListQuery }),
rtlCss({ processEnv: false }),
discardFonts(['woff2']), // keep woff2 fonts
],
},
},
Expand Down Expand Up @@ -331,7 +333,7 @@ const config = {
},
// images, fonts, wasm, etc.
{
test: /\.(?:png|jpe?g|ico|webp|svg|gif|ttf|eot|woff2?|wasm)$/u,
test: /\.(?:png|jpe?g|ico|webp|svg|gif|woff2|wasm)$/u,
type: 'asset/resource',
generator: { filename: 'assets/[name].[contenthash][ext]' },
},
Expand Down
71 changes: 71 additions & 0 deletions lavamoat/build-system/policy.json
Original file line number Diff line number Diff line change
Expand Up @@ -6668,6 +6668,72 @@
"postcss>source-map-js": true
}
},
"postcss-discard-font-face": {
"packages": {
"postcss-discard-font-face>balanced-match": true,
"postcss-discard-font-face>postcss": true
}
},
"postcss-discard-font-face>postcss": {
"builtin": {
"fs": true,
"path": true
},
"globals": {
"console": true
},
"packages": {
"postcss-discard-font-face>postcss>chalk": true,
"postcss-discard-font-face>postcss>js-base64": true,
"postcss-discard-font-face>postcss>source-map": true,
"postcss-discard-font-face>postcss>supports-color": true
}
},
"postcss-discard-font-face>postcss>chalk": {
"globals": {
"process.env.TERM": true,
"process.platform": true
},
"packages": {
"postcss-discard-font-face>postcss>chalk>ansi-styles": true,
"postcss-discard-font-face>postcss>chalk>escape-string-regexp": true,
"postcss-discard-font-face>postcss>chalk>strip-ansi": true,
"postcss-discard-font-face>postcss>chalk>supports-color": true,
"prettier-eslint>loglevel-colored-level-prefix>chalk>has-ansi": true
}
},
"postcss-discard-font-face>postcss>chalk>strip-ansi": {
"packages": {
"postcss-discard-font-face>postcss>chalk>strip-ansi>ansi-regex": true
}
},
"postcss-discard-font-face>postcss>chalk>supports-color": {
"globals": {
"process.argv": true,
"process.env": true,
"process.platform": true,
"process.stdout": true
}
},
"postcss-discard-font-face>postcss>js-base64": {
"globals": {
"Base64": "write",
"define": true
}
},
"postcss-discard-font-face>postcss>supports-color": {
"globals": {
"process": true
},
"packages": {
"postcss-discard-font-face>postcss>supports-color>has-flag": true
}
},
"postcss-discard-font-face>postcss>supports-color>has-flag": {
"globals": {
"process.argv": true
}
},
"postcss-rtlcss": {
"globals": {
"SuppressedError": true
Expand Down Expand Up @@ -7491,6 +7557,11 @@
"zipToModeAwareCache": true
}
},
"prettier-eslint>loglevel-colored-level-prefix>chalk>has-ansi": {
"packages": {
"prettier-eslint>loglevel-colored-level-prefix>chalk>has-ansi>ansi-regex": true
}
},
"prop-types": {
"globals": {
"console": true,
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -621,6 +621,7 @@
"nyc": "^15.1.0",
"path-browserify": "^1.0.1",
"postcss": "^8.4.32",
"postcss-discard-font-face": "^3.0.0",
"postcss-loader": "^8.1.1",
"postcss-rtlcss": "^4.0.9",
"prettier": "^2.7.1",
Expand Down
68 changes: 68 additions & 0 deletions types/postcss-discard-font-face.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
declare module 'postcss-discard-font-face' {
import { type Plugin as PostCssPlugin } from 'postcss';

/**
* For each font, return `false` to remove, or a new string if you would like
* to transform the *URL*.
*
* @example
* ```typescript
* (url: string, format: string) => {
* return !url.includes('.exe'); // remove if url ends with `.exe`
* }
* ```
*/
type FilterFunction = (url: string, format: string) => boolean | string;

/**
* Allowlist is an array of formats to *keep*.
*
* @example
* ```javascript
* ['ttf', 'svg'] // keep ttf and svg formats
* ```
*/
type Allowlist = string[];

/**
* @example
* ```javascript
* {
* weight: [400],
* style: ['normal']
* }
* ```
*/
type Properties = Record<string, unknown[]>;

/**
* @example
* ```typescript
* const options = {
* font: {
* // keep `Arial` with `weight: 400` and `style: normal`
* Arial: {
* weight: [400],
* style: ["normal"]
* }
* }
* }
* ```
*/
type Options = {
font: {
[fontName: string]: Properties;
};
};

/**
* Discard font faces with PostCSS.
*
* @param filter - A filter function, allowlist, or options object
*/
function discardFontFace(
filter: Allowlist | FilterFunction | Options,
): PostCssPlugin;

export = discardFontFace;
}
53 changes: 53 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -13335,6 +13335,13 @@ __metadata:
languageName: node
linkType: hard

"balanced-match@npm:^0.4.1":
version: 0.4.2
resolution: "balanced-match@npm:0.4.2"
checksum: 10/205ebb42ce8529fa8e043a808b41bfb9818d5f98a8eb76a1cd5483f8a98dd0baefc8a9d940f36b591b1316a04f56b35c32b60ac9b1f848e41e4698672cec6c1e
languageName: node
linkType: hard

"balanced-match@npm:^1.0.0":
version: 1.0.2
resolution: "balanced-match@npm:1.0.2"
Expand Down Expand Up @@ -21021,6 +21028,13 @@ __metadata:
languageName: node
linkType: hard

"has-flag@npm:^1.0.0":
version: 1.0.0
resolution: "has-flag@npm:1.0.0"
checksum: 10/ce3f8ae978e70f16e4bbe17d3f0f6d6c0a3dd3b62a23f97c91d0fda9ed8e305e13baf95cc5bee4463b9f25ac9f5255de113165c5fb285e01b8065b2ac079b301
languageName: node
linkType: hard

"has-flag@npm:^3.0.0":
version: 3.0.0
resolution: "has-flag@npm:3.0.0"
Expand Down Expand Up @@ -23790,6 +23804,13 @@ __metadata:
languageName: node
linkType: hard

"js-base64@npm:^2.1.9":
version: 2.6.4
resolution: "js-base64@npm:2.6.4"
checksum: 10/c1a740a34fbb0ad0a528c2ab8749d7f873b1856a0638826306fcd98502e3c8c833334dff233085407e3201be543e5e71bf9692da7891ca680d9b03d027247a6a
languageName: node
linkType: hard

"js-base64@npm:^3.6.0":
version: 3.6.1
resolution: "js-base64@npm:3.6.1"
Expand Down Expand Up @@ -26260,6 +26281,7 @@ __metadata:
path-browserify: "npm:^1.0.1"
pify: "npm:^5.0.0"
postcss: "npm:^8.4.32"
postcss-discard-font-face: "npm:^3.0.0"
postcss-loader: "npm:^8.1.1"
postcss-rtlcss: "npm:^4.0.9"
prettier: "npm:^2.7.1"
Expand Down Expand Up @@ -29216,6 +29238,16 @@ __metadata:
languageName: node
linkType: hard

"postcss-discard-font-face@npm:^3.0.0":
version: 3.0.0
resolution: "postcss-discard-font-face@npm:3.0.0"
dependencies:
balanced-match: "npm:^0.4.1"
postcss: "npm:^5.0.21"
checksum: 10/968632c4426bb04816787575ad768ad0bca572573366aa7ef2f91069ab5224319bea3517b14d7ffb501f6787bc1d8d4a265f40027d4cc593cfcd7824bf834c34
languageName: node
linkType: hard

"postcss-html@npm:^0.36.0":
version: 0.36.0
resolution: "postcss-html@npm:0.36.0"
Expand Down Expand Up @@ -29452,6 +29484,18 @@ __metadata:
languageName: node
linkType: hard

"postcss@npm:^5.0.21":
version: 5.2.18
resolution: "postcss@npm:5.2.18"
dependencies:
chalk: "npm:^1.1.3"
js-base64: "npm:^2.1.9"
source-map: "npm:^0.5.6"
supports-color: "npm:^3.2.3"
checksum: 10/ad157696a258c37e8cdebd28c575bba8e028276b030621d7ac191f855b61d56de9fe751f405ca088693806971426a7321f0b0201e0e828e99b1960ac8f474215
languageName: node
linkType: hard

"postcss@npm:^7.0.14, postcss@npm:^7.0.16, postcss@npm:^7.0.2, postcss@npm:^7.0.21, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.6, postcss@npm:^7.0.7":
version: 7.0.39
resolution: "postcss@npm:7.0.39"
Expand Down Expand Up @@ -34175,6 +34219,15 @@ __metadata:
languageName: node
linkType: hard

"supports-color@npm:^3.2.3":
version: 3.2.3
resolution: "supports-color@npm:3.2.3"
dependencies:
has-flag: "npm:^1.0.0"
checksum: 10/476a70d263a1f7ac11c26c10dfc58f0d9439edf198005b95f0e358ea8182d06b492d96320f16a841e4e968c7189044dd8c3f3037bd533480d15c7cc00e17c5d8
languageName: node
linkType: hard

"supports-color@npm:^5.3.0":
version: 5.5.0
resolution: "supports-color@npm:5.5.0"
Expand Down

0 comments on commit 8fe8185

Please sign in to comment.