Add range context support for media-feature-name-* rules

lib/rules/media-feature-name-blacklist/README.md

@@ -8,8 +8,6 @@ Specify a blacklist of disallowed media feature names.
  * This media feature name */
 ```
 
-**Caveat:** Media feature names within a range context are currently ignored.
-
 ## Options
 
 `array|string|regex`: `["array", "of", "unprefixed", /media-features/ or "regex"]|"media-feature"|/regex/`
@@ -30,6 +28,14 @@ The following patterns are considered violations:
 @media (my-width: 50em) {}
 ```
 
+```css
+@media (max-width < 50em) {}
+```
+
+```css
+@media (10em < my-height < 50em) {}
+```
+
 The following patterns are *not* considered violations:
 
 ```css
@@ -39,3 +45,11 @@ The following patterns are *not* considered violations:
 ```css
 @media print and (min-resolution: 300dpi) {}
 ```
+
+```css
+@media (min-width >= 50em) {}
+```
+
+```css
+@media (10em < width < 50em) {}
+```

lib/rules/media-feature-name-blacklist/__tests__/index.js

@@ -18,20 +18,18 @@ testRule(rule, {
 			code: '@media (MiN-wIdTh: 50em) { }',
 		},
 		{
-			code: '@media (--wide-viewport) { }',
-			description: 'ignore custom media query',
+			code: '@media (height <= 50em) { }',
 		},
 		{
-			code: '@media (/* max-width: 50em */ min-width: 50em) { }',
-			description: 'ignore comments',
+			code: '@media (400px < height < 1000px) { }',
 		},
 		{
-			code: '@media (width <= 50em) { }',
-			description: 'ignore media features in a range context',
+			code: '@media (--wide-viewport) { }',
+			description: 'ignore custom media query',
 		},
 		{
-			code: '@media (400px < width < 1000px) { }',
-			description: 'ignore media features in a range context',
+			code: '@media (/* max-width: 50em */ min-width: 50em) { }',
+			description: 'ignore comments',
 		},
 		{
 			code: '@media (monochrome) { }',
@@ -70,6 +68,33 @@ testRule(rule, {
 			line: 1,
 			column: 9,
 		},
+		{
+			code: '@media (width: 50em) { }',
+			message: messages.rejected('width'),
+			line: 1,
+			column: 9,
+		},
+		{
+			code: '@media (20em < width <= 50em) { }',
+			message: messages.rejected('width'),
+			line: 1,
+			column: 16,
+		},
+		{
+			code: '@media (10em < max-width <= 50em) and (width > 50em) { }',
+			warnings: [
+				{
+					message: messages.rejected('max-width'),
+					line: 1,
+					column: 16,
+				},
+				{
+					message: messages.rejected('width'),
+					line: 1,
+					column: 40,
+				},
+			],
+		},
 	],
 });
 
@@ -90,6 +115,24 @@ testRule(rule, {
 			line: 1,
 			column: 9,
 		},
+		{
+			code: '@media (my-width >= 50em) { }',
+			message: messages.rejected('my-width'),
+			line: 1,
+			column: 9,
+		},
+		{
+			code: '@media (10em < my-width <= 50em) { }',
+			message: messages.rejected('my-width'),
+			line: 1,
+			column: 16,
+		},
+		{
+			code: '@media (50em < my-width) { }',
+			message: messages.rejected('my-width'),
+			line: 1,
+			column: 16,
+		},
 	],
 });
 

lib/rules/media-feature-name-blacklist/index.js

@@ -7,6 +7,7 @@ const isRangeContextMediaFeature = require('../../utils/isRangeContextMediaFeatu
 const isStandardSyntaxMediaFeatureName = require('../../utils/isStandardSyntaxMediaFeatureName');
 const matchesStringOrRegExp = require('../../utils/matchesStringOrRegExp');
 const mediaParser = require('postcss-media-query-parser').default;
+const rangeContextNodeParser = require('../rangeContextNodeParser');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
@@ -31,14 +32,22 @@ function rule(blacklist) {
 		root.walkAtRules(/^media$/i, (atRule) => {
 			mediaParser(atRule.params).walk(/^media-feature$/i, (mediaFeatureNode) => {
 				const parent = mediaFeatureNode.parent;
-				const sourceIndex = mediaFeatureNode.sourceIndex;
-				const value = mediaFeatureNode.value;
+				const mediaFeatureRangeContext = isRangeContextMediaFeature(parent.value);
 
-				if (
-					isRangeContextMediaFeature(parent.value) ||
-					!isStandardSyntaxMediaFeatureName(value) ||
-					isCustomMediaQuery(value)
-				) {
+				let value;
+				let sourceIndex;
+
+				if (mediaFeatureRangeContext) {
+					const parsedRangeContext = rangeContextNodeParser(mediaFeatureNode);
+
+					value = parsedRangeContext.name.value;
+					sourceIndex = parsedRangeContext.name.sourceIndex;
+				} else {
+					value = mediaFeatureNode.value;
+					sourceIndex = mediaFeatureNode.sourceIndex;
+				}
+
+				if (!isStandardSyntaxMediaFeatureName(value) || isCustomMediaQuery(value)) {
 					return;
 				}
 

lib/rules/media-feature-name-case/README.md

@@ -8,8 +8,6 @@ Specify lowercase or uppercase for media feature names.
  * This media feature name */
 ```
 
-This rule ignores media feature names within a range context.
-
 The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
 
 ## Options
@@ -32,6 +30,10 @@ The following patterns are considered violations:
 @media (min-width: 700px) and (ORIENTATION: landscape) {}
 ```
 
+```css
+@media (WIDTH > 10em) {}
+```
+
 The following patterns are *not* considered violations:
 
 ```css
@@ -46,6 +48,10 @@ The following patterns are *not* considered violations:
 @media (min-width: 700px) and (orientation: landscape) {}
 ```
 
+```css
+@media (width > 10em) {}
+```
+
 ### `"upper"`
 
 The following patterns are considered violations:
@@ -62,6 +68,10 @@ The following patterns are considered violations:
 @media (MIN-WIDTH: 700px) and (orientation: landscape) {}
 ```
 
+```css
+@media (10em < width <= 50em) {}
+```
+
 The following patterns are *not* considered violations:
 
 ```css
@@ -75,3 +85,7 @@ The following patterns are *not* considered violations:
 ```css
 @media (MIN-WIDTH: 700px) and (ORIENTATION: landscape) {}
 ```
+
+```css
+@media (10em < WIDTH <= 50em) {}
+```

lib/rules/media-feature-name-case/__tests__/index.js

@@ -18,6 +18,18 @@ testRule(rule, {
 		{
 			code: '@media (min-width: 700PX) { }',
 		},
+		{
+			code: '@media (width < 100px) { }',
+		},
+		{
+			code: '@media (width = 100px) { }',
+		},
+		{
+			code: '@media (width <= 100px) { }',
+		},
+		{
+			code: '@media (10px <= width <= 100px) { }',
+		},
 		{
 			code: '@media (min-width: 700px) and (orientation: landscape) { }',
 		},
@@ -48,22 +60,6 @@ testRule(rule, {
 			code: '@media (--VIEWPORT-MEDIUM) { }',
 			description: 'ignore css variables',
 		},
-		{
-			code: '@media (WIDTH < 100px) { }',
-			description: 'ignore range context',
-		},
-		{
-			code: '@media (WIDTH = 100px) { }',
-			description: 'ignore range context',
-		},
-		{
-			code: '@media (WIDTH <= 100px) { }',
-			description: 'ignore range context',
-		},
-		{
-			code: '@media (10px >= WIDTH <= 100px) { }',
-			description: 'ignore complex range context',
-		},
 	],
 
 	reject: [
@@ -133,6 +129,41 @@ testRule(rule, {
 			line: 1,
 			column: 9,
 		},
+		{
+			code: '@media (height: 50em) and (orientation: landscape) and (WIDTH: 25em) {}',
+			fixed: '@media (height: 50em) and (orientation: landscape) and (width: 25em) {}',
+			message: messages.expected('WIDTH', 'width'),
+			line: 1,
+			column: 57,
+		},
+		{
+			code: '@media (WIDTH > 50em) {}',
+			fixed: '@media (width > 50em) {}',
+			message: messages.expected('WIDTH', 'width'),
+			line: 1,
+			column: 9,
+		},
+		{
+			code: '@media (10em < WIDTH <= 50em) {}',
+			fixed: '@media (10em < width <= 50em) {}',
+			message: messages.expected('WIDTH', 'width'),
+			line: 1,
+			column: 16,
+		},
+		{
+			code: '@media (width > 10em) and (WIDTH < 50em) {}',
+			fixed: '@media (width > 10em) and (width < 50em) {}',
+			message: messages.expected('WIDTH', 'width'),
+			line: 1,
+			column: 28,
+		},
+		{
+			code: '@media (10em < WIDTH) {}',
+			fixed: '@media (10em < width) {}',
+			message: messages.expected('WIDTH', 'width'),
+			line: 1,
+			column: 16,
+		},
 	],
 });
 

lib/rules/media-feature-name-case/index.js

@@ -6,6 +6,7 @@ const isCustomMediaQuery = require('../../utils/isCustomMediaQuery');
 const isRangeContextMediaFeature = require('../../utils/isRangeContextMediaFeature');
 const isStandardSyntaxMediaFeatureName = require('../../utils/isStandardSyntaxMediaFeatureName');
 const mediaParser = require('postcss-media-query-parser').default;
+const rangeContextNodeParser = require('../rangeContextNodeParser');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
@@ -33,14 +34,22 @@ function rule(expectation, options, context) {
 
 			mediaParser(mediaRule).walk(/^media-feature$/i, (mediaFeatureNode) => {
 				const parent = mediaFeatureNode.parent;
-				const sourceIndex = mediaFeatureNode.sourceIndex;
-				const value = mediaFeatureNode.value;
-
-				if (
-					isRangeContextMediaFeature(parent.value) ||
-					!isStandardSyntaxMediaFeatureName(value) ||
-					isCustomMediaQuery(value)
-				) {
+				const mediaFeatureRangeContext = isRangeContextMediaFeature(parent.value);
+
+				let value;
+				let sourceIndex;
+
+				if (mediaFeatureRangeContext) {
+					const parsedRangeContext = rangeContextNodeParser(mediaFeatureNode);
+
+					value = parsedRangeContext.name.value;
+					sourceIndex = parsedRangeContext.name.sourceIndex;
+				} else {
+					value = mediaFeatureNode.value;
+					sourceIndex = mediaFeatureNode.sourceIndex;
+				}
+
+				if (!isStandardSyntaxMediaFeatureName(value) || isCustomMediaQuery(value)) {
 					return;
 				}
 

lib/rules/media-feature-name-no-unknown/README.md

@@ -10,10 +10,7 @@ Disallow unknown media feature names.
 
 This rule considers media feature names defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
 
-This rule ignores:
-
--   media feature names within a range context
--   vendor-prefixed media feature names
+This rule ignores vendor-prefixed media feature names.
 
 ## Options
 
@@ -29,6 +26,10 @@ The following patterns are considered violations:
 @media screen and (unknown: 10px) {}
 ```
 
+```css
+@media screen and (unknown > 10px) {}
+```
+
 The following patterns are *not* considered violations:
 
 ```css
@@ -71,6 +72,10 @@ The following patterns are *not* considered violations:
 @media screen and (custom: 10px) {}
 ```
 
+```css
+@media screen and (100px < custom < 700px) {}
+```
+
 ```css
 @media (min-width: 700px) and (custom: 10px) {}
 ```