Skip to content

Commit

Permalink
Reduce build time by manually specifying which icons to copy in bud.c…
Browse files Browse the repository at this point in the history
…onfig.js
  • Loading branch information
oxyc committed Sep 8, 2024
1 parent 599f070 commit ea316b8
Show file tree
Hide file tree
Showing 10 changed files with 38 additions and 57 deletions.
32 changes: 25 additions & 7 deletions web/app/themes/gds/bud.config.js
Original file line number Diff line number Diff line change
@@ -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'])
Expand All @@ -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'))
Expand Down
37 changes: 0 additions & 37 deletions web/app/themes/gds/build/bud-copy-without-manifest.js

This file was deleted.

2 changes: 1 addition & 1 deletion web/app/themes/gds/postcss.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default {
plugins: [
presetEnv(),
inlineSvg({
paths: ['resources', 'public/svgs'],
paths: ['resources', 'public'],
encode(code) {
return code
.replace(/\(/g, '%28')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion web/app/themes/gds/resources/styles/components/form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions web/app/themes/gds/resources/styles/woocommerce.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -251,15 +251,15 @@ 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');
}
}

.woocommerce-error {
--message-color: var(--gds-color-error);

&::before {
mask-image: svg-load('solid/circle-exclamation.svg');
mask-image: svg-load('svgs/solid/circle-exclamation.svg');
}
}

Expand Down

0 comments on commit ea316b8

Please sign in to comment.