SASS deprecations of red(), green(), blue()

[scarytom]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 1.0.2
My browser is: chrome
This is a Sass issue: I'm using version 1.79.2

Description

Recently, I have been getting deprecation warnings when compiling Bulma. These are a result of breaking changes in Sass, where they are soon to remove the color functions red(), green(), and blue().

Steps to Reproduce

npx sass bulma.scss

Expected behavior

no deprecation warnings

Actual behavior

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               @use
    bulma.scss 11:1                                                 @use

[jgthms]

Yes this comes from the sass package but there is currently a bug: sass/dart-sass#2353

So I'm just waiting for this to be merged so I can update sass to the latest version.

[ghiscoding]

Yes this comes from the sass package but there is currently a bug: sass/dart-sass#2353

So I'm just waiting for this to be merged so I can update sass to the latest version.

That was released in v1.79.2 and there's even v1.79.3 that came out afterward, so it should be a good time to update now :)

Side note and for more visibility, I think this issue should be renamed as "SASS deprecations of red, green, ...."

[minusf]

Doesn't seem to be fixed atm:

% ./node_modules/.bin/sass --version
1.79.3 compiled with dart2js 3.5.3

% npm run build_css
> sass --load-path=node_modules bulma-mss.scss static/style.css

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
    bulma/_index.scss 1:1                                           @use
    bulma-mss.scss 9:1                                              root stylesheet

[scarytom]

@jgthms can I just check: is this issue blocked on anything any more?

If it is now just a matter of bumping the SASS version and refactoring red() into color.channel($color, "red", $space: rgb) and similarly for green and blue then I might be able to make you a pull request.

[ohabash]

sass: 1.80.6 compiled with dart2js 3.5.4

"bulma-scss": "^0.9.4",
"react": "18.3.1",

How do i fix?

[jgthms]

@jgthms can I just check: is this issue blocked on anything any more?

If it is now just a matter of bumping the SASS version and refactoring red() into color.channel($color, "red", $space: rgb) and similarly for green and blue then I might be able to make you a pull request.

Basically I tried bumping up the Sass version to the latest one and refactoring the Bulma code but that was throwing other errors, hence the wait.

I'll check if Sass has released a newer version.

[lroal]

I am having the same problem

[SomethingNew71]

Any word on traction for this? Does someone need to open up a PR to fix this for Bulma? Really not keen on the wall of deprecation warnings when using bulma right now.

[SomethingNew71]

I see now the changes have been made to the various files to get this working but a release hasn't been generated. Hopefully they create a release soon for it we can use. Until then I am going to install bulma at a specific commit in npm. This will install the latest commit as of posting this but it still has a few deprecation warnings.

You can do this like this:

"dependencies": {
    "bulma": "[email protected]:jgthms/bulma.git#6374a8094d2af8d94368d51946719cd614d6f84f",
    ...other deps
  },

[jgthms]

Fixed by #3940