Upgrading USWDS to 3.12.0 throws an error in datagov-11ty #5191
Description
Upgrading to USWDS 3.12.0 introduces a breaking change in our build.
> [email protected] assets:build
> node ./config/buildAssets && npm run assets:autoprefix
✘ [ERROR] Undefined function.
╷
17 │ color.channel(color($token-from-bg), "lightness", $space: hsl) > 50%,
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@uswds/uswds/packages/uswds-core/src/styles/functions/color/is-color-dark.scss 17:5 is-color-dark()
node_modules/@uswds/uswds/packages/uswds-core/src/styles/mixins/helpers/set-icon-from-bg.scss 12:24 set-icon-from-bg()
node_modules/@uswds/uswds/packages/usa-accordion/src/styles/_usa-accordion.scss 61:3 accordion-button-styles()
node_modules/@uswds/uswds/packages/usa-accordion/src/styles/_usa-accordion.scss 193:3 @forward
usa-accordion/src/_index.scss 1:1 @forward
node_modules/@uswds/uswds/packages/uswds/_index.scss 14:1 @forward
- 8:1 root stylesheet [plugin sass-plugin]
Error: Build failed with 1 error:
error: Undefined function.
╷
This is related to a dart-sass breaking change to color functions described here: https://sass-lang.com/documentation/breaking-changes/color-functions/
From what I can tell it is not an issue with USWDS, but rather the esbuild-sass-plugin.
Link to Slack post: https://gsa-tts.slack.com/archives/C3F14AHSQ/p1744820050521739
How to reproduce
- Update datagov-11ty package.json "@uswds/uswds": "3.11.0" -> "3.12.0"
- Run
npm run build
Expected behavior
Site should build with no errors
Actual behavior
node ./config/buildAssets throws the above error
Sketch
- Determine where fix is needed
- ???