carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.73k stars 1.79k forks source link

[Bug]: `sass@1.77.7` Mixed Declarations deprecation warning in `@carbon/react` #16962

Open ThusSpokeNomad opened 2 months ago

ThusSpokeNomad commented 2 months ago

Sass recently included a new deprecation warning for mixed declarations.

This causes very noisy console output when working on this repo, as well as consumer environments, including the stackblitz sandboxes.

[!IMPORTANT]
This is just a warning and will not fail a build unless specifically configured to fail on warning messages.

Click to expand original issue body text

### Package @carbon/react ### Browser Chrome ### Package version v1.61.0 ### React version v18.2.0 ### Description Sass 1.77.7 recently introduced a deprecation which causes @carbon/react to fail on Vite with React18.2.0 https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1777 > **1.77.7** Declarations that appear after nested rules are deprecated, because the semantics Sass has historically used are different from the semantics specified by CSS. In the future, Sass will adopt the standard CSS semantics. Also: https://sass-lang.com/documentation/breaking-changes/mixed-decls/ > **Breaking Change: Mixed Declarations** CSS is changing the way it handles declarations mixed with nested rules, and we want to make sure Sass matches its behavior. (...) ### Reproduction/example https://stackblitz.com/edit/github-2vsntp?file=package.json ### Steps to reproduce simply install `sass@1.77.7` to use with @carbon/react ### Suggested Severity Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component. ### Application/PAL _No response_ ### Code of Conduct - [X] I agree to follow this project's [Code of Conduct](https://github.com/carbon-design-system/carbon/blob/f555616971a03fd454c0f4daea184adf41fff05b/.github/CODE_OF_CONDUCT.md) - [X] I checked the [current issues](https://github.com/carbon-design-system/carbon/issues) for duplicate problems

Below is the scope of work for this:

### Utility files to update
- [ ] Refactor mixed declarations in `scss/utilities/_button-reset.scss`
- [ ] Refactor mixed declarations in `scss/utilities/_custom-property.scss`
- [ ] Refactor mixed declarations in `scss/utilities/_component-reset.scss`
- [ ] Refactor mixed declarations in `scss/utilities/_focus-outline.scss`
- [ ] Refactor mixed declarations in `scss/utilities/_box-shadow.scss`
- [ ] Refactor mixed declarations in `scss/utilities/_tooltip.scss`
### Component files to update
- [ ] Refactor mixed declarations in `scss/components/popover/_popover.scss`
- [ ] Refactor mixed declarations in `scss/components/tooltip/_tooltip.scss`
- [ ] Refactor mixed declarations in `scss/components/button/_mixins.scss`
- [ ] Refactor mixed declarations in `scss/components/button/_button.scss`
- [ ] Refactor mixed declarations in `scss/components/toggletip/_toggletip.scss`
- [ ] Refactor mixed declarations in `scss/components/overflow-menu/_overflow-menu.scss`
- [ ] Refactor mixed declarations in `scss/components/breadcrumb/_breadcrumb.scss`
- [ ] Refactor mixed declarations in `scss/components/link/_link.scss`
- [ ] Refactor mixed declarations in `scss/components/form/_form.scss`
- [ ] Refactor mixed declarations in `scss/components/checkbox/_checkbox.scss`
- [ ] Refactor mixed declarations in `scss/components/copy-button/_copy-button.scss`
- [ ] Refactor mixed declarations in `scss/components/code-snippet/_code-snippet.scss`
- [ ] Refactor mixed declarations in `scss/components/text-input/_text-input.scss`
- [ ] Refactor mixed declarations in `scss/components/tag/_mixins.scss`
- [ ] Refactor mixed declarations in `scss/components/tag/_tag.scss`
- [ ] Refactor mixed declarations in `scss/components/list-box/_list-box.scss`
- [ ] Refactor mixed declarations in `scss/components/menu/_menu.scss`
- [ ] Refactor mixed declarations in `scss/components/contained-list/_contained-list.scss`
- [ ] Refactor mixed declarations in `scss/components/content-switcher/_content-switcher.scss`
- [ ] Refactor mixed declarations in `scss/components/radio-button/_radio-button.scss`
- [ ] Refactor mixed declarations in `scss/components/search/_search.scss`
- [ ] Refactor mixed declarations in `scss/components/data-table/action/_data-table-action.scss`
- [ ] Refactor mixed declarations in `scss/components/data-table/expandable/_data-table-expandable.scss`
- [ ] Refactor mixed declarations in `scss/components/data-table/skeleton/_data-table-skeleton.scss`
- [ ] Refactor mixed declarations in `scss/components/data-table/sort/_data-table-sort.scss`
- [ ] Refactor mixed declarations in `scss/components/date-picker/_flatpickr.scss`
- [ ] Refactor mixed declarations in `scss/components/date-picker/_date-picker.scss`
- [ ] Refactor mixed declarations in `scss/components/dropdown/_dropdown.scss`
- [ ] Refactor mixed declarations in `scss/components/loading/_animation.scss`
- [ ] Refactor mixed declarations in `scss/components/loading/_loading.scss`
- [ ] Refactor mixed declarations in `scss/components/file-uploader/_file-uploader.scss`
- [ ] Refactor mixed declarations in `scss/components/fluid-list-box/_fluid-list-box.scss`
- [ ] Refactor mixed declarations in `scss/components/number-input/_number-input.scss`
- [ ] Refactor mixed declarations in `scss/components/select/_select.scss`
- [ ] Refactor mixed declarations in `scss/components/text-area/_text-area.scss`
- [ ] Refactor mixed declarations in `scss/components/fluid-time-picker/_fluid-time-picker.scss`
- [ ] Refactor mixed declarations in `scss/components/list/_list.scss`
- [ ] Refactor mixed declarations in `scss/components/modal/_modal.scss`
- [ ] Refactor mixed declarations in `scss/components/notification/_inline-notification.scss`
- [ ] Refactor mixed declarations in `scss/components/notification/_toast-notification.scss`
- [ ] Refactor mixed declarations in `scss/components/notification/_actionable-notification.scss`
- [ ] Refactor mixed declarations in `scss/components/pagination/_pagination.scss`
- [ ] Refactor mixed declarations in `scss/components/pagination/_unstable_pagination.scss`
- [ ] Refactor mixed declarations in `scss/components/pagination-nav/_pagination-nav.scss`
- [ ] Refactor mixed declarations in `scss/components/progress-indicator/_progress-indicator.scss`
- [ ] Refactor mixed declarations in `scss/components/skeleton-styles/_skeleton-styles.scss`
- [ ] Refactor mixed declarations in `scss/components/slider/_slider.scss`
- [ ] Refactor mixed declarations in `scss/components/structured-list/_structured-list.scss`
- [ ] Refactor mixed declarations in `scss/components/structured-list/_mixins.scss`
- [ ] Refactor mixed declarations in `scss/components/tabs/_tabs.scss`
- [ ] Refactor mixed declarations in `scss/components/tile/_tile.scss`
- [ ] Refactor mixed declarations in `scss/components/toggle/_toggle.scss`
- [ ] Refactor mixed declarations in `scss/components/treeview/_treeview.scss`
- [ ] Refactor mixed declarations in `scss/components/ui-shell/header/_header.scss`
- [ ] Refactor mixed declarations in `scss/components/ui-shell/side-nav/_side-nav.scss`
- [ ] Refactor mixed declarations in `scss/components/ui-shell/switcher/_switcher.scss`
tay1orjones commented 2 months ago

@ThusSpokeNomad Thanks! We just noticed too from an internal report of the same error.

We'll work on fixing this, but in the meantime you can ignore the warning, silence the warning or downgrade sass if you'd prefer.

tay1orjones commented 2 months ago

This will probably need to turn into an umbrella issue - I believe we have 1000+ instances we need to fix. Breaking it out per-component will probably make the most sense to keep the PR size manageable/reviewable for each.

This can be a slow-burn lower priority item over multiple sprints as it's just a warning that can be suppressed.

marcellobarile commented 1 month ago

just a warning that can be suppressed

do you know starting from which version of Saas this will become a real problem? I foresee the impossibility of upgrading an existing solution if you don't tackle it promptly.

ThusSpokeNomad commented 1 month ago

just a warning that can be suppressed

do you know starting from which version of Saas this will become a real problem? I foresee the impossibility of upgrading an existing solution if you don't tackle it promptly.

@marcellobarile, as in the description, starting from 1.77.7

marcellobarile commented 1 month ago

as in the description, starting from 1.77.7

if I got it right with 1.77.7 they have introduced the deprecation warning; I was wondering when the deprecations will not be supported anymore. But they state In a future release, Dart Sass will change to match the ordering produced by plain CSS nesting. hence there might not be a milestone yet, nonetheless I hope this will be tackled on time.

AlanGreene commented 1 month ago

From https://sass-lang.com/documentation/breaking-changes/

Dart Sass will emit deprecation warnings for at least three months before releasing a breaking change, and will release the breaking change with a new major version number unless that change is necessary for CSS compatibility. CSS compatibility changes are often both non-disruptive and time-sensitive, so they may be released with new minor version numbers instead.

So it could come in a minor bump (e.g. 1.78.x or later), or a major bump (2.x), depending on how they choose to apply the rules in this case.

Disclaimer: I have no insight into the decision or plans, I'm just an interested party.

tay1orjones commented 3 weeks ago

I put together a list of files that need to be updated. I pulled down https://github.com/carbon-design-system/carbon/pull/17141, updated the css build task to use the verbose log level, piped all the ~1100 deprecation notices we have right now into a file, cut it down to just the file path listed in each, and then deduped that list. I've updated the issue body to contain the list and have the typical format of one of our umbrella issues.