[Feature] SASS division without slash

[thebrownfox]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.9.2]
This is a Sass issue: I'm using version [1.33.0]
I am sure this issue is not a duplicate

Description

Usage of slash division will be deprecated in sass 2.0.0 and now my console gets polluted with deprecation warnings.
https://sass-lang.com/documentation/breaking-changes/slash-div

Steps to Reproduce

1. Update to latest sass 1.33.0
2. Run project

Expected behavior

No warnings.

Actual behavior

Warning for every slash used for division.
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

[Niek]

Same here, might be a good idea to run https://github.com/sass/migrator on the Sass files?

[tcitworld]

It seems bulma still makes use of node-sass instead of dart-sass, and math:div is only supported in the latest version of dart-sass: https://sass-lang.com/documentation/modules/math

It's probably safer to downgrade sass to 1.32.0 for now, as asking people to use sass with the latest version if they want to use Bulma's sass source files is quite a requirement.

[francesco-loreti]

Recommendation: math.div($i, 12)

[robertmarney]

Full error example:

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($button-padding-horizontal, 4)

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

   ╷
88 │       +ltr-property("margin", $button-padding-horizontal / 4)
   │                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\bulma\sass\elements\button.sass 88:31  @import
    node_modules\bulma\sass\elements\_all.sass 5:9      @import
    node_modules\bulma\bulma.sass 5:9                   @import
    resources\sass\buefy.scss 166:9                     @import
    stdin 1:9                                           root stylesheet

[lashchivskyi]

did you manage to resolve this error?

[coderberry]

It seems that this error is preventing anyone from using the latest Bulma via sass. Is there a release date for this? I've had to run sass-migrator division --migrate-deps bulma.sass and copy the modified sass into my project directly.

Also, I wonder if this issue should be flagged as a bug, not a feature.

[nextmat]

See @jgthms' comments in #3335 for context as to why this is not super straightforward to fix.

Anyone have insight into whether math.div() will be back-ported into node-sass or Ruby sass?

[tcitworld]

This is explained in https://sass-lang.com/blog/libsass-is-deprecated. Libsass is depreciated and won't get anymore features (this one was one of the reasons for the depreciation).

[sajithneyo]

From your project's root run this

npx sass-migrator division --migrate-deps ./node_modules/bulma/bulma.sass
npx patch-package bulma

So patch-package will create a patch until bulma fixes this. Commit the patch file. Check patch-package documentation for it's setup.

[maxenz]

guys, any serious solution from bulma for this? thanks @sajithneyo for the patch option but it is not something I can use in my actual project.

[baileydoestech]

There is a similar discussion about this with Bootstrap with a range of suggestions: twbs/bootstrap#34051

[trezy]

@sajithneyo's comment should work for now if you're using npm or Yarn 1. If you're using Yarn 2, you should use Yarn's built-in patch and patch-commit commands:

yarn patch bulma
yarn dlx sass-migrator division --migrate-deps {PATH TO PATCH FOLDER}
yarn patch-commit {PATH TO PATCH FOLDER}

[adamdehaven]

Can someone explain the implications of using @sajithneyo's solution? If Bulma rolls out an "official" fix, will it override the patch?

Also, I'm assuming this patch won't actually do anything if you're importing individual sass files from Bulma in order to compile in your project (i.e. customization of Bulma variables)?

[trezy]

Can someone explain the implications of using @sajithneyo's solution? If Bulma rolls out an "official" fix, will it override the patch?

I imagine it'd be the same for Yarn's built in patch command. According to the patch-package readme, it will exit silently if it fails to apply the patch, which is likely to happen if you upgrade the version of the patched package. If the patch is still required after upgrading the patched package, you can follow the process again to recreate the patch. This is all just a guess, though. @ds300 or @arcanis might be able to give us more clarification on how they expect developers to handle fixed/upgraded packages, since I couldn't find any documentation about that.

Also, I'm assuming this patch won't actually do anything if you're importing individual sass files from Bulma in order to compile in your project (i.e. customization of Bulma variables)?

Actually, the patch only overrides the .sass files. It won't have any impact if you're using the compiled .css files, though.

[gandesc]

Can someone explain the implications of using @sajithneyo's solution? If Bulma rolls out an "official" fix, will it override the patch?

Also, I'm assuming this patch won't actually do anything if you're importing individual sass files from Bulma in order to compile in your project (i.e. customization of Bulma variables)?

Re patch-package:

When a new version of Bulma is released, patch-package will attempt to apply the patch same as before.

• If the patch can be applied successfully, you'll get a warning that the package version has changed.
• If the files to be patched have been changed in the new release and the patch can no longer be applied, you'll get a message explaining that the patch cannot be applied and you should check if the patch is still needed.

If the patch is not needed anymore, you can delete it (it won't be applied anyway). If a new patch is needed, you'd need to re-run the sass migrator and then recreate the patch (the old patch will be overwritten).

The whole process is pretty foolproof, we're using patches for a couple of other packages.

[Rainbowlemon]

Any other solutions for this? I'm compiling with parcel 2, and its transformer-sass package is reporting an error even after patching with @sajithneyo 's solution:

@parcel/transformer-sass: Undefined operation "divide(255, 255) < 0.03928".

71 │     @if $value < 0.03928

  node_modules/bulma/sass/utilities/functions.sass 71:9           colorLuminance()
  node_modules/bulma/sass/utilities/functions.sass 80:8           findColorInvert()
  node_modules/bulma/sass/utilities/derived-variables.sass 16:17  @import
  node_modules/bulma/sass/utilities/_all.sass 6:9                 @import
  node_modules/bulma/bulma.sass 3:9                               @import
  assets/sass/main.scss 7:9                                       root stylesheet

[tcitworld]

@Rainbowlemon According to https://v2.parceljs.org/languages/sass/ you can configure sass options into sass configuration files and add the quietDeps option from the recent sass versions.

[nogic1008]

If you use dart-sass via sass-loader, webpack.config.js like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: { quietDeps: true } // Add this
            }
          }
        ]
      }
    ]
  }
};

Or if you use it in nuxt, nuxt.config.js like this

export default {
  // ...
  build: {
    loaders: {
      scss: { sassOptions: { quietDeps: true } },
      sass: { sassOptions: { quietDeps: true } }
    }
  }
};

[m99coder]

Is there any solution for using Bulma SASS with Gatsby? So far I keep my SASS dependency pinned to 1.32.0 to avoid this error.

[jgthms]

I've just created a fix/divide branch. Will merge and release today.

[alexryabkov]

It works now! Thank you!

[lesar]

Great, work again.
Thanks you!