Deprecation warning Sass / _functions.scss luminance() / mixins/_forms.scss

[Skjall]

Building on github with NodeJS 22.9.0, vite 5.4.8, sass 1.79.4

While building, I get the following warnings: Everything works fine. I've silenced it for now. This is just a heads-up for the future.

DEPRECATION WARNING: red() is deprecated. Suggestion:
color.channel($color, "red", $space: rgb)
More info: https://sass-lang.com/d/color-functions
    ╷
18[5](https://github.com/xxx/xxx-frontend-coreui/actions/runs/11159266273/job/31017307528?pr=220#step:7:6) │     "r": red($color),
    │          ^^^^^^^^^^^
    ╵
    node_modules/@coreui/coreui-pro/scss/_functions.scss 1[8](https://github.com/xxx/xxx-frontend-coreui/actions/runs/11159266273/job/31017307528?pr=220#step:7:9)5:10  luminance()
    node_modules/@coreui/coreui-pro/scss/_functions.scss 174:8   contrast-ratio()
    node_modules/@coreui/coreui-pro/scss/_functions.scss 15[9](https://github.com/xxx/xxx-frontend-coreui/actions/runs/11159266273/job/31017307528?pr=220#step:7:10):22  color-contrast()
    node_modules/@coreui/coreui-pro/scss/_variables.scss 941:42  @import
    node_modules/@coreui/coreui-pro/scss/coreui.scss 7:9         @import
    src/styles/style.scss 8:9                                    @import
    src/App.vue 3:9                                              root stylesheet

DEPRECATION WARNING: green() is deprecated. Suggestion:
color.channel($color, "green", $space: rgb)
More info: https://sass-lang.com/d/color-functions
    ╷
186 │     "g": green($color),
    │          ^^^^^^^^^^^^^
    ╵
    node_modules/@coreui/coreui-pro/scss/_functions.scss 186:[10](https://github.com/xxx/xxx-frontend-coreui/actions/runs/11159266273/job/31017307528?pr=220#step:7:11)  luminance()
    node_modules/@coreui/coreui-pro/scss/_functions.scss 174:8   contrast-ratio()
    node_modules/@coreui/coreui-pro/scss/_functions.scss 159:22  color-contrast()
    node_modules/@coreui/coreui-pro/scss/_variables.scss 941:42  @import
    node_modules/@coreui/coreui-pro/scss/coreui.scss 7:9         @import
    src/styles/style.scss 8:9                                    @import
    src/App.vue 3:9                                              root stylesheet
DEPRECATION WARNING: blue() is deprecated. Suggestion:
color.channel($color, "blue", $space: rgb)
More info: https://sass-lang.com/d/color-functions
    ╷
187 │     "b": blue($color)
    │          ^^^^^^^^^^^^
    ╵
    node_modules/@coreui/coreui-pro/scss/_functions.scss 187:10  luminance()
    node_modules/@coreui/coreui-pro/scss/_functions.scss 174:8   contrast-ratio()
    node_modules/@coreui/coreui-pro/scss/_functions.scss 159:22  color-contrast()
    node_modules/@coreui/coreui-pro/scss/_variables.scss 941:42  @import
    node_modules/@coreui/coreui-pro/scss/coreui.scss 7:9         @import
   ╵
   ┌──> node_modules/@coreui/coreui-pro/scss/mixins/_ltr-rtl.scss
[11](https://github.com/xxx/xxx-frontend-coreui/actions/runs/11159266273/job/31017307528?pr=220#step:7:12) │ ┌     *[dir="rtl"] & {
[12](https://github.com/xxx/xxx-frontend-coreui/actions/runs/11159266273/job/31017307528?pr=220#step:7:13) │ │       @content;
13 │ │     }
   │ └─── nested rule
   ╵
    node_modules/@coreui/coreui-pro/scss/mixins/_forms.scss 67:9      @content
    node_modules/@coreui/coreui-pro/scss/mixins/_forms.scss 9:7       form-validation-state-selector()
    node_modules/@coreui/coreui-pro/scss/mixins/_forms.scss 59:5      form-validation-state()
    node_modules/@coreui/coreui-pro/scss/forms/_validation.scss 10:3  @import
    node_modules/@coreui/coreui-pro/scss/_forms.scss 10:9             @import
    node_modules/@coreui/coreui-pro/scss/coreui.scss [21](https://github.com/xxx/xxx-frontend-coreui/actions/runs/11159266273/job/31017307528?pr=220#step:7:22):9             @import
    src/styles/style.scss 8:9                                         @import
    src/App.vue 3:9                                                   root stylesheet

DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
More info: https://sass-lang.com/d/mixed-decls
   ┌──> node_modules/@coreui/coreui-pro/scss/mixins/_forms.scss
67 │           background-size: $input-height-inner-half $input-height-inner-half;
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules/@coreui/coreui-pro/scss/mixins/_ltr-rtl.scss
11 │ ┌     *[dir="rtl"] & {
12 │ │       @content;
13 │ │     }
   │ └─── nested rule
   ╵
    node_modules/@coreui/coreui-pro/scss/mixins/_forms.scss 67:9      @content
    node_modules/@coreui/coreui-pro/scss/mixins/_forms.scss 9:7       form-validation-state-selector()
    node_modules/@coreui/coreui-pro/scss/mixins/_forms.scss 59:5      form-validation-state()
    node_modules/@coreui/coreui-pro/scss/forms/_validation.scss 10:3  @import
    node_modules/@coreui/coreui-pro/scss/_forms.scss 10:9             @import
    node_modules/@coreui/coreui-pro/scss/coreui.scss 21:9             @import
    src/styles/style.scss 8:9                                         @import
    src/App.vue 3:9                                                   root stylesheet

[mrholek]

We know this but can't resolve this warning in v5 without breaking changes. It will be resolved in v6 when we will abandon support for node-sass. Currently, you can silence this warning by adding --quiet-deps flag

[mrholek]

@Skjall, we have found a solution. It should be ready within the next two weeks.