[Repo]: usage of math.div breaks some build tools that do not have the ability to upgrade sass.

[kevinsperrine]

Package

carbon-components, carbon-components-react

Browser

Chrome

Package version

v10.41.0

Description

The addition of math.div added in 10.41.0 do not check for the existence of the function, and causes some build tools to break. This breaks backwards compatibility of some libraries, because the sass version cannot be changed by the user.

For example, in ai-apps/angular and carbon-addons-iot-react the angular library is trying to maintain parity with react by using the react styles; however, angular v11 only support dart-sass v1.32.x and math.div was added in 1.33. These math.div updates prevent the ai-apps/angular package from re-using styles from carbon and still maintain backwards compatibility with angular v11.

CodeSandbox example

n/a

Steps to reproduce

You can see an example of this in the carbon-addons-iot-react build logs from https://app.netlify.com/sites/ai-apps-pal-angular/deploys/615df5061dc8800008ef3170.

3:19:49 PM: ERR! => Failed to build the preview
3:19:49 PM: ERR! ./src/side-panel/side-panel.scss
3:19:49 PM: ERR! Module build failed (from /opt/build/repo/node_modules/sass-loader/dist/cjs.js):
3:19:49 PM: ERR! SassError: Undefined function.
3:19:49 PM: ERR!    ╷
3:19:49 PM: ERR! 41 │   @return math.div($px, $carbon--base-font-size) * 1rem;
3:19:49 PM: ERR!    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3:19:49 PM: ERR!    ╵
3:19:49 PM: ERR!   src/vendor/@ai-apps/styles/scss/vendor/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/_convert.import.scss 41:11  carbon--rem()
3:19:49 PM: ERR!   src/vendor/@ai-apps/styles/scss/vendor/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss 16:23      @import
3:19:49 PM: ERR!   src/vendor/@ai-apps/styles/scss/vendor/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.import.scss 23:9      @import
3:19:49 PM: ERR!   src/vendor/@ai-apps/styles/scss/vendor/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss 10:9              @import
3:19:49 PM: ERR!   src/vendor/@ai-apps/styles/scss/vendor/carbon-components/scss/globals/scss/_css--reset.scss 9:9                                            @import
3:19:49 PM: ERR!   src/vendor/@ai-apps/styles/scss/vendor/carbon-components/scss/globals/scss/_helper-mixins.scss 23:9                                        @import
3:19:49 PM: ERR!   src/vendor/@ai-apps/styles/scss/vendor/carbon-components/scss/globals/scss/_mixins.scss 8:9                                                @import
3:19:49 PM: ERR!   src/vendor/@ai-apps/styles/scss/globals/_vars.scss 2:9                                                                                     @import
3:19:49 PM: ERR!   src/side-panel/side-panel.scss 1:9                                                                                                         root stylesheet

Code of Conduct

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

[tay1orjones]

@kevinsperrine can you force a resolution to sass@1.33.0 for angular? It should be compatible, the release notes only mention one item that may cause issues.

[kevinsperrine]

@kevinsperrine can you force a resolution to sass@1.33.0 for angular? It should be compatible, the release notes only mention one item that may cause issues.

@tay1orjones Unfortunately, no. The forced resolutions can allow the library to build, but the resolution will not force it to be installed by consumers of the library. So, if they are importing the scss and using angular's ng build with v11 it'll still break. This is the only issue currently breaking their backwards compatibility. Otherwise, they can support back to v9. v12 does support math.div, but my understanding is they have lots of consumers on older versions.

[tay1orjones]

@kevinsperrine Gotcha, that's a bummer. The proposed idea to check to see if the function exists before using it sounds like a solid plan. It's worth noting even that will only support back to sass >=1.23.0.

[kevinsperrine]

@tay1orjones Good point. I just checked and the v9 LTS is "sass": "1.26.3" and v10 LTS is "sass": "1.26.10", so I think we're covered.