inovua / reactdatagrid

Empower Your Data with the best React Data Grid there is
https://reactdatagrid.io
Other
3.45k stars 57 forks source link

SASS Deprecation Warning - Using / for division outside of calc() #388

Open ahaws-govcio opened 9 months ago

ahaws-govcio commented 9 months ago

I am trying to create a custom theme for our ReactDataGrid and running into an issue when trying to compile the SCSS files. Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Relevant code or config Following the documentation for "Creating your own theme" (https://reactdatagrid.io/docs/styling-and-theming#creating-your-own-theme). I've added the @import for base.scss in order to get the structure to work. However, this is where the error is created.

$DATAGRID_THEME_NAME: 'qs-data-grid';
@import '../../../node_modules/@inovua/reactdatagrid-community/style/base.scss';
@import '../../../node_modules/@inovua/reactdatagrid-community/style/theme/default-light/index.scss';

What happened:

[13:59:01] Starting 'sass'...
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($index, 12) or calc($index / 12)

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

   ╷
70 │     animation-delay: -($index * 1s - decimal-round($index/12, 4));
   │                                                    ^^^^^^^^^
   ╵
    node_modules/@inovua/reactdatagrid-community/packages/LoadMask/style/base.scss 70:52  @import
    node_modules/@inovua/reactdatagrid-community/style/base.scss 686:9                    @import
    src/styles/scss/qs-styles.scss 14:9                                                   root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(round($number * $n), $n) or calc(round($number * $n) / $n)

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

   ╷
49 │     @return round($number * $n) / $n;
   │             ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@inovua/reactdatagrid-community/packages/LoadMask/style/round.scss 49:13  decimal-round()
    node_modules/@inovua/reactdatagrid-community/packages/LoadMask/style/base.scss 70:38   @import
    node_modules/@inovua/reactdatagrid-community/style/base.scss 686:9                     @import
    src/styles/scss/qs-styles.scss 14:9                                                    root stylesheet

Reproduction repository: I'm not familiar enough with codesandbox to implement SASS compiler. :(

Problem description: The SASS compile fails with the above "Deprecation Warning"

Suggested solution: I would have to say that the error message provides the suggested fix for the SCSS file. Use math.div() or calc()