Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace use of / (slash) for division with math.div() #199

Closed
kiyaGu opened this issue Jul 30, 2021 · 5 comments
Closed

Replace use of / (slash) for division with math.div() #199

kiyaGu opened this issue Jul 30, 2021 · 5 comments
Assignees
@JakeChampion
Labels
components Relates to an Origami component o-colors

Comments

@kiyaGu
Copy link
Contributor

kiyaGu commented Jul 30, 2021

Feature request

What

Dart Sass will remove use of Slash / for division and instead division will be written using the new math.div() function.

Details

We, Reliability engineering team, are migrating the Bower Origami components used by Heimdall UI with NPM ones. While doing this migration, we have decided to replace node-sass with sass for compiling the .scss files as node-sass is deprecated now.

Due you to the above change, we are getting more than 30 Using / for division is deprecated and will be removed in Dart Sass 2.0.0 deprecation warnings. Some of these warnings are coming from o-colors and some are from o-grid. We have tried to silence these warning but no luck and we are wondering if it is possible to make a new release that fixes these warnings.

Environment

  • node - v14.16.1
  • npm - 7.20.3
  • sass - ^1.36.0

The warnings can be reproduced by cloning this branch and running make build-statics

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($delta, $max)

More info and automated migrator: https://sass-lang.com/d/slash-div
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($red-component * $red-component * $red-magic-number + $green-component * $green-component * $green-magic-number + $blue-component * $blue-component * $blue-magic-number, $brightness-divisor)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
287 │     $number: sqrt((($red-component * $red-component * $red-magic-number) + ($green-component * $green-component * $green-magic-number) + ($blue-component * $blue-component * $blue-magic-number)) / $brightness-divisor);
    │                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 287:16   oColorsColorBrightness()
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 237:20   oColorsGetTextColor()
    node_modules/@financial-times/o-buttons/src/scss/_functions.scss 155:23  -oButtonsGetPrimaryButtonColors()
    node_modules/@financial-times/o-buttons/src/scss/_functions.scss 101:15  -oButtonsGenerateColors()
    node_modules/@financial-times/o-buttons/src/scss/_functions.scss 53:19   -oButtonsGetColors()
    node_modules/@financial-times/o-buttons/src/scss/_mixins.scss 147:18     -oButtonsAdd()
    node_modules/@financial-times/o-buttons/main.scss 107:4                  oButtons()
    node_modules/@financial-times/o-buttons/main.scss 173:2                  @import
    node_modules/@financial-times/o-forms/src/scss/main.scss 1:9             @import
    node_modules/@financial-times/o-forms/main.scss 9:9                      @import
    stdin 11:9                                                               root stylesheet

    ╷
455 │     $saturation: if($max == 0, 0, $delta / $max);
    │                                   ^^^^^^^^^^^^^
    ╵
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 455:32  -oColorsHexToHsbValues()
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 141:8   oColorsGetTone()
    node_modules/@financial-times/o-colors/src/scss/_mixins.scss 173:11     -oColorsSetPaletteTones()
    node_modules/@financial-times/o-colors/main.scss 16:2                   @import
    node_modules/@financial-times/o-normalise/main.scss 1:9                 @import
    stdin 6:9                                                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($max, 255)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
456 │     $brightness: $max / 255;
    │                  ^^^^^^^^^^
    ╵
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 456:15  -oColorsHexToHsbValues()
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 141:8   oColorsGetTone()
    node_modules/@financial-times/o-colors/src/scss/_mixins.scss 173:11     -oColorsSetPaletteTones()
    node_modules/@financial-times/o-colors/main.scss 16:2                   @import
    node_modules/@financial-times/o-normalise/main.scss 1:9                 @import
    stdin 6:9                                                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($brightness, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
417 │     $hsl-luminance: ($brightness/2) * (2 - ($saturation/100));
    │                      ^^^^^^^^^^^^^
    ╵
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 417:19  -oColorsHsbToHex()
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 146:10  oColorsGetTone()
    node_modules/@financial-times/o-colors/src/scss/_mixins.scss 173:11     -oColorsSetPaletteTones()
    node_modules/@financial-times/o-colors/main.scss 16:2                   @import
    node_modules/@financial-times/o-normalise/main.scss 1:9                 @import
    stdin 6:9                                                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($saturation, 100)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
417 │     $hsl-luminance: ($brightness/2) * (2 - ($saturation/100));
    │                                             ^^^^^^^^^^^^^^^
    ╵
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 417:42  -oColorsHsbToHex()
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 146:10  oColorsGetTone()
    node_modules/@financial-times/o-colors/src/scss/_mixins.scss 173:11     -oColorsSetPaletteTones()
    node_modules/@financial-times/o-colors/main.scss 16:2                   @import
    node_modules/@financial-times/o-normalise/main.scss 1:9                 @import
    stdin 6:9                                                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($brightness * $saturation, if($hsl-luminance < 50, $hsl-luminance * 2, 200 - $hsl-luminance * 2))

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
418 │     $hsl-saturation: ($brightness * $saturation) / if($hsl-luminance < 50, $hsl-luminance * 2, 200 - $hsl-luminance * 2);
    │                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 418:19  -oColorsHsbToHex()
    node_modules/@financial-times/o-colors/src/scss/_functions.scss 146:10  oColorsGetTone()
    node_modules/@financial-times/o-colors/src/scss/_mixins.scss 173:11     -oColorsSetPaletteTones()
    node_modules/@financial-times/o-colors/main.scss 16:2                   @import
    node_modules/@financial-times/o-normalise/main.scss 1:9                 @import
    stdin 6:9                                                               root stylesheet

WARNING: 33 repetitive deprecation warnings omitted.
@JakeChampion
Copy link
Contributor

Note: If we move to using the built-in sass modules, then only dart-sass can be used and not lib-sass or ruby-sass as they do not support built-in sass modules

@chee chee transferred this issue from Financial-Times/o-colors Sep 16, 2021
@chee chee added o-colors components Relates to an Origami component breaking Will require a major version bump labels Sep 16, 2021
@chee
Copy link
Member

chee commented Sep 17, 2021 •
edited
Loading

@Financial-Times/origami-core I've marked this as breaking because of Jake's comment above. I don't know if we've told people that only dart-sass is supported?

@chee chee added the current label Oct 13, 2021
@JakeChampion JakeChampion self-assigned this Nov 1, 2021
@JakeChampion JakeChampion removed the breaking Will require a major version bump label Nov 1, 2021
@JakeChampion
Copy link
Contributor

Is this closeable now that #385 is merged?

@JakeChampion
Copy link
Contributor

I think we can close this 👍

@kiyaGu
Copy link
Contributor Author

kiyaGu commented Nov 9, 2021

@JakeChampion thank you very much for addressing this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@JakeChampion JakeChampion

Labels
components Relates to an Origami component o-colors
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@chee @JakeChampion @kiyaGu