-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Selectively import USWDS packages (#422)
* use packages instead of big uswds import * remove unused packages from uswds import * remove database from git * resolve unrecognized package * try purgecss instead of uswds packages * Revert "try purgecss instead of uswds packages" This reverts commit 9bcf48f. * add adr for unused css removal strategy
- Loading branch information
1 parent
867e209
commit a339229
Showing
2 changed files
with
108 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # 16. Unused CSS removal | ||
|
|
||
| Date: 2025-01-10 | ||
|
|
||
| ## Status | ||
|
|
||
| Approved | ||
|
|
||
| ## Context | ||
|
|
||
| During the build of the application, the entirety of USWDS was imported into the project to ease prototyping. As the application is nearing MVP the number of new components that will go into the application has started to level off, and we're nearing a point where the application will need to be production ready. Since CSS is a render-blocking asset, we want to provide a better experience for the users of the application by shipping less code down the wire. | ||
|
|
||
| ## Decision | ||
|
|
||
| Instead of importing all USWDS as a SASS package, we will instead use the [packages](https://designsystem.digital.gov/components/packages/) imports that USWDS provides out of the box. | ||
|
|
||
| Using [PurgeCSS](https://purgecss.com/) and its corresponding Astro integration was also evaluated. Although this method resulted in a much smaller CSS file (110kb on disk compared to 575kb on disk for the USWDS packages build at the time of testing), it requires more setup and a careful audit to make we aren't being too aggressive with removal and accidentally removing styles we do need. | ||
|
|
||
| Using the provided USWDS packages is the sweet spot until there are visual regression and more comprehensive end-to-end test coverage available. | ||
|
|
||
| ## Consequences | ||
|
|
||
| As new features are introduced, developers will need to also make sure that the styles are imported as well. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,87 @@ | ||
| @forward "uswds-theme"; | ||
| @forward "uswds"; | ||
| @forward "usa-accordion"; | ||
| //@forward "usa-add-aspect"; | ||
| @forward "usa-alert"; | ||
| @forward "usa-banner"; | ||
| //@forward "usa-breadcrumb"; | ||
| @forward "usa-button-group"; | ||
| @forward "usa-button"; | ||
| @forward "usa-card"; | ||
| //@forward "usa-character-count"; | ||
| @forward "usa-checkbox"; | ||
| //@forward "usa-checklist"; | ||
| //@forward "usa-collection"; | ||
| //@forward "usa-combo-box"; | ||
| @forward "usa-content"; | ||
| @forward "usa-dark-background"; | ||
| //@forward "usa-date-picker"; | ||
| //@forward "usa-date-range-picker"; | ||
| @forward "usa-display"; | ||
| //@forward "usa-embed-container"; | ||
| @forward "usa-error-message"; | ||
| @forward "usa-fieldset"; | ||
| @forward "usa-file-input"; | ||
| //@forward "usa-fonts"; | ||
| @forward "usa-footer"; | ||
| @forward "usa-form-group"; | ||
| @forward "usa-form"; | ||
| //@forward "usa-graphic-list"; | ||
| @forward "usa-header"; | ||
| @forward "usa-hero"; | ||
| @forward "usa-hint"; | ||
| @forward "usa-icon-list"; | ||
| @forward "usa-icon"; | ||
| @forward "usa-identifier"; | ||
| //@forward "usa-in-page-navigation"; | ||
| @forward "usa-input-list"; | ||
| @forward "usa-input-mask"; | ||
| @forward "usa-input-prefix-suffix"; | ||
| @forward "usa-input"; | ||
| //@forward "usa-intro"; | ||
| @forward "usa-label"; | ||
| //@forward "usa-language-selector"; | ||
| //@forward "usa-layout-docs"; | ||
| @forward "usa-layout-grid"; | ||
| @forward "usa-legend"; | ||
| @forward "usa-link"; | ||
| @forward "usa-list"; | ||
| @forward "usa-media-block"; | ||
| //@forward "usa-memorable-date"; | ||
| //@forward "usa-modal"; | ||
| @forward "usa-nav"; | ||
| @forward "usa-pagination"; | ||
| @forward "usa-paragraph"; | ||
| //@forward "usa-process-list"; | ||
| @forward "usa-prose"; | ||
| @forward "usa-radio"; | ||
| //@forward "usa-range"; | ||
| //@forward "usa-search"; | ||
| @forward "usa-section"; | ||
| @forward "usa-select"; | ||
| @forward "usa-sidenav"; | ||
| //@forward "usa-site-alert"; | ||
| //@forward "usa-site-title"; | ||
| @forward "usa-skipnav"; | ||
| @forward "usa-step-indicator"; | ||
| //@forward "usa-summary-box"; | ||
| @forward "usa-table"; | ||
| //@forward "usa-tag"; | ||
| @forward "usa-textarea"; | ||
| //@forward "usa-time-picker"; | ||
| @forward "usa-tooltip"; | ||
| @forward "usa-type-line-length"; | ||
| @forward "usa-type-setting"; | ||
| @forward "usa-type-spacing"; | ||
| @forward "usa-validation"; | ||
| @forward "uswds-core"; | ||
| @forward "uswds-elements"; | ||
| @forward "uswds-fonts"; | ||
| @forward "uswds-form-controls"; | ||
| @forward "uswds-form-templates"; | ||
| @forward "uswds-global"; | ||
| @forward "uswds-helpers"; | ||
| //@forward "uswds-tokens/colors"; | ||
| @forward "uswds-typography"; | ||
| @forward "uswds-utilities"; | ||
| @forward "uswds-validation"; | ||
| @forward "uswds-custom-styles"; |