Deprecation warnin: math.div

[fuhlig]

plyr/src/sass/plugins/ads.scss

Line 50 in d9f9dc7

margin: -($plyr-range-track-height / 2) 0 0;

👇

  margin: -($plyr-range-track-height * 0.5) 0 0;

  margin: -(math.div($plyr-range-track-height, 2)) 0 0;

related: #2234

[sampotts]

This should be resolved in v3.6.10 👍🏼

[fuhlig]

@sampotts
I am afraid the wrong function was used, resulting in incorrect CSS with the latest release.

list.slash is returns a slash separated list of list-items.

See suggestion above using math.div.

I checked out the repo and ran npm run build, this is the CSS result with list.slash:

.plyr__cues {
  margin: -var(--plyr-range-track-height, 5px) /2 0 0;
}

[sampotts]

Odd because I was getting this error when using math.div:

Warning: math.div() will only support number arguments in a future release.
Use list.slash() instead for a slash separator.

   ╷
52 │   margin: -(math.div($plyr-range-track-height, 2)) 0 0;
   │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

[fuhlig]

Because the value of the variable is a CSS custom property

https://github.com/sampotts/plyr/blob/master/src/sass/settings/sliders.scss#L18

[fuhlig]

Consider using calc(), this should work if the value of the Sass var is static or custom property.
Demo:
https://codepen.io/fuhlig/pen/YzrNOOo

[sampotts]

Thanks! Give 3.6.11 a try.

[pandalion]

I still get errors in 3.6.11:

   ╷
52 │   margin: -calc($plyr-range-track-height / 2) 0 0;
   │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/plyr/src/sass/plugins/ads.scss 52:17  @import
    node_modules/plyr/src/sass/plyr.scss 41:9          @import

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

Recommendation: math.div($size, 2)

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

[sampotts]

Using math.div throws an error as you can see in my comment above. If someone wants to open a PR, go for it, or I'll get to it next time I have some spare time.

calc is valid CSS so Dart Sass should just ignore it. Feels like a bug in Dart Sass.

[sampotts]

OK, I've removed the logic and used a transform instead. That should finally fix this issue 👍🏼

[mrleblanc101]

Still having issue in Nuxt.
nuxt dev work, but not nuxt build
Here are my devDeps:
I have latest plyr, latest dart-sass, latest nuxt.

  "devDependencies": {
      "@babel/eslint-parser": "^7.16.5",
      "@nuxtjs/eslint-config": "^8.0.0",
      "@nuxtjs/eslint-module": "^3.0.2",
      "@nuxtjs/router": "^1.6.1",
      "@nuxtjs/style-resources": "^1.2.1",
      "@nuxtjs/stylelint-module": "^4.0.0",
      "babel-polyfill": "^6.26.0",
      "eslint": "^8.7.0",
      "eslint-config-prettier": "^8.3.0",
      "eslint-plugin-no-smart-quotes": "^1.3.0",
      "eslint-plugin-nuxt": "^3.0.0",
      "eslint-plugin-prettier": "^4.0.0",
      "fibers": "^5.0.0",
      "prettier": "^2.4.1",
      "sass": "^1.49.0",
      "sass-loader": "^10.1.1",
      "stylelint": "^13.12.0",
      "stylelint-order": "^4.1.0",
      "vue-svg-inline-loader": "^2.1.2"
  }

[mrleblanc101]

Using "plyr": "^3.6.12" with "sass": "~1.39.2" works...
Either plyr does some weird thing with it's CSS, or dart-sass has a regression but I doubt the problem is dart-sass.
Plyr has been having some issue with CSS for the last 5-6 version

[mrleblanc101]

The breaking change happens appear in sass: 1.40.0: https://github.com/sass/dart-sass/releases/tag/1.40.0