Hi,
We are customising kendo-theme-bootstrap using the build process of our application and Dart Sass as per the Kendo documentation. We have started to see the following warnings when compiling our application:
LOG from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($a, $b) or calc($a / $b)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules\@progress\kendo-theme-bootstrap\dist\all.scss 692:15 k-math-div()
<w> node_modules\@progress\kendo-theme-bootstrap\dist\all.scss 385:13 k-color-contrast-ratio()
<w> node_modules\@progress\kendo-theme-bootstrap\dist\all.scss 403:26 k-contrast-color()
<w> node_modules\@progress\kendo-theme-bootstrap\dist\all.scss 3066:24 @import
<w> src\index.scss 23:9 root stylesheet
<w>Is this something we should be concerned about?
Kind regards,
David
1 Answer, 1 is accepted
0
Accepted
Hi, David,
This warning is expected, and you should not have any concerns about it. You can find a detailed explanation from our front-end architect on this matter here:
Regards,
Vessy
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Jens
commented on 02 Feb 2024, 03:56 PM
Top achievements
Rank 1
Rank 1
Ivan Zhekov wrote: "I am marking the issue as completed, because we fixed all but one warning"
Sorry, but there are now more of them and it's really annoying.
Sorry, but there are now more of them and it's really annoying.
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($a, $b) or calc($a / $b)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
1050 │ @return ( $a / $b );
│ ^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 1050:15 k-math-div()
..\..\..\@progress\kendo-theme-material\dist\all.scss 3573:26 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main-dark.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(-12%)
To emit a CSS abs() now: abs(#{-12%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 616:13 k-color-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 642:17 k-try-shade()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20432:105 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main-dark.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(80%)
To emit a CSS abs() now: abs(#{80%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 629:13 k-color-shade()
..\..\..\@progress\kendo-theme-material\dist\all.scss 658:17 k-try-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20622:91 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main-dark.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(84%)
To emit a CSS abs() now: abs(#{84%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 629:13 k-color-shade()
..\..\..\@progress\kendo-theme-material\dist\all.scss 658:17 k-try-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20629:90 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main-dark.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(76%)
To emit a CSS abs() now: abs(#{76%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 629:13 k-color-shade()
..\..\..\@progress\kendo-theme-material\dist\all.scss 658:17 k-try-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20636:94 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main-dark.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(92%)
To emit a CSS abs() now: abs(#{92%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 629:13 k-color-shade()
..\..\..\@progress\kendo-theme-material\dist\all.scss 658:17 k-try-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20656:92 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main-dark.scss 5:9 root stylesheet
Deprecation Warning: $weight: Passing a number without unit % (3) is deprecated.
To preserve current behavior: $weight * 1%
More info: https://sass-lang.com/d/function-units
╷
92 │ @return mix( $color1, $color2, $weight );
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 92:13 k-color-mix()
..\..\..\@progress\kendo-theme-material\dist\all.scss 711:13 k-true-mix()
..\..\..\@progress\kendo-theme-material\dist\all.scss 30904:83 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main-dark.scss 5:9 root stylesheet
Warning: 11 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($a, $b) or calc($a / $b)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
1050 │ @return ( $a / $b );
│ ^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 1050:15 k-math-div()
..\..\..\@progress\kendo-theme-material\dist\all.scss 3573:26 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(12%)
To emit a CSS abs() now: abs(#{12%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 629:13 k-color-shade()
..\..\..\@progress\kendo-theme-material\dist\all.scss 645:13 k-try-shade()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20432:105 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(-92%)
To emit a CSS abs() now: abs(#{-92%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 616:13 k-color-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 661:13 k-try-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20606:122 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(-80%)
To emit a CSS abs() now: abs(#{-80%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 616:13 k-color-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 661:13 k-try-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20622:91 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(-84%)
To emit a CSS abs() now: abs(#{-84%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 616:13 k-color-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 661:13 k-try-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20629:90 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main.scss 5:9 root stylesheet
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(-76%)
To emit a CSS abs() now: abs(#{-76%})
More info: https://sass-lang.com/d/abs-percent
╷
992 │ @return abs( $number );
│ ^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 992:13 k-math-abs()
..\..\..\@progress\kendo-theme-material\dist\all.scss 596:13 k-color-level()
..\..\..\@progress\kendo-theme-material\dist\all.scss 616:13 k-color-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 661:13 k-try-tint()
..\..\..\@progress\kendo-theme-material\dist\all.scss 20636:94 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main.scss 5:9 root stylesheet
Deprecation Warning: $weight: Passing a number without unit % (3) is deprecated.
To preserve current behavior: $weight * 1%
More info: https://sass-lang.com/d/function-units
╷
92 │ @return mix( $color1, $color2, $weight );
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
..\..\..\@progress\kendo-theme-material\dist\all.scss 92:13 k-color-mix()
..\..\..\@progress\kendo-theme-material\dist\all.scss 711:13 k-true-mix()
..\..\..\@progress\kendo-theme-material\dist\all.scss 30904:83 @import
E:\Projekte\kendo-theme-material-test\src\scss\material-main.scss 5:9 root stylesheet
Warning: 12 repetitive deprecation warnings omitted.
Ivan Zhekov
commented on 05 Feb 2024, 09:42 AM
Telerik team
Jens,
My original quoted reply was posted about a year ago and at the time of its writing it was completely valid -- all the warnings stemming from slash division boil down to just one instance.
Indeed, since the time of the posting, the sass team had yet again, introduced another breaking change, namely the change in abs function and the change in function units. Which in turn produce more warnings. I should note that those warnings also boil down to a single instance, as we took the precaution to wrap all sass functions in our scoped counterparts.
We have no real remedy for those warnings, as we still support the older syntax and those warnings are tied to the older syntax. There are no polyfils we can use either.
The only real solution is to migrate the themes to the newer syntax.