SASS deprecation

[codyburleson]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version 1.0.2

This is a Sass issue: I'm using sass version 1.77.6

There are similar open issues related to other versions of Bulma, but this is the only one for Bulma 1.0.2

Description

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use meta.type-of instead.

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

   ╷
94 │   @if type-of($color) != "color" {
   │       ^^^^^^^^^^^^^^^
   ╵
    node_modules/bulma/sass/utilities/functions.scss 94:7           bulmaColorLuminance()
    node_modules/bulma/sass/utilities/functions.scss 128:7          bulmaFindColorInvert()
    node_modules/bulma/sass/utilities/derived-variables.scss 16:15  @forward
    node_modules/bulma/sass/utilities/_index.scss 6:1               @forward
    node_modules/bulma/sass/_index.scss 1:1                         @use
    src/assets/styles.scss 1:1                                      root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.red instead.

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

   ╷
99 │     "red": red($color),
   │            ^^^^^^^^^^^
   ╵
    node_modules/bulma/sass/utilities/functions.scss 99:12          bulmaColorLuminance()
    node_modules/bulma/sass/utilities/functions.scss 128:7          bulmaFindColorInvert()
    node_modules/bulma/sass/utilities/derived-variables.scss 16:15  @forward
    node_modules/bulma/sass/utilities/_index.scss 6:1               @forward
    node_modules/bulma/sass/_index.scss 1:1                         @use
    src/assets/styles.scss 1:1                                      root stylesheet

Deprecation Warning: red() is deprecated. Suggestion:

color.channel($color, "red", $space: rgb)

More info: https://sass-lang.com/d/color-functions

   ╷
99 │     "red": red($color),
   │            ^^^^^^^^^^^
   ╵
    node_modules/bulma/sass/utilities/functions.scss 99:12          bulmaColorLuminance()
    node_modules/bulma/sass/utilities/functions.scss 128:7          bulmaFindColorInvert()
    node_modules/bulma/sass/utilities/derived-variables.scss 16:15  @forward
    node_modules/bulma/sass/utilities/_index.scss 6:1               @forward
    node_modules/bulma/sass/_index.scss 1:1                         @use
    src/assets/styles.scss 1:1                                      root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.green instead.

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

    ╷
100 │     "green": green($color),
    │              ^^^^^^^^^^^^^
    ╵
    node_modules/bulma/sass/utilities/functions.scss 100:14         bulmaColorLuminance()
    node_modules/bulma/sass/utilities/functions.scss 128:7          bulmaFindColorInvert()
    node_modules/bulma/sass/utilities/derived-variables.scss 16:15  @forward
    node_modules/bulma/sass/utilities/_index.scss 6:1               @forward
    node_modules/bulma/sass/_index.scss 1:1                         @use
    src/assets/styles.scss 1:1                                      root stylesheet

Deprecation Warning: green() is deprecated. Suggestion:

color.channel($color, "green", $space: rgb)

More info: https://sass-lang.com/d/color-functions

    ╷
100 │     "green": green($color),
    │              ^^^^^^^^^^^^^
    ╵
    node_modules/bulma/sass/utilities/functions.scss 100:14         bulmaColorLuminance()
    node_modules/bulma/sass/utilities/functions.scss 128:7          bulmaFindColorInvert()
    node_modules/bulma/sass/utilities/derived-variables.scss 16:15  @forward
    node_modules/bulma/sass/utilities/_index.scss 6:1               @forward
    node_modules/bulma/sass/_index.scss 1:1                         @use
    src/assets/styles.scss 1:1                                      root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.blue instead.

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

    ╷
101 │     "blue": blue($color),
    │             ^^^^^^^^^^^^
    ╵
    node_modules/bulma/sass/utilities/functions.scss 101:13         bulmaColorLuminance()
    node_modules/bulma/sass/utilities/functions.scss 128:7          bulmaFindColorInvert()
    node_modules/bulma/sass/utilities/derived-variables.scss 16:15  @forward
    node_modules/bulma/sass/utilities/_index.scss 6:1               @forward
    node_modules/bulma/sass/_index.scss 1:1                         @use
    src/assets/styles.scss 1:1                                      root stylesheet

Deprecation Warning: blue() is deprecated. Suggestion:

color.channel($color, "blue", $space: rgb)

More info: https://sass-lang.com/d/color-functions

    ╷
101 │     "blue": blue($color),
    │             ^^^^^^^^^^^^
    ╵
    node_modules/bulma/sass/utilities/functions.scss 101:13         bulmaColorLuminance()
    node_modules/bulma/sass/utilities/functions.scss 128:7          bulmaFindColorInvert()
    node_modules/bulma/sass/utilities/derived-variables.scss 16:15  @forward
    node_modules/bulma/sass/utilities/_index.scss 6:1               @forward
    node_modules/bulma/sass/_index.scss 1:1                         @use
    src/assets/styles.scss 1:1                                      root stylesheet

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.merge instead.

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

    ╷
115 │       $color-rgb: map-merge(
    │ ┌─────────────────^
116 │ │       $color-rgb,
117 │ │       (
118 │ │         $name: $value,
119 │ │       )
120 │ │     );
    │ └─────^
    ╵
    node_modules/bulma/sass/utilities/functions.scss 115:17         bulmaColorLuminance()
    node_modules/bulma/sass/utilities/functions.scss 128:7          bulmaFindColorInvert()
    node_modules/bulma/sass/utilities/derived-variables.scss 16:15  @forward
    node_modules/bulma/sass/utilities/_index.scss 6:1               @forward
    node_modules/bulma/sass/_index.scss 1:1                         @use
    src/assets/styles.scss 1:1                                      root stylesheet

Deprecation Warning: red() is deprecated. Suggestion:

color.channel($color, "red", $space: rgb)

More info: https://sass-lang.com/d/color-functions

   ╷
51 │     (red($value), green($value), blue($value)),
   │      ^^^^^^^^^^^
   ╵
    node_modules/bulma/sass/utilities/css-variables.scss 51:6   register-rgb()
    node_modules/bulma/sass/utilities/css-variables.scss 130:3  register-base-color()
    node_modules/bulma/sass/utilities/css-variables.scss 135:3  generate-basic-palette()
    node_modules/bulma/sass/themes/light.scss 119:7             light-theme()
    node_modules/bulma/sass/themes/_index.scss 11:3             @forward
    node_modules/bulma/sass/_index.scss 2:1                     @use
    src/assets/styles.scss 1:1                                  root stylesheet

Deprecation Warning: green() is deprecated. Suggestion:

color.channel($color, "green", $space: rgb)

More info: https://sass-lang.com/d/color-functions

   ╷
51 │     (red($value), green($value), blue($value)),
   │                   ^^^^^^^^^^^^^
   ╵
    node_modules/bulma/sass/utilities/css-variables.scss 51:19  register-rgb()
    node_modules/bulma/sass/utilities/css-variables.scss 130:3  register-base-color()
    node_modules/bulma/sass/utilities/css-variables.scss 135:3  generate-basic-palette()
    node_modules/bulma/sass/themes/light.scss 119:7             light-theme()
    node_modules/bulma/sass/themes/_index.scss 11:3             @forward
    node_modules/bulma/sass/_index.scss 2:1                     @use
    src/assets/styles.scss 1:1                                  root stylesheet

Warning: 124 repetitive deprecation warnings omitted.

✓ 420 modules transformed.
Generated an empty chunk: "common/common-typescript".

[nimdanitro]

Duplicate of #3907. Should be fixed in the upcoming release as stated here #3942

[unherz]

Until 1.0.3 is released you have to disable the deprecations for color-functions & global-builtin.

For anyone using Vite:

vite.config.ts

import {
  SassEmbeddedStringOptionsAsync,
} from "vite/types/internal/cssPreprocessorOptions";

const sassOptions: SassEmbeddedStringOptionsAsync = {
  silenceDeprecations: ['color-functions', 'global-builtin']
}

export default defineConfig({

  ...

  css: {
    preprocessorOptions: {
      sass: sassOptions,
    }
  },
})

[DarkPark]

@unherz failed to work for me but this did:

...
    preprocessorOptions: {
        scss: sassOptions,
    }
...