carbon-design-system/carbon-for-ibm-dotcom

[styles]: Undefined carbon--mini-units Sass function is left in compiled CSS in some bundler configurations

Closed this issue · 0 comments

m4olivei commented

Description

The @carbon/ibmdotom-styles package is still using carbon--mini-units in a few places, which was removed from Carbon v11.

In our case, this leads to carbon--mini-units being left in the compiled CSS. This leads to an invalid style rule, which the browser will ignore and depedning on the style rule causes unintended visual regressions in some situations.

Component(s) impacted

Any component that has a leftover carbon--mini-units function call. There are 30 occurrences of it's use, one of which is in /scss/globals/utils/_content-width.scss used by a few components.

image

Browser

Chrome

Carbon for IBM.com version

v2.11.1

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

ibm.com

Package

@carbon/ibmdotcom-styles

CodeSandbox example

https://stackblitz.com/edit/vitejs-vite-xbadyn?file=main.scss

Steps to reproduce the issue (if applicable)

Bundle styles from the @carbon/ibmdotcom-styles packages, including one or more components that use carbon--mini-units directly or indirectly.

Expected

The expected length CSS value is rendered to the styles.

Also inspecting the compiled CSS should reveal no instances of carbon--mini-units.

Actual

We get styles like min-block-size: carbon--mini-units(20); in the compiled CSS. This is invalid CSS and leads to visual regressions for certain components in certain situations.

You can see this in the linked Stackblitz. Inspect the page, open main.scss in the Sources panel and notice how carbon--mini-units is in the output. Alternatively, in the Stackblitz terminal, run npm run build, then open the compiled CSS under the dist/ folder. Search for carbon--mini-units and notice that its in a few places in the compiled output.

Release date (if applicable)

No response

Code of Conduct