Update Sass to modern syntax #3042

thisisdano · 2025-01-05T10:12:31Z

Updates all project Sass to modern Sass syntax. A number of nice quality-of-life issues for devs. Speeds up compile time by about 2-3 seconds. (EDIT: Maybe not that much. Maybe I just got lucky. But it FEELS faster because you don't see all those errors scroll past.) Removes all kinds of noise from the terminal.

Updates Sass to modern use and forward syntax
Fixes nested rule order Sass deprecation
Uses a feature branch of uswds-compile to use modern Sass JS API
Removes livereload to prevent webrick failure noise in the terminal

Important

Based on work from #3041. We'll want to merge after that work, and change the base of this PR to main. It targets #3041 now to show only the relevant changes.

Results in constant webrick errors and a dirty console

It's redundant

This reverts commit 9f07c69.

thisisdano

Added code comments

thisisdano · 2025-01-06T06:45:21Z

css/_uswds-theme-custom-styles.scss

-// TODO: move to uswds once finished
-$theme-site-cols-split: "tablet";
-$theme-site-cols-show: "desktop";
-$theme-grid-gap-default: "md";
-
-$site-measure: 5;
-


These are all now in variables so they can be used properly

thisisdano · 2025-01-06T06:47:36Z

css/_uswds-theme-custom-styles.scss

@@ -112,10 +101,10 @@ abbr[title="required"] {
  $site-banner-icon-color: "blue-40v";
  $site-banner-action-color: "gray-20";
  @include typeset($site-banner-font-family);
+  background-color: color("ink");


They'll be a number of this type of change throughout, changing the order of rules to avoid splitting across nested rules...

thisisdano · 2025-01-06T06:48:40Z

css/_uswds-theme-custom-styles.scss

@@ -453,7 +442,6 @@ abbr[title="required"] {
 }

 .site-subheading {
-  @include typeset-h6;


Removed entirely, since moving to bottom caused some font issues. All it gets us is uppercasing, which I addressed in the previous PR

OK, to be fair, it DOES change the spacing a little between the eyebrow and the h1, but not enough to be an issue

thisisdano · 2025-01-06T06:49:15Z

css/custom-styles/_card-policy.scss

@@ -1,3 +1,5 @@
+@use "uswds-core" as *;


You'll see this in all the files now...

thisisdano · 2025-01-06T06:49:34Z

css/custom-styles/_index.scss

Added an index for easier forwarding

thisisdano · 2025-01-06T06:51:31Z

css/settings/_uswds-site-theme.scss

And lo! Only the settings we use! This took a bunch of diff'ing, but now we only have one small(ish) settings group instead of a bunch of redundant settings over 6 separate files

We can now reference this single file from all our entry points

thisisdano · 2025-01-06T06:52:28Z

css/settings/old/_uswds-theme-color.scss

Moved all the old settings to a directory for reference. We can possibly just delete them now.

thisisdano · 2025-01-06T06:52:47Z

css/uswds-components.scss

+@forward "settings/uswds-site-theme";
+@forward "uswds/packages/uswds";


Way simpler!

thisisdano · 2025-01-06T06:55:16Z

package.json

@@ -43,10 +43,10 @@
    "prestart": "npx gulp build",
    "proof": "bundle exec htmlproofer --enforce-https=false --allow-missing-href=true --only_4xx --ignore-status-codes 403,429 --swap-urls 'https\\://designsystem.digital.gov/:/' --ignore-files '/whats-new/updates/(2017|2018|2019|2020|2021)/,/documentation/code-guidelines/' ./_site",
    "proof:all": "bundle exec htmlproofer --enforce-https=false --allow-missing-href=true --ignore-status-codes 0 --swap-urls 'https\\://designsystem.digital.gov/:/' --ignore-files '/whats-new/updates/(2017|2018|2019|2020|2021)/,/documentation/code-guidelines/' ./_site",
-    "serve": "npm run build:all-assets && bundle exec jekyll serve --drafts --future --incremental --livereload --host=localhost",
+    "serve": "npm run build:all-assets && bundle exec jekyll serve --drafts --future --incremental --host=localhost",


ymmv, but for me livereload just isn't worth it. I get pages and pages of webrick errors in the console, which is way too noisy to notice anything of value. The time saved not just hitting command-R is negligable

For what it's worth, I've pretty much exclusively used the local host link and not the live reload link in my time here ¯_(ツ)_/¯

thisisdano · 2025-01-06T06:56:03Z

package.json

@@ -97,7 +97,7 @@
  },
  "snyk": true,
  "dependencies": {
-    "@uswds/compile": "1.2.1",
+    "@uswds/compile": "github:uswds/uswds-compile#dw-gulp-sass-update",


I'm using a feature branch here where I fixed the Sass JS API deprecation issues. We can link it to a formal compile release when that exists

mejiaj

LGTM, I didn't run into issues on compile or notice any regressions.

Compile issues before/after.

mahoneycm

Looks great! No perceived regressions and no build errors.

Really happy to have this update 👏

mahoneycm · 2025-01-07T21:35:11Z

package.json

@@ -43,10 +43,10 @@
    "prestart": "npx gulp build",
    "proof": "bundle exec htmlproofer --enforce-https=false --allow-missing-href=true --only_4xx --ignore-status-codes 403,429 --swap-urls 'https\\://designsystem.digital.gov/:/' --ignore-files '/whats-new/updates/(2017|2018|2019|2020|2021)/,/documentation/code-guidelines/' ./_site",
    "proof:all": "bundle exec htmlproofer --enforce-https=false --allow-missing-href=true --ignore-status-codes 0 --swap-urls 'https\\://designsystem.digital.gov/:/' --ignore-files '/whats-new/updates/(2017|2018|2019|2020|2021)/,/documentation/code-guidelines/' ./_site",
-    "serve": "npm run build:all-assets && bundle exec jekyll serve --drafts --future --incremental --livereload --host=localhost",
+    "serve": "npm run build:all-assets && bundle exec jekyll serve --drafts --future --incremental --host=localhost",


For what it's worth, I've pretty much exclusively used the local host link and not the live reload link in my time here ¯_(ツ)_/¯

The base branch was changed.

thisisdano and others added 21 commits January 4, 2025 23:21

Rewrite USWDS theme with use

bf87f4b

Move old settings into old folder

37a1966

Use modern syntax (fonts)

5efd342

Use modern syntax (components)

4a4a752

Add modern index files

4b86945

Use modern syntax (utilities)

d9b00ea

Use proper dependencies in custom-styles

b986a4e

Use proper dependencies in mixins

3d23116

Move custom variables to allow use in mixins

00582b5

Use modern syntax (custom)

0ca54f5

Use modern syntax (next and together)

a3e68c8

Fix nested rule order sass deprecations

1e74f70

Use [email protected] compile branch

437ac00

Don't use liverelaod

7f81f6e

Results in constant webrick errors and a dirty console

Don't use a prestart

9f07c69

It's redundant

Utilities need to use important

f8b0466

Fix desktop-lg utility output

524b03c

Merge branch 'dw-update-design-assets' into dw-update-sass

1309c74

Don't use livereload

10b1002

Revert "Don't use a prestart"

d0097f3

This reverts commit 9f07c69.

Merge branch 'dw-update-design-assets' into dw-update-sass

ada6627

thisisdano changed the base branch from main to dw-update-design-assets January 6, 2025 06:43

thisisdano commented Jan 6, 2025

View reviewed changes

thisisdano marked this pull request as ready for review January 6, 2025 06:56

thisisdano requested a review from a team as a code owner January 6, 2025 06:56

thisisdano requested review from mejiaj and mahoneycm January 6, 2025 21:20

thisisdano added 2 commits January 6, 2025 13:49

Fix in-page nav background color

9ea7975

Merge branch 'dw-update-design-assets' into dw-update-sass

1e3a207

thisisdano assigned mejiaj Jan 6, 2025

Merge branch 'dw-update-design-assets' into dw-update-sass

fc4e091

mejiaj previously approved these changes Jan 7, 2025

View reviewed changes

mahoneycm previously approved these changes Jan 7, 2025

View reviewed changes

thisisdano added 2 commits January 7, 2025 22:16

Merge branch 'dw-update-design-assets' into dw-update-sass

5a1700d

Merge branch 'dw-update-design-assets' into dw-update-sass

6c22ef4

Base automatically changed from dw-update-design-assets to main January 8, 2025 18:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Sass to modern syntax #3042

Update Sass to modern syntax #3042

thisisdano commented Jan 5, 2025 •

edited

Loading

thisisdano left a comment

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

thisisdano Jan 6, 2025

mahoneycm Jan 7, 2025

thisisdano Jan 6, 2025

mejiaj left a comment

mahoneycm left a comment

mahoneycm Jan 7, 2025

		@forward "settings/uswds-site-theme";
		@forward "uswds/packages/uswds";

Update Sass to modern syntax #3042

Are you sure you want to change the base?

Update Sass to modern syntax #3042

Conversation

thisisdano commented Jan 5, 2025 • edited Loading

thisisdano left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mejiaj left a comment

Choose a reason for hiding this comment

mahoneycm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thisisdano commented Jan 5, 2025 •

edited

Loading