Replace custom divide function with sass built-in math.div.

[SoCuul]

This is an improvement.

Proposed solution

Currently, bulma uses a custom implemented divide function in multiple functions. The main downside of using this custom division function, is that it uses multiple loops that severely slow down build speeds on the final app.

This has been reported previously at #3604, and was been investigated in a separate thread.

This pull request replaces the custom divide function logic with the built-in sass math.div function. This change results in 20x quicker build times with nuxt + vite.

Tradeoffs

Because node-sass has not been updated, there is no support for the math.div function. To work around this issue, I've replaced all references with node-sass to the sass npm package. The functionality is nearly identical, and there should be no modification necessary to any workflows.

Testing Done

I have built both the main css files along with the rtl-css files. Both returned perfect results, and no errors were displayed during building.

Changelog updated?

No.

[Slackwise]

Hi @jgthms, is bulma abandoned or is it possible to get this PR reviewed and merged in? Thanks.

[jgthms]

So the custom divide was introduced to add compatibility with dart sass, which has another way to make divisions but requires changing the whole codebase.

Bulma v1 which I’m still working on will still be compatible with node sass, but with v2 it will only be dart sass which means using the built in divide again.

[SoCuul]

Is there an estimated release date for Bulma v2?

[dword-design]

Also looking forward to this!

[lctech-bill]

Could this PR will be merged?
Nuxt3 with sass/scss is currently facing slow build times and I'm looking for a solution.

Slow nuxt startup when importing sass file

[Xaaalera]

+1