From a0a8a41298aa659d7c4e740ec2f54135a4d8d526 Mon Sep 17 00:00:00 2001 From: Felix Scholze Date: Sat, 1 Apr 2023 14:41:10 +0200 Subject: [PATCH] feat(media queries): with new range syntax --- mixins/_breakpoint.scss | 4 ++-- mixins/_font.scss | 8 ++++---- package-lock.json | 42 +++++++++++++++++++------------------- package.json | 4 ++-- tests/breakpoint.spec.scss | 10 ++++----- 5 files changed, 34 insertions(+), 34 deletions(-) diff --git a/mixins/_breakpoint.scss b/mixins/_breakpoint.scss index 261deab..2a8f06d 100644 --- a/mixins/_breakpoint.scss +++ b/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; } } diff --git a/mixins/_font.scss b/mixins/_font.scss index 359a7b2..8bb1159 100644 --- a/mixins/_font.scss +++ b/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 } } diff --git a/package-lock.json b/package-lock.json index a6122c9..2f7d9ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,9 +32,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" @@ -13915,18 +13915,18 @@ "dev": true }, "node_modules/stylelint": { - "version": "15.3.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.3.0.tgz", - "integrity": "sha512-9UYBYk7K9rtlKcTUDZrtntE840sZM00qyYBQHHe7tjwMNUsPsGvR6Fd43IxHEAhRrDLzpy3TVaHb6CReBB3eFg==", + "version": "15.4.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.4.0.tgz", + "integrity": "sha512-TlOvpG3MbcFwHmK0q2ykhmpKo7Dq892beJit0NPdpyY9b1tFah/hGhqnAz/bRm2PDhDbJLKvjzkEYYBEz7Dxcg==", "dev": true, "dependencies": { - "@csstools/css-parser-algorithms": "^2.0.1", + "@csstools/css-parser-algorithms": "^2.1.0", "@csstools/css-tokenizer": "^2.1.0", "@csstools/media-query-list-parser": "^2.0.1", - "@csstools/selector-specificity": "^2.1.1", + "@csstools/selector-specificity": "^2.2.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", - "cosmiconfig": "^8.1.0", + "cosmiconfig": "^8.1.3", "css-functions-list": "^3.1.0", "css-tree": "^2.3.1", "debug": "^4.3.4", @@ -14004,15 +14004,15 @@ } }, "node_modules/stylelint-config-standard": { - "version": "31.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-31.0.0.tgz", - "integrity": "sha512-CUGAmtROCvX0YgMY2+6P9tqSkHj5z/75XxrQ8bGxvkCa1xYdGDx4poM0pa7cXc3s74/PZLJH/okxZZouRfOSGw==", + "version": "32.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-32.0.0.tgz", + "integrity": "sha512-UnGJxYDyYFrIE9CjDMZRkrNh2o4lOtO+MVZ9qG5b8yARfsWho0GMx4YvhHfsv8zKKgHeWX2wfeyxmuoqcaYZ4w==", "dev": true, "dependencies": { "stylelint-config-recommended": "^11.0.0" }, "peerDependencies": { - "stylelint": "^15.3.0" + "stylelint": "^15.4.0" } }, "node_modules/stylelint-config-standard-scss": { @@ -25802,18 +25802,18 @@ "dev": true }, "stylelint": { - "version": "15.3.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.3.0.tgz", - "integrity": "sha512-9UYBYk7K9rtlKcTUDZrtntE840sZM00qyYBQHHe7tjwMNUsPsGvR6Fd43IxHEAhRrDLzpy3TVaHb6CReBB3eFg==", + "version": "15.4.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.4.0.tgz", + "integrity": "sha512-TlOvpG3MbcFwHmK0q2ykhmpKo7Dq892beJit0NPdpyY9b1tFah/hGhqnAz/bRm2PDhDbJLKvjzkEYYBEz7Dxcg==", "dev": true, "requires": { - "@csstools/css-parser-algorithms": "^2.0.1", + "@csstools/css-parser-algorithms": "^2.1.0", "@csstools/css-tokenizer": "^2.1.0", "@csstools/media-query-list-parser": "^2.0.1", - "@csstools/selector-specificity": "^2.1.1", + "@csstools/selector-specificity": "^2.2.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", - "cosmiconfig": "^8.1.0", + "cosmiconfig": "^8.1.3", "css-functions-list": "^3.1.0", "css-tree": "^2.3.1", "debug": "^4.3.4", @@ -25934,9 +25934,9 @@ } }, "stylelint-config-standard": { - "version": "31.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-31.0.0.tgz", - "integrity": "sha512-CUGAmtROCvX0YgMY2+6P9tqSkHj5z/75XxrQ8bGxvkCa1xYdGDx4poM0pa7cXc3s74/PZLJH/okxZZouRfOSGw==", + "version": "32.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-32.0.0.tgz", + "integrity": "sha512-UnGJxYDyYFrIE9CjDMZRkrNh2o4lOtO+MVZ9qG5b8yARfsWho0GMx4YvhHfsv8zKKgHeWX2wfeyxmuoqcaYZ4w==", "dev": true, "requires": { "stylelint-config-recommended": "^11.0.0" diff --git a/package.json b/package.json index 5f739f4..51481f9 100644 --- a/package.json +++ b/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" diff --git a/tests/breakpoint.spec.scss b/tests/breakpoint.spec.scss index 8bea3b7..44d97d4 100644 --- a/tests/breakpoint.spec.scss +++ b/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; }