refactor: added &{} rules for styles below nested rules to follow [email protected] ruleset.

[Gururajj77]

Part of #16962

added the css rules that are written after the @include mixins in the scss, inside &{}, which is the recommended way to write styles after breaking change introduced by sass in the version 1.77.7

Changelog

New

• updated the sass to use the package version above 1.77.7

Changed

• added &{} rules for styles below nested rules

Testing / Reviewing

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	76c374d
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66d0b43b94058c00082af231
😎 Deploy Preview	https://deploy-preview-17141--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	76c374d
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66d0b43b1585900008145fb0
😎 Deploy Preview	https://deploy-preview-17141--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tay1orjones]

I'm not sure what the best option is relating to the stylelint rule failures with scss/selector-no-redundant-nesting-selector, and no-duplicate-selectors. Some related discussion in these issues:

• Invalid rules for nesting & selectors for sass 1.77.7 stylelint-scss/stylelint-scss#1020
• Fix no-duplicate-selectors false positives for single nesting selector stylelint/stylelint#7893

I wonder if as part of this we should validate if these styles need to come after the mixin to override values coming from the mixin. That way we'd only have the & { } ampersand nesting where we absolutely need it. The downside with doing that is it'll be remarkably slower than applying a blanket approach. I suppose we could infer that any styles that come after a mixin should use ampersand nesting. If there's no mixin involved we could avoid ampersand nesting. What do you think after testing the waters with the accordion styles?

The other failures look formatting-related which prettier should handle for you. I have the prettier vscode extension set to format on save so I don't have to run the command manually.

Also to recap from our convo earlier today - we don't need to update any sass version ranges in peer deps. Only the hard deps and devDeps need updated.

[tay1orjones]

Recapping our pairing session today, I left some comments about why the snapshot was changing.

[tay1orjones]

This diff looks okay to me, it appears it's just changing the output of calc from multi-line to single line, and removes uneeded parens - e.g.

- "value": "calc(1.5rem +
-       0.25 *
-       ((100vw - 20rem) / 46)
-     )",
+ "value": "calc(1.5rem + 0.25 * (100vw - 20rem) / 46)",

So this removes 3 lines, which over the course of the entire file changes what line each selector/delcaration/property was on.

[tay1orjones]

Something between these version is why the type test snapshot is changing, though I couldn't pin down exactly what in the changelog https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1621

[guidari]

LGTM! 🚀