wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Pull requests Activity Actions

Update CSS Pipeline #4

Merged
wonderfulfrog merged 7 commits from feat/update-css-pipeline into main 2025-05-30 11:16:38 -07:00
Conversation 0 Commits 7 Files changed 59 +344 -1996
wonderfulfrog commented 2025-05-29 23:01:30 -07:00
Owner
Copy link

The goal of this change was to speed up my CSS pipeline. Previously builds would take up to 30s because it had to rebuild the CSS for every page (I inlined the CSS).

This updates the pipeline to remain somewhat the same, but offloads the busywork of computing my theme CSS (my design system in other words), and is replaced by a mostly static file (css/global/lilypad.css), which I can update as my design system changes.

I also offloaded several of my utility classes as I know I will want to use them in other sites I design, so it made sense to move them as well.

The new pipeline makes use of 11ty's bundle feature (newly included in 11ty v3), which allows me to bundle all my CSS together into one file. Since I know my core styles like lilypad.css will always remain the same, I decided to keep that inline. I use the transforms feature for bundling to run a PostCSS transform on the bundled output, which resolves any imports and minifies the final output.

In order to cut down my build times even further, I removed my XML minifier - it was taking upwards of 3 seconds to minify XML to probably a small benefit to end users.

The goal of this change was to speed up my CSS pipeline. Previously builds would take up to 30s because it had to rebuild the CSS for every page (I inlined the CSS). This updates the pipeline to remain somewhat the same, but offloads the busywork of computing my theme CSS (my design system in other words), and is replaced by a mostly static file (`css/global/lilypad.css`), which I can update as my design system changes. I also offloaded several of my utility classes as I know I will want to use them in other sites I design, so it made sense to move them as well. The new pipeline makes use of 11ty's bundle feature (newly included in 11ty v3), which allows me to bundle all my CSS together into one file. Since I know my core styles like `lilypad.css` will always remain the same, I decided to keep that inline. I use the `transforms` feature for bundling to run a PostCSS transform on the bundled output, which resolves any imports and minifies the final output. In order to cut down my build times even further, I removed my XML minifier - it was taking upwards of 3 seconds to minify XML to probably a small benefit to end users.
The goal of this change was to speed up my CSS pipeline. Previously
builds would take up to 30s because it had to rebuild the CSS for every
page (I inlined the CSS).

This updates the pipeline to remain somewhat the same, but offloads the
busywork of computing my theme CSS (my design system in other words),
and is replaced by a mostly static file (`css/global/lilypad.css`),
which I can update as my design system changes.

I also offloaded several of my utility classes as I know I will want to
use them in other sites I design, so it made sense to move them as well.

The new pipeline makes use of 11ty's bundle feature (newly included in
11ty v3), which allows me to bundle all my CSS together into one file.
Since I know my core styles like `lilypad.css` will always remain the
same, I decided to keep that inline. I use the `transforms` feature for
bundling to run a PostCSS transform on the bundled output, which
resolves any imports and minifies the final output.

In order to cut down my build times even further, I removed my XML
minifier - it was taking upwards of 3 seconds to minify XML to probably
a small benefit to end users.
fix: preloads
All checks were successful
Build and Deploy Staging / build_and_deploy (pull_request) Successful in 1m22s
Details
c9d914d3e1
chore: update changelog
All checks were successful
Build and Deploy Staging / build_and_deploy (pull_request) Successful in 1m26s
Details
ec21586d1b
feat: spacing polish
All checks were successful
Build and Deploy Staging / build_and_deploy (pull_request) Successful in 1m31s
Details
ce66bbece8
wonderfulfrog referenced this pull request from a commit 2025-05-30 11:16:39 -07:00
Update CSS Pipeline (#4)
wonderfulfrog deleted branch feat/update-css-pipeline 2025-05-30 11:16:43 -07:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
wonderfulfrog/wonderfulfrog.com!4
No description provided.