canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
841 stars 167 forks source link

Update division in Sass #3756

Closed huwshimi closed 3 years ago

huwshimi commented 3 years ago

Describe the bug

Sass is deprecating the use of / for division, see: https://sass-lang.com/documentation/breaking-changes/slash-div

In MAAS this causes warnings when we include Vanilla.

[1] [0] DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
[1] [0]
[1] [0] Recommendation: math.div(100%, $grid-column-count)
[1] [0]
[1] [0] More info and automated migrator: https://sass-lang.com/d/slash-div
[1] [0]
[1] [0]    ╷
[1] [0] 38 │     $percentage-width-of-one-col: 100% / $grid-column-count;
[1] [0]    │                                   ^^^^^^^^^^^^^^^^^^^^^^^^^
[1] [0]    ╵
[1] [0]     ../node_modules/vanilla-framework/scss/_patterns_logo-section.scss 38:35  vf-p-set-logo-section-item-width()
[1] [0]     ../node_modules/vanilla-framework/scss/_patterns_logo-section.scss 141:5  vf-p-logo-section()
[1] [0]     ../node_modules/vanilla-framework/scss/_vanilla.scss 116:3                vanilla()
[1] [0]     ../node_modules/vanilla-framework/scss/build.scss 3:1                     @import
[1] [0]     src/scss/base.scss 7:9

I'm not sure exactly how Vanilla can handle this as I don't think math.div is supported by all sass builders yet.

To Reproduce

Steps to reproduce the behavior:

  1. Checkout maas-ui and do dotrun or yarn install && yarn start.
  2. You should see the warnings in your console.

You might also be able to reproduce by npm install sass and using that to build Vanilla.

bartaz commented 3 years ago

Node sass (based on libsass) is not going to support it. And we use it for building at the moment.

I guess for Vanilla 3.0 we should move to using dart sass by default and remove support for node sass.