search

NativeScript / theme

@nativescript/theme
https://v7.docs.nativescript.org/ui/theme
Apache License 2.0
127 stars 44 forks source link

Update sass divisions #293

Closed StefanNedelchev closed 2 years ago

StefanNedelchev commented 3 years ago

During a build I get a couple of scss warnings for using / for division because it seems it's going to be deprecated soon. Example:

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

Recommendation: math.div(blue($color) * 114, 1000)

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

   ╷
75 │     $color-brightness: round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
   │                                                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\@nativescript\theme\scss\mixins\_utilities.scss 75:76  check-contrast()
    node_modules\@nativescript\theme\scss\mixins\_utilities.scss 84:49  alternate()
    node_modules\@nativescript\theme\scss\variables\_index.scss 56:11   @import
    node_modules\@nativescript\theme\scss\core\_index.scss 2:9          @import
    node_modules\@nativescript\theme\core.scss 8:9                      @import
    src\_app-common.scss 1:9                                            @import
    src\app.android.scss 2:9                                            root stylesheet

NOTE: This warning appears on a couple of places. The warning can be seen on a fresh project generated by the nativescript CLI.

As suggested in the warning message - the divisions could be re-written using math.div.

Zryru commented 3 years ago

Same here and some others...


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

Recommendation: math.div(blue(#ffffff) * 114, 1000)

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

   ╷
76 │     $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
   │                                                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@nativescript/theme/scss/mixins/_utilities.scss 76:73  check-contrast()
    node_modules/@nativescript/theme/scss/mixins/_utilities.scss 84:49  alternate()
    node_modules/@nativescript/theme/scss/variables/_index.scss 56:11   @import
    node_modules/@nativescript/theme/scss/core/_index.scss 2:9          @import
    node_modules/@nativescript/theme/core.scss 8:9                      @import
    src/scss/_index.scss 9:9                                            @import
    src/app.android.scss 1:9                                            root stylesheet

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

Recommendation: math.div($light-color, 1.7)

More info and automated migrator: https://sass-lang.com/d/slash-div
cupidchan commented 3 years ago

@shiv19, do you have any estimated time when will this fix be release? Thanks!

shiv19 commented 3 years ago

@cupidchan hey thanks for resurfacing this. I'll talk about it in Monday's meeting. And get it released next week.

cupidchan commented 3 years ago

@cupidchan hey thanks for resurfacing this. I'll talk about it in Monday's meeting. And get it released next week.

Thanks a lot @shiv19! This will help to reduce the warnings we got!

OPADA-Eng commented 2 years ago

Any news on this?

justintoth commented 2 years ago

@shiv19 Looks like your change caused a regression?

ERROR in ./src/app.scss
Module build failed (from ./node_modules/@nativescript/webpack/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
   ╷
77 │     $color-brightness: round((red($color) * 299) + (green($color) * 587) + math.div(blue($color) * 114, 1000));
   │                                                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@nativescript/theme/scss/mixins/_utilities.scss 77:76  check-contrast()
  node_modules/@nativescript/theme/scss/mixins/_utilities.scss 86:49  alternate()
  node_modules/@nativescript/theme/scss/variables/_index.scss 56:11   @import
  node_modules/@nativescript/theme/scss/core/_index.scss 2:9          @import
  node_modules/@nativescript/theme/core.scss 8:9                      @import
  src/app.scss 1:9                                                    root stylesheet
SassError: SassError: Undefined function.
justintoth commented 2 years ago

It turns out that NativeScript uses version 1.32 of sass, when 1.33+ is required for the math functions. I manually installed the latest version of the sass package (I previously didn't have it in packages.json) and that resolved this issue.