Downgrade sass to supress warnings #383

acouch · 2025-01-22T19:09:49Z

Changes

Downgrades Sass from 1.83.0 to 1.77.0 to suppress warnings documented here: uswds/uswds#5980

Context for reviewers

Before

npm run dev

> app@0.1.0 dev
> next dev

   ▲ Next.js 15.1.1
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.42:3000
   - Environments: .env.development

 ✓ Starting...
 ✓ Ready in 1153ms
 ✓ Compiled /src/middleware in 397ms (129 modules)
 ○ Compiling /[locale] ...
 ⚠ ./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
Deprecation Warning on line 7, column 2 of file:///Users/partisan/workshop/template-application-nextjs/template/%7B%7Bapp_name%7D%7D/node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss:7:2:
Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

7 |   background-color: transparent;

node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss 8:3         button-unstyled()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 91:3                  table-button-default-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 119:3                 table-button-unsorted-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 264:9                 usa-table()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-table-styles.scss 6:5     usa-table-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-content-styles.scss 58:3  usa-content-styles()
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_typography.scss 27:3                       @forward
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_index.scss 5:1                             @forward
node_modules/@uswds/uswds/packages/uswds-elements/_index.scss 1:1                                        @forward
node_modules/@uswds/uswds/packages/uswds-global/_index.scss 4:1                                          @forward
node_modules/@uswds/uswds/packages/uswds/_index.scss 5:1                                                 @forward
src/styles/styles.scss 2:1                                                                               root stylesheet

Import trace for requested module:
./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
./src/styles/styles.scss

./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
Deprecation Warning on line 8, column 2 of file:///Users/partisan/workshop/template-application-nextjs/template/%7B%7Bapp_name%7D%7D/node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss:8:2:
Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

8 |   border: 0;

node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss 9:3         button-unstyled()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 91:3                  table-button-default-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 119:3                 table-button-unsorted-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 264:9                 usa-table()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-table-styles.scss 6:5     usa-table-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-content-styles.scss 58:3  usa-content-styles()
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_typography.scss 27:3                       @forward
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_index.scss 5:1                             @forward
node_modules/@uswds/uswds/packages/uswds-elements/_index.scss 1:1                                        @forward
node_modules/@uswds/uswds/packages/uswds-global/_index.scss 4:1                                          @forward
node_modules/@uswds/uswds/packages/uswds/_index.scss 5:1                                                 @forward
src/styles/styles.scss 2:1                                                                               root stylesheet

Import trace for requested module:
./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
./src/styles/styles.scss

./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
Deprecation Warning on line 9, column 2 of file:///Users/partisan/workshop/template-application-nextjs/template/%7B%7Bapp_name%7D%7D/node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss:9:2:
Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

9 |   border-radius: 0;

node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss 10:3        button-unstyled()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 91:3                  table-button-default-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 119:3                 table-button-unsorted-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 264:9                 usa-table()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-table-styles.scss 6:5     usa-table-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-content-styles.scss 58:3  usa-content-styles()
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_typography.scss 27:3                       @forward
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_index.scss 5:1                             @forward
node_modules/@uswds/uswds/packages/uswds-elements/_index.scss 1:1                                        @forward
node_modules/@uswds/uswds/packages/uswds-global/_index.scss 4:1                                          @forward
node_modules/@uswds/uswds/packages/uswds/_index.scss 5:1                                                 @forward
src/styles/styles.scss 2:1                                                                               root stylesheet

Import trace for requested module:
./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
./src/styles/styles.scss

./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
Deprecation Warning on line 10, column 2 of file:///Users/partisan/workshop/template-application-nextjs/template/%7B%7Bapp_name%7D%7D/node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss:10:2:
Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

10 |   box-shadow: none;

node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss 11:3        button-unstyled()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 91:3                  table-button-default-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 119:3                 table-button-unsorted-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 264:9                 usa-table()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-table-styles.scss 6:5     usa-table-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-content-styles.scss 58:3  usa-content-styles()
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_typography.scss 27:3                       @forward
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_index.scss 5:1                             @forward
node_modules/@uswds/uswds/packages/uswds-elements/_index.scss 1:1                                        @forward
node_modules/@uswds/uswds/packages/uswds-global/_index.scss 4:1                                          @forward
node_modules/@uswds/uswds/packages/uswds/_index.scss 5:1                                                 @forward
src/styles/styles.scss 2:1                                                                               root stylesheet

Import trace for requested module:
./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
./src/styles/styles.scss

./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
Deprecation Warning on line 11, column 2 of file:///Users/partisan/workshop/template-application-nextjs/template/%7B%7Bapp_name%7D%7D/node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss:11:2:
Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

11 |   font-weight: font-weight("normal");

node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/button-unstyled.scss 12:3        button-unstyled()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 91:3                  table-button-default-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 119:3                 table-button-unsorted-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/general/table.scss 264:9                 usa-table()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-table-styles.scss 6:5     usa-table-styles()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/typography/usa-content-styles.scss 58:3  usa-content-styles()
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_typography.scss 27:3                       @forward
node_modules/@uswds/uswds/packages/uswds-elements/src/styles/_index.scss 5:1                             @forward
node_modules/@uswds/uswds/packages/uswds-elements/_index.scss 1:1                                        @forward
node_modules/@uswds/uswds/packages/uswds-global/_index.scss 4:1                                          @forward
node_modules/@uswds/uswds/packages/uswds/_index.scss 5:1                                                 @forward
src/styles/styles.scss 2:1                                                                               root stylesheet

Import trace for requested module:
./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
./src/styles/styles.scss

./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
Invalid deprecation "legacy-js-api".

Import trace for requested module:
./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
./src/styles/styles.scss

./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
658 repetitive deprecation warnings omitted.

Import trace for requested module:
./src/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[11].use[5]!./src/styles/styles.scss
./src/styles/styles.scss
 GET / 200 in 10001ms

After:

$npm run dev

> app@0.1.0 dev
> next dev

   ▲ Next.js 15.1.1
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.42:3000
   - Environments: .env.development

 ✓ Starting...
 ✓ Ready in 2.4s
 ✓ Compiled /src/middleware in 93ms
 ✓ Compiled (129 modules)
 ○ Compiling /[locale] ...
 ✓ Compiled /[locale] in 9.4s (875 modules)
 GET / 200 in 10001ms

aligg · 2025-01-22T19:40:08Z

template/{{app_name}}/package.json

@@ -65,7 +65,7 @@
    "postcss-loader": "^8.0.0",
    "postcss-preset-env": "^10.0.0",
    "prettier": "^3.4.2",
-    "sass": "^1.59.3",
+    "sass": "^1.77.0",


How come the title says downgrade but the prior version is 1.59.3 😅 ?

How come the title says downgrade but the prior version is 1.59.3 😅 ?

npm is weird 😸 ? the version in the package lock file was sass@1.83.0. I ran npm i sass@1.77.0 to "downgrade."

It might be best to pin to that version, ie "sass": "1.77.0" since the warning start with 1.78.0, but not sure what the best practice is there TBH

Update package.json, package-lock.json

2ac6c96

aligg reviewed Jan 22, 2025

View reviewed changes

aligg approved these changes Jan 27, 2025

View reviewed changes

acouch merged commit 0307dad into main Jan 29, 2025
1 check passed

acouch deleted the acouch/deprecate-sass-for-warnings branch January 29, 2025 17:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Downgrade sass to supress warnings #383

Downgrade sass to supress warnings #383

Uh oh!

acouch commented Jan 22, 2025 •

edited

Loading

Uh oh!

aligg Jan 22, 2025

Uh oh!

acouch Jan 27, 2025

Uh oh!

Uh oh!

Uh oh!

Downgrade sass to supress warnings #383

Downgrade sass to supress warnings #383

Uh oh!

Conversation

acouch commented Jan 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Context for reviewers

Before

Uh oh!

aligg Jan 22, 2025

Choose a reason for hiding this comment

Uh oh!

acouch Jan 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

acouch commented Jan 22, 2025 •

edited

Loading