Skip to content

Fix deprecation warnings by avoiding unquoted string interpolation#4380

Merged
thisisdano merged 1 commit into
uswds:developfrom
aduth:aduth-deprecated-unquoted
Dec 9, 2021
Merged

Fix deprecation warnings by avoiding unquoted string interpolation#4380
thisisdano merged 1 commit into
uswds:developfrom
aduth:aduth-deprecated-unquoted

Conversation

@aduth

@aduth aduth commented Nov 3, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This pull request fixes a deprecation warning that occurs when compiling SASS in legacy SASS compilers, and which silently fails to output icon list coloring styles in Dart SASS. The code as proposed here is compatible across all compilers.

Additional information

Deprecation warnings:

DEPRECATION WARNING on line 55 of src/stylesheets/components/_icon-list.scss:
#{} interpolation near operators will be simplified in a future version of Sass.
To preserve the current behavior, use quotes:

  unquote("#{$color}-#{$grade}")

DEPRECATION WARNING on line 1408 of src/stylesheets/core/_functions.scss:
#{} interpolation near operators will be simplified in a future version of Sass.
To preserve the current behavior, use quotes:

  unquote("#{$color}-#{$grade}")

Styles are still output as expected after these changes:

Click to expand styles
.usa-icon-list--base-lightest .usa-icon-list__icon {
  color: #f0f0f0; }
.usa-icon-list--base-lighter .usa-icon-list__icon {
  color: #dfe1e2; }
.usa-icon-list--base-light .usa-icon-list__icon {
  color: #a9aeb1; }
.usa-icon-list--base .usa-icon-list__icon {
  color: #71767a; }
.usa-icon-list--base-dark .usa-icon-list__icon {
  color: #565c65; }
.usa-icon-list--base-darker .usa-icon-list__icon {
  color: #3d4551; }
.usa-icon-list--base-darkest .usa-icon-list__icon {
  color: #1b1b1b; }
.usa-icon-list--primary-lighter .usa-icon-list__icon {
  color: #d9e8f6; }
.usa-icon-list--primary-light .usa-icon-list__icon {
  color: #73b3e7; }
.usa-icon-list--primary .usa-icon-list__icon {
  color: #005ea2; }
.usa-icon-list--primary-vivid .usa-icon-list__icon {
  color: #0050d8; }
.usa-icon-list--primary-dark .usa-icon-list__icon {
  color: #1a4480; }
.usa-icon-list--primary-darker .usa-icon-list__icon {
  color: #162e51; }
.usa-icon-list--secondary-lighter .usa-icon-list__icon {
  color: #f3e1e4; }
.usa-icon-list--secondary-light .usa-icon-list__icon {
  color: #f2938c; }
.usa-icon-list--secondary .usa-icon-list__icon {
  color: #d83933; }
.usa-icon-list--secondary-vivid .usa-icon-list__icon {
  color: #e41d3d; }
.usa-icon-list--secondary-dark .usa-icon-list__icon {
  color: #b50909; }
.usa-icon-list--secondary-darker .usa-icon-list__icon {
  color: #8b0a03; }
.usa-icon-list--accent-warm-lighter .usa-icon-list__icon {
  color: #f2e4d4; }
.usa-icon-list--accent-warm-light .usa-icon-list__icon {
  color: #ffbc78; }
.usa-icon-list--accent-warm .usa-icon-list__icon {
  color: #fa9441; }
.usa-icon-list--accent-warm-dark .usa-icon-list__icon {
  color: #c05600; }
.usa-icon-list--accent-warm-darker .usa-icon-list__icon {
  color: #775540; }
.usa-icon-list--accent-cool-lighter .usa-icon-list__icon {
  color: #e1f3f8; }
.usa-icon-list--accent-cool-light .usa-icon-list__icon {
  color: #97d4ea; }
.usa-icon-list--accent-cool .usa-icon-list__icon {
  color: #00bde3; }
.usa-icon-list--accent-cool-dark .usa-icon-list__icon {
  color: #28a0cb; }
.usa-icon-list--accent-cool-darker .usa-icon-list__icon {
  color: #07648d; }
.usa-icon-list--error-lighter .usa-icon-list__icon {
  color: #f4e3db; }
.usa-icon-list--error-light .usa-icon-list__icon {
  color: #f39268; }
.usa-icon-list--error .usa-icon-list__icon {
  color: #d54309; }
.usa-icon-list--error-dark .usa-icon-list__icon {
  color: #b50909; }
.usa-icon-list--error-darker .usa-icon-list__icon {
  color: #6f3331; }
.usa-icon-list--warning-lighter .usa-icon-list__icon {
  color: #faf3d1; }
.usa-icon-list--warning-light .usa-icon-list__icon {
  color: #fee685; }
.usa-icon-list--warning .usa-icon-list__icon {
  color: #ffbe2e; }
.usa-icon-list--warning-dark .usa-icon-list__icon {
  color: #e5a000; }
.usa-icon-list--warning-darker .usa-icon-list__icon {
  color: #936f38; }
.usa-icon-list--success-lighter .usa-icon-list__icon {
  color: #ecf3ec; }
.usa-icon-list--success-light .usa-icon-list__icon {
  color: #70e17b; }
.usa-icon-list--success .usa-icon-list__icon {
  color: #00a91c; }
.usa-icon-list--success-dark .usa-icon-list__icon {
  color: #008817; }
.usa-icon-list--success-darker .usa-icon-list__icon {
  color: #216e1f; }
.usa-icon-list--info-lighter .usa-icon-list__icon {
  color: #e7f6f8; }
.usa-icon-list--info-light .usa-icon-list__icon {
  color: #99deea; }
.usa-icon-list--info .usa-icon-list__icon {
  color: #00bde3; }
.usa-icon-list--info-dark .usa-icon-list__icon {
  color: #009ec1; }
.usa-icon-list--info-darker .usa-icon-list__icon {
  color: #2e6276; }
.usa-icon-list--disabled-light .usa-icon-list__icon {
  color: #e6e6e6; }
.usa-icon-list--disabled .usa-icon-list__icon {
  color: #c9c9c9; }
.usa-icon-list--disabled-dark .usa-icon-list__icon {
  color: #adadad; }
.usa-icon-list--emergency .usa-icon-list__icon {
  color: #9c3d10; }
.usa-icon-list--emergency-dark .usa-icon-list__icon {
  color: #332d29; }

Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

@aduth
Avoid unquoted string interpolation
e3b1189 
**Why**: For Dart SASS compatibility
@aduth aduth mentioned this pull request Nov 3, 2021
Merged
4 tasks
@thisisdano thisisdano merged commit 6f7fcb9 into uswds:develop Dec 9, 2021
@aduth aduth mentioned this pull request Dec 13, 2021
Closed
@aduth aduth deleted the aduth-deprecated-unquoted branch December 13, 2021 16:23
@thisisdano thisisdano mentioned this pull request Dec 14, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@aduth @thisisdano