[Bug]: New version of SASS package does not work with Carbon (compatibility issue)

[thanusiak]

Package

carbon-components

Browser

Chrome

Package version

10.58.8

React version

v18,v20

Description

New version of SASS:
https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1651

seems to break the rem() function defined by Carbon.

This results in compilation problems during 'rpm run build'

SassError: 2 arguments required, but only 1 was passed.
╷
42 │ min-height: rem(40px);
│ ^^^^^^^^^
╵
node_modules/carbon-components/scss/components/accordion/_accordion.scss 42:17 accordion()
node_modules/carbon-components/scss/components/accordion/_accordion.scss 254:3 @content
node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once.scss 23:5 exports()
node_modules/carbon-components/scss/components/accordion/_accordion.scss 253:1 @import
node_modules/carbon-components/scss/globals/scss/styles.scss 119:9 @import
src/App.scss 12:9

Reproduction/example

Problem is during compilation

Steps to reproduce

Import sass (https://www.npmjs.com/package/sass) in your project - its a dependency of sass-loader (for example).
Make sure you get the latest version (1.65.1).

Import
@import "~carbon-components/scss/globals/scss/styles.scss";
in your scss file

Try executing npm run build

Temporary w/a:

set:
"sass": "1.64.2"
in your override

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[huineng]

yes, facing same issue

[tw15egan]

Thanks for pointing this out! Seems like the issue is being caused by a namespace collision when we are importing our rem function in like @use '../../utilities/convert' as *;. I can resolve this by changing our imports to @use '../../utilities/convert' and then calling the function directly i.e. convert.rem(24px).

I'll work on a PR to fix this today. Until the next release, your best bet is to pin your sass dependency to 1.64.2

[thanusiak]

@tw15egan Thanks, yeah, changing the imports should do the trick, and avoid similar problems in future.

[s100]

I'll work on a PR to fix this today. Until the next release, your best bet is to pin your sass dependency to 1.64.3

It doesn't seem like there is such a thing as [email protected] but [email protected] works. 👍

[tw15egan]

@s100 whoops my mistake! Corrected it now, thanks for pointing that out 😄

[alisonjoseph]

Fix for v11 is included in v11.36.0
Fix for v10 is included in v.10.59.11