From ea316b8afd1d7363084c1e9102e12f3c76339ce7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Sch=C3=B6ldstr=C3=B6m?= Date: Sun, 8 Sep 2024 08:50:28 -0300 Subject: [PATCH] Reduce build time by manually specifying which icons to copy in bud.config.js --- web/app/themes/gds/bud.config.js | 32 ++++++++++++---- .../gds/build/bud-copy-without-manifest.js | 37 ------------------- web/app/themes/gds/postcss.config.js | 2 +- .../blocks/woo-product-tabs/style.scss | 2 +- .../styles/blocks/core-post-date.scss | 2 +- .../styles/blocks/core-read-more.scss | 2 +- .../styles/blocks/gravityforms-form.scss | 4 +- .../styles/components/collapsed-search.scss | 2 +- .../gds/resources/styles/components/form.scss | 2 +- .../gds/resources/styles/woocommerce.scss | 10 ++--- 10 files changed, 38 insertions(+), 57 deletions(-) delete mode 100644 web/app/themes/gds/build/bud-copy-without-manifest.js diff --git a/web/app/themes/gds/bud.config.js b/web/app/themes/gds/bud.config.js index 5635d3e0..94b78cd1 100644 --- a/web/app/themes/gds/bud.config.js +++ b/web/app/themes/gds/bud.config.js @@ -1,14 +1,12 @@ import {homedir} from 'os'; import {resolve, relative} from 'node:path'; import BudBlock from './build/bud-block.js'; -import BudCopyWithoutManifest from './build/bud-copy-without-manifest.js'; /** * @type {import('@roots/bud').Config} */ export default async (app) => { app.extensions.add(BudBlock); - app.extensions.add(BudCopyWithoutManifest); app .entry('scripts/app', ['@scripts/app']) @@ -18,11 +16,31 @@ export default async (app) => { .entry('styles/editor-overrides', ['@styles/editor-overrides']) .entry('styles/woocommerce', ['@styles/woocommerce']) .assets(['images', 'fonts']) - .copyFile('jquery.min.js', await app.module.getDirectory(`jquery/dist`)) - .copyWithoutManifest( - 'svgs', - await app.module.getDirectory(`@fortawesome/fontawesome-pro`), - ); + .copyFile('jquery.min.js', await app.module.getDirectory(`jquery/dist`)); + + const fontawesomeDir = await app.module.getDirectory( + `@fortawesome/fontawesome-pro`, + ); + + [ + 'svgs/brands/facebook.svg', + 'svgs/brands/twitter.svg', + 'svgs/brands/youtube.svg', + 'svgs/regular/envelope.svg', + 'svgs/regular/link.svg', + 'svgs/regular/share-nodes.svg', + 'svgs/solid/calendar-week.svg', + 'svgs/solid/circle-check.svg', + 'svgs/solid/circle-exclamation.svg', + 'svgs/solid/circle-info.svg', + 'svgs/solid/check.svg', + 'svgs/solid/chevron-down.svg', + 'svgs/solid/chevron-left.svg', + 'svgs/solid/chevron-right.svg', + 'svgs/solid/magnifying-glass.svg', + 'svgs/solid/star.svg', + 'svgs/solid/xmark.svg', + ].forEach((file) => app.copyFile(file, fontawesomeDir)); app .alias('@blocks', resolve('resources/blocks')) diff --git a/web/app/themes/gds/build/bud-copy-without-manifest.js b/web/app/themes/gds/build/bud-copy-without-manifest.js deleted file mode 100644 index 0d7b5eb5..00000000 --- a/web/app/themes/gds/build/bud-copy-without-manifest.js +++ /dev/null @@ -1,37 +0,0 @@ -import {Extension} from '@roots/bud-framework/extension'; -import {cp} from 'node:fs/promises'; - -export default class BudCopyWithoutManifest extends Extension { - tasks = []; - - constructor(...args) { - super(...args); - this.app['copyWithoutManifest'] = this.copy.bind(this); - } - - async copy(request, context) { - if (!context) { - context = this.app.path('@src'); - } - - const source = `${context}/${request}`; - const target = `${this.app.path('@dist')}/${request}`; - this.tasks.push([source, target, {recursive: true}]); - return this.app; - } - - /** - * @type {import('@roots/bud').Config} - */ - async register(bud) { - const copy = async () => { - await Promise.all(this.tasks.map((args) => cp(...args))); - }; - - bud.hooks.action('compiler.before', copy); - - if (bud.isProduction) { - bud.hooks.action('compiler.done', copy); - } - } -} diff --git a/web/app/themes/gds/postcss.config.js b/web/app/themes/gds/postcss.config.js index 4b583e4d..2079194d 100644 --- a/web/app/themes/gds/postcss.config.js +++ b/web/app/themes/gds/postcss.config.js @@ -5,7 +5,7 @@ export default { plugins: [ presetEnv(), inlineSvg({ - paths: ['resources', 'public/svgs'], + paths: ['resources', 'public'], encode(code) { return code .replace(/\(/g, '%28') diff --git a/web/app/themes/gds/resources/blocks/woo-product-tabs/style.scss b/web/app/themes/gds/resources/blocks/woo-product-tabs/style.scss index dfb065a5..abe8c7b5 100644 --- a/web/app/themes/gds/resources/blocks/woo-product-tabs/style.scss +++ b/web/app/themes/gds/resources/blocks/woo-product-tabs/style.scss @@ -109,7 +109,7 @@ height: 1em; display: inline-block; text-decoration: none; - mask-image: svg-load('solid/star.svg'); + mask-image: svg-load('svgs/solid/star.svg'); mask-repeat: no-repeat; mask-size: 1em; background-color: var(--gds-color-mid-gray); diff --git a/web/app/themes/gds/resources/styles/blocks/core-post-date.scss b/web/app/themes/gds/resources/styles/blocks/core-post-date.scss index 222de5aa..4d495733 100644 --- a/web/app/themes/gds/resources/styles/blocks/core-post-date.scss +++ b/web/app/themes/gds/resources/styles/blocks/core-post-date.scss @@ -14,7 +14,7 @@ display: inline-block; width: 1em; height: 1em; - mask-image: svg-load('solid/calendar-week.svg'); + mask-image: svg-load('svgs/solid/calendar-week.svg'); mask-size: contain; mask-repeat: no-repeat; background: var(--icon-color, var(--gds-color-primary)); diff --git a/web/app/themes/gds/resources/styles/blocks/core-read-more.scss b/web/app/themes/gds/resources/styles/blocks/core-read-more.scss index e1402d0d..5e98e6cb 100644 --- a/web/app/themes/gds/resources/styles/blocks/core-read-more.scss +++ b/web/app/themes/gds/resources/styles/blocks/core-read-more.scss @@ -18,7 +18,7 @@ width: 1em; height: 1em; display: block; - mask-image: svg-load('solid/chevron-right.svg'); + mask-image: svg-load('svgs/solid/chevron-right.svg'); mask-position: center; mask-size: contain; mask-repeat: no-repeat; diff --git a/web/app/themes/gds/resources/styles/blocks/gravityforms-form.scss b/web/app/themes/gds/resources/styles/blocks/gravityforms-form.scss index 15e2c5f0..4ff68d77 100644 --- a/web/app/themes/gds/resources/styles/blocks/gravityforms-form.scss +++ b/web/app/themes/gds/resources/styles/blocks/gravityforms-form.scss @@ -408,7 +408,7 @@ img.gform_ajax_spinner { .ui-icon-circle-triangle-w, .ui-icon-circle-triangle-e { - mask-image: svg-load('solid/chevron-left.svg'); + mask-image: svg-load('svgs/solid/chevron-left.svg'); mask-repeat: no-repeat; background-color: currentcolor; display: inline-block; @@ -419,7 +419,7 @@ img.gform_ajax_spinner { } .ui-icon-circle-triangle-e { - mask-image: svg-load('solid/chevron-right.svg'); + mask-image: svg-load('svgs/solid/chevron-right.svg'); } &-title { diff --git a/web/app/themes/gds/resources/styles/components/collapsed-search.scss b/web/app/themes/gds/resources/styles/components/collapsed-search.scss index f5c2e95c..fde51b0a 100644 --- a/web/app/themes/gds/resources/styles/components/collapsed-search.scss +++ b/web/app/themes/gds/resources/styles/components/collapsed-search.scss @@ -44,7 +44,7 @@ &::-webkit-search-cancel-button { appearance: none; - mask-image: svg-load('solid/xmark.svg'); + mask-image: svg-load('svgs/solid/xmark.svg'); mask-size: contain; mask-repeat: no-repeat; background-color: currentcolor; diff --git a/web/app/themes/gds/resources/styles/components/form.scss b/web/app/themes/gds/resources/styles/components/form.scss index 47047fe6..1a6b6115 100644 --- a/web/app/themes/gds/resources/styles/components/form.scss +++ b/web/app/themes/gds/resources/styles/components/form.scss @@ -34,7 +34,7 @@ @mixin select { appearance: none; // safari - background-image: svg-load('solid/chevron-down.svg'); + background-image: svg-load('svgs/solid/chevron-down.svg'); background-repeat: no-repeat; background-position: calc(100% - 16px) center; background-size: 14px; diff --git a/web/app/themes/gds/resources/styles/woocommerce.scss b/web/app/themes/gds/resources/styles/woocommerce.scss index f87f749e..8dc4b0f5 100644 --- a/web/app/themes/gds/resources/styles/woocommerce.scss +++ b/web/app/themes/gds/resources/styles/woocommerce.scss @@ -173,7 +173,7 @@ body.my-account.logged-in .woocommerce { .wc-block-review-list-item__rating__stars.wc-block-components-review-list-item__rating__stars.wc-block-review-list-item__rating__stars, .wc-block-grid__product-rating__stars.wc-block-grid__product-rating__stars, .star-rating.star-rating { - mask-image: svg-load('solid/star.svg'); + mask-image: svg-load('svgs/solid/star.svg'); mask-repeat: repeat-x; mask-size: 1em; height: 1em; @@ -194,7 +194,7 @@ body.my-account.logged-in .woocommerce { &::before { display: block; content: '' !important; - mask-image: svg-load('solid/star.svg'); + mask-image: svg-load('svgs/solid/star.svg'); mask-repeat: repeat-x; mask-size: 1em; height: 1em; @@ -224,7 +224,7 @@ body.my-account.logged-in .woocommerce { &::before { content: ''; - mask-image: svg-load('solid/circle-check.svg'); + mask-image: svg-load('svgs/solid/circle-check.svg'); mask-position: center; mask-repeat: no-repeat; background: var(--message-color); @@ -251,7 +251,7 @@ body.my-account.logged-in .woocommerce { --message-color: var(--gds-color-primary); &::before { - mask-image: svg-load('solid/circle-info.svg'); + mask-image: svg-load('svgs/solid/circle-info.svg'); } } @@ -259,7 +259,7 @@ body.my-account.logged-in .woocommerce { --message-color: var(--gds-color-error); &::before { - mask-image: svg-load('solid/circle-exclamation.svg'); + mask-image: svg-load('svgs/solid/circle-exclamation.svg'); } }