Skip to content

Fixes for SASS/SCSS mixed-decls and global-builtin deprecations #489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
paulthewalton wants to merge 2 commits into from
Closed

Fixes for SASS/SCSS mixed-decls and global-builtin deprecations #489

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c8158d7
Fix: Deprecation Warning [global-builtin]
paulthewalton Jan 23, 2025
141b2f8
Fix: Deprecation Warning [mixed-decls]
paulthewalton Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 28 additions & 18 deletions scss.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@
//
// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)

@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:list";
@use "sass:string";

// Configuration

// Base value
Expand All @@ -30,7 +36,7 @@ $rfs-two-dimensional: false !default;
// Factor of decrease
$rfs-factor: 10 !default;

@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
}

Expand All @@ -50,7 +56,7 @@ $rfs-safari-iframe-resize-bug-fix: false !default;
$enable-rfs: true !default;

// Cache $rfs-base-value unit
$rfs-base-value-unit: unit($rfs-base-value);
$rfs-base-value-unit: math.unit($rfs-base-value);

@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
Expand Down Expand Up @@ -80,16 +86,16 @@ $rfs-base-value-unit: unit($rfs-base-value);
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$dividend-unit: math.unit($dividend);
$divisor-unit: math.unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
@if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
$result: $result * map.get($unit-map, $dividend-unit);
}
@return $result;
}
Expand All @@ -103,7 +109,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
}

// Cache $rfs-breakpoint unit to prevent multiple calls
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);

// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
Expand Down Expand Up @@ -155,7 +161,9 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
@content;
}
} @else {
@content;
& {
@content;
}
}
}

Expand Down Expand Up @@ -190,7 +198,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
// Helper function to get the formatted non-responsive value
@function rfs-value($values) {
// Convert to list
$values: if(type-of($values) != list, ($values,), $values);
$values: if(meta.type-of($values) != list, ($values,), $values);

$val: "";

Expand All @@ -201,7 +209,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
@else {
// Cache $value unit
$unit: if(type-of($value) == "number", unit($value), false);
$unit: if(meta.type-of($value) == "number", math.unit($value), false);

@if $unit == px {
// Convert to rem if needed
Expand All @@ -218,13 +226,13 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}

// Remove first space
@return unquote(str-slice($val, 2));
@return string.unquote(string.slice($val, 2));
}

// Helper function to get the responsive value calculated by RFS
@function rfs-fluid-value($values) {
// Convert to list
$values: if(type-of($values) != list, ($values,), $values);
$values: if(meta.type-of($values) != list, ($values,), $values);

$val: "";

Expand All @@ -234,7 +242,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$val: $val + " 0";
} @else {
// Cache $value unit
$unit: if(type-of($value) == "number", unit($value), false);
$unit: if(meta.type-of($value) == "number", math.unit($value), false);

// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@if not $unit or $unit != px and $unit != rem {
Expand All @@ -244,15 +252,15 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));

// Only add the media query if the value is greater than the minimum value
@if abs($value) <= $rfs-base-value or not $enable-rfs {
@if math.abs($value) <= $rfs-base-value or not $enable-rfs {
$val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
}
@else {
// Calculate the minimum value
$value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
$value-min: $rfs-base-value + divide(math.abs($value) - $rfs-base-value, $rfs-factor);

// Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min;
$value-diff: math.abs($value) - $value-min;

// Base value formatting
$min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
Expand All @@ -274,7 +282,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}

// Remove first space
@return unquote(str-slice($val, 2));
@return string.unquote(string.slice($val, 2));
}

// RFS mixin
Expand All @@ -285,7 +293,9 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height

// Do not print the media query if responsive & non-responsive values are the same
@if $val == $fluid-val {
#{$property}: $val;
& {
#{$property}: $val;
}
}
@else {
@include _rfs-rule () {
Expand Down
Loading