feat(media queries): with new range syntax

mixins/_breakpoint.scss

@@ -78,12 +78,12 @@ $breakpoints: (
 		}
 	}
 	@if $direction == 'min' {
-		@media (min-width: $get-breakpoints) {
+		@media (width >= $get-breakpoints) {
 			@content;
 		}
 	}
 	@if $direction == 'max' {
-		@media (max-width: $get-breakpoints - $max-overlap) {
+		@media (width <= $get-breakpoints - $max-overlap) {
 			@content;
 		}
 	}

mixins/_font.scss

@@ -14,14 +14,14 @@
 
 	@media
 	screen and (-webkit-min-device-pixel-ratio: 2),
-	screen and (min-resolution: 192dpi),
-	screen and (min-resolution: 2dppx) {
+	screen and (resolution >= 192dpi),
+	screen and (resolution >= 2dppx) {
 			-webkit-font-smoothing: antialiased; // Safari | Best of Retina displays
 	}
 	@media
 	not screen and (-webkit-min-device-pixel-ratio: 2),
-  not screen and (min-resolution: 192dpi),
-	not	screen and (min-resolution: 2dppx) {
+  not screen and (resolution >= 192dpi),
+	not	screen and (resolution >= 2dppx) {
 			-webkit-font-smoothing: subpixel-antialiased; // Best for non Retina displays
 	}
 }

package.json

@@ -74,9 +74,9 @@
     "sass-true": "7.0.0",
     "sassdoc": "2.7.4",
     "semantic-release": "21.0.0",
-    "stylelint": "15.3.0",
+    "stylelint": "15.4.0",
     "stylelint-config-recommended-scss": "^9.0.1",
-    "stylelint-config-standard": "31.0.0",
+    "stylelint-config-standard": "32.0.0",
     "stylelint-config-standard-scss": "7.0.1",
     "stylelint-declaration-block-no-ignored-properties": "2.7.0",
     "stylelint-order": "6.0.3"

tests/breakpoint.spec.scss

@@ -24,7 +24,7 @@ $breakpoints-px: (
 				}
 			}
 			@include true.expect {
-				@media (min-width: 78.75rem) {
+				@media (width >= 78.75rem) {
 					.test {
 						padding: 12px;
 					}
@@ -42,7 +42,7 @@ $breakpoints-px: (
 				}
 			}
 			@include true.expect {
-				@media (max-width: 78.74rem) {
+				@media (width <= 78.74rem) {
 					.test {
 						padding: 12px;
 					}
@@ -60,7 +60,7 @@ $breakpoints-px: (
 				}
 			}
 			@include true.expect {
-				@media (max-width: 76.75rem) {
+				@media (width <= 76.75rem) {
 					.test {
 						padding: 12px;
 					}
@@ -78,7 +78,7 @@ $breakpoints-px: (
 				}
 			}
 			@include true.expect {
-				@media (max-width: 1023px) {
+				@media (width <= 1023px) {
 					.test {
 						padding: 12px;
 					}
@@ -96,7 +96,7 @@ $breakpoints-px: (
 				}
 			}
 			@include true.expect {
-				@media (max-width: 1019px) {
+				@media (width <= 1019px) {
 					.test {
 						padding: 12px;
 					}