EightShapes / text-crop

This tool generates scss, less, and stylus mixins to remove the extra whitespace above and below text on the web
24 stars 1 forks source link

Using generated mixin creates a deprecation warning #17

Open StudioSpindle opened 2 years ago

StudioSpindle commented 2 years ago

Using the tool on the website generates:

@mixin text-crop(...) {
  // ...
  $dynamic-top-crop: max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;
  $dynamic-bottom-crop: max(($bottom-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;
  // ...

Using this code will generate:

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

source: https://sass-lang.com/documentation/breaking-changes/slash-div

Recommended is to "...switch all division to use math.div() instead."

StudioSpindle commented 2 years ago

Possible approach

Make the code generate:

@use 'sass:math';

@mixin text-crop(...) {
  // ...
  $dynamic-top-crop: math.div(max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size * 0.5)), 0), $crop-font-size);
  $dynamic-bottom-crop: math.div(max(($bottom-crop + ($line-height - $crop-line-height) * ($crop-font-size * 0.5)), 0), $crop-font-size);
  // ...

Possible downsides: