[styles] Remove deprecated division syntax

[nickofthyme]

Summary

Removes deprecated and soon to be removed division syntax in scss files. This currently only shows a deprecation warning but when used in storybook throws an error.

fix #4912

I ran the suggested migrator as shown below.

npm install -g sass-migrator
sass-migrator division **/*.scss

This favors replacing division with multiplication of decimals for simple cases such as...

- $height: $euiSizeM / 2;
+ $height: $euiSizeM * .5;

For more complex divisors it converts to using math.div such as...

- $line-height: ($baseLineHeightMultiplier * 6) / $fontSizeH1;
+ @use "sass:math";
+ $line-height: math.div(($baseLineHeightMultiplier * 6) / $fontSizeH1);

But this is not supported in node-sass so instead I convert this to use calc...

- $line-height: ($baseLineHeightMultiplier * 6) / $fontSizeH1;
+ $line-height: calc(($baseLineHeightMultiplier * 6) / $fontSizeH1);

Finally cleanup styles with...

yarn lint-sass-fix

See https://sass-lang.com/documentation/breaking-changes/slash-div

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in Chrome, Safari, Edge, and Firefox
• A changelog entry exists and is marked appropriately

[nickofthyme]

Unfortunately using the calc approach in complex functions does not work in place of math.div. In order to fix this eui would need to migrate from node-sass to sass.

[wapenshaw]

In order to fix this eui would need to migrate from node-sass to sass.

@nickofthyme
is this going to happen in the future? curently I am getting around this by sticking to sass@1.32.13 which works

[nickofthyme]

@wapenshaw not sure it's a priority since they are moving to CSS-in-JS.

@chandlerprall any thoughts on migrating from node-sass to sass? Another alternative to migrating to sass might be to use sass-embedded.

[chandlerprall]

not sure it's a priority since they are moving to CSS-in-JS

Indeed, upgrading (or exchanging) those dependencies is very low priority, and has been, because of the CSS-in-JS effort. It's unlikely anyone from the team would pick that up, but we'd be willing to work with anyone else who wanted to take it on.