Merge branch 'release/v5.3.0'

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## 5.3.0 - 10-november-2021
+
+- Fixed a bug where `px` based media queries were not converted to `em`
+
 ## 5.2.0 - 03-november-2021
 
 - Upgraded stylelint-config-supple to version 4

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@supple-kit/supple-css",
- "version": "5.2.0",
+ "version": "5.3.0",
  "description": "Reliable and testable Sass framework. Fluid, Variable, supple if you will",
  "main": "index.scss",
  "repository": "https://github.com/supple-kit/supple-css.git",

settings/defaults/_index.scss

@@ -115,7 +115,20 @@ $should-be-pixel-values: (
 @each $key, $value in $should-be-pixel-values {
  @if type-of($value) == number {
  @if math.unit($value) != 'px' {
- @error '`#{$key}: #{$value}` needs to be a pixel value.';
+ @error '`#{$key}: #{$value}` needs to be a pixel unit.';
+ }
+ } @else {
+ @error '`#{$key}: #{$value}` needs to be a number.';
+ }
+}
+
+/**
+ * check that breakpoints are defined in px or em
+ */
+@each $key, $value in $breakpoints {
+ @if type-of($value) == number {
+ @if math.unit($value) != 'px' and math.unit($value) != 'em' {
+ @error 'Breakpoint `#{$key}: #{$value}` needs to be a pixel or em unit.';
  }
  } @else {
  @error '`#{$key}: #{$value}` needs to be a number.';

tools/_internal/_functions.scss

@@ -109,17 +109,17 @@
  $parsed-value: validate-query($value);
 
  @if $parsed-value {
- @if math.unit($parsed-value) == 'em' {
- $min-w: $parsed-value;
- } @else {
+ $resolved-value: $parsed-value;
+
+ @if math.unit($parsed-value) == 'px' {
  @if $key == max-width or $key == max-height {
  $parsed-value: $parsed-value - 1px;
  }
 
- $min-w: value-to-em($parsed-value);
+ $resolved-value: value-to-em($parsed-value);
  }
 
- $return: map.merge($return, ($key: $parsed-value));
+ $return: map.merge($return, ($key: $resolved-value));
  }
 
  @return $return;