USWDS-Sandbox - Testing repo for compile#131 [TEST]

[mahoneycm]

Description

Testing repo for uswds/uswds-compile#131.

Showcases new compile setting that silences USWDS Sass deprecation messages while triggering local sass deprecation warnings.

Testing instructions are found in the linked PR

[mejiaj]

Following testing instructions from uswds/uswds-compile#131 on uswds-sandbox branch cm-test-compile-131.

1. Confirm USWDS deprecations are silenced

Note

The original test instructions say no deprecation warnings, which led to my confusion on the warnings below. In fact, you should see warnings, but they should be from the custom project SASS, like step 3 points out.

1. Go to uswds-sandbox repo
2. Checkout cm-test-compile-131
3. Run npm install
4. Build SASS with npm run uswds:buildSass
5. I get a warning for legacy-js-api
6. On SASS compilation I see deprecation warnings
7. Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
8. Deprecation Warning: color.blue() is deprecated.
9. Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.

Full output

npm run uswds:buildSass

> uswds:buildSass
> gulp buildSass

[10:41:44] Using gulpfile ~/web/uswds-sandbox/gulpfile.js
[10:41:44] Starting 'buildSass'...
[10:41:44] Starting 'logVersion'...
uswds.version: 3
[10:41:44] Finished 'logVersion' after 506 μs
[10:41:44] Starting 'buildSass'...
Compiling with USWDS 3.10.0
Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
5 │ @import "mixins/mixin.scss";
  │         ^^^^^^^^^^^^^^^^^^^
  ╵
    ../../../../src/_styles/_uswds-theme-custom-styles.scss 5:9  @forward
    ../../../../src/_styles/styles.scss 3:1                      root stylesheet

Deprecation Warning: color.blue() is deprecated. Suggestion:

color.channel($color, "blue", $space: rgb)

More info: https://sass-lang.com/d/color-functions

   ╷
13 │   color: color.blue($color: #000000);;
   │          ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    ../../../../src/_styles/_uswds-theme-custom-styles.scss 13:10  @forward
    ../../../../src/_styles/styles.scss 3:1                        root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use math.unit instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
23 │   @if unit($test-unit) != "rem" {
   │       ^^^^^^^^^^^^^^^^
   ╵
    ../../../../src/_styles/_uswds-theme-custom-styles.scss 23:7  @forward
    ../../../../src/_styles/styles.scss 3:1                       root stylesheet

[10:41:47] Finished 'buildSass' after 3.62 s
[10:41:47] Finished 'buildSass' after 3.62 s

2. Confirm quietSassDeps setting is respected

1. On this branch, I've opened gulpfile.js
2. Added the setting

   // gulpfile.js
   uswds.settings.compile.quietSassDeps = true;

3. Run compile SASS script npm run uswds:buildSass
4. Confirming I get a lot more warnings.

3. Confirm custom sass triggers deprecation warnings

Confirming original warnings coming from custom styles.