diff --git a/documents/adr/0016-unused-css.md b/documents/adr/0016-unused-css.md new file mode 100644 index 00000000..6e22c907 --- /dev/null +++ b/documents/adr/0016-unused-css.md @@ -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. diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss index 6e52c965..1fac4cd6 100644 --- a/packages/design/sass/styles.scss +++ b/packages/design/sass/styles.scss @@ -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";