[styles]: Undefined carbon--mini-units Sass function is left in compiled CSS in some bundler configurations #11958
Closed
2 tasks done
Assignees
Labels
bug
Something isn't working
dev
Needs some dev work
package: styles
Work necessary for the Carbon for IBM.com styles package
Comments
m4olivei
added
bug
kodiakhq bot
pushed a commit
that referenced
this issue
Aug 7, 2024
### Related Ticket(s) Closes #11958 ### Description Replaces `carbon--mini-units`, which is no longer part of Carbon v11, with the equivalent `$spacing-*` token, or `to-rem` call for the intended pixel size. ### Changelog **Changed** - Replaces all `carbon--mini-units` calls with v11 equivalent. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
The
@carbon/ibmdotom-stylespackage is still usingcarbon--mini-unitsin a few places, which was removed from Carbon v11.In our case, this leads to
carbon--mini-unitsbeing 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-unitsfunction call. There are 30 occurrences of it's use, one of which is in/scss/globals/utils/_content-width.scssused by a few components.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-stylespackages, including one or more components that usecarbon--mini-unitsdirectly 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.scssin the Sources panel and notice howcarbon--mini-unitsis in the output. Alternatively, in the Stackblitz terminal, runnpm run build, then open the compiled CSS under thedist/folder. Search forcarbon--mini-unitsand notice that its in a few places in the compiled output.Release date (if applicable)
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: