Ignore x unit in some cases

lib/rules/unit-no-unknown/__tests__/index.js

@@ -220,6 +220,22 @@ testRule(rule, {
 			code: "@import 'foo.css'",
 			description: 'ignore non-media and non-variable at-rule',
 		},
+		{
+			code: "a { background-image: image-set('img-1x.jpg' 1x, 'img-2x.jpg' 2x, 'img-3x.jpg' 3x) }",
+			description: 'ignore `x` unit in image-set',
+		},
+		{
+			code: '@media (resolution: 2x) {}',
+			description: 'ignore `x` unit in @media with `resolution`',
+		},
+		{
+			code: '@media ( resOLution:  2x) {}',
+			description: 'ignore `x` unit in @media with `resolution`',
+		},
+		{
+			code: 'a { image-resolution: 1x; }',
+			description: 'ignore `x` unit in image-resolution',
+		},
 	],
 
 	reject: [
@@ -356,6 +372,27 @@ testRule(rule, {
 			line: 1,
 			column: 13,
 		},
+		{
+			code: 'a { width: 400x; }',
+			message: messages.rejected('x'),
+			description: '`x` is not allowed for non-resolution props',
+			line: 1,
+			column: 12,
+		},
+		{
+			code: '@media (resolution: 2x) and (min-width: 200x) {}',
+			message: messages.rejected('x'),
+			description: '`x` rejected with inappropriate property',
+			line: 1,
+			column: 41,
+		},
+		{
+			code: '@media ( resolution: /* comment */ 2x ) and (min-width: 200x) {}',
+			message: messages.rejected('x'),
+			description: '`x` rejected with inappropriate property',
+			line: 1,
+			column: 44,
+		},
 	],
 });
 

lib/rules/unit-no-unknown/index.js

@@ -5,6 +5,7 @@ const atRuleParamIndex = require('../../utils/atRuleParamIndex');
 const declarationValueIndex = require('../../utils/declarationValueIndex');
 const getUnitFromValueNode = require('../../utils/getUnitFromValueNode');
 const keywordSets = require('../../reference/keywordSets');
+const mediaParser = require('postcss-media-query-parser').default;
 const optionsMatches = require('../../utils/optionsMatches');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
@@ -62,10 +63,42 @@ const rule = function(actual, options) {
 					return;
 				}
 
-				if (keywordSets.units.has(unit.toLowerCase())) {
+				if (keywordSets.units.has(unit.toLowerCase()) && unit.toLowerCase() !== 'x') {
 					return;
 				}
 
+				if (unit.toLowerCase() === 'x') {
+					if (
+						node.type === 'atrule' &&
+						node.name === 'media' &&
+						node.params.toLowerCase().includes('resolution')
+					) {
+						let ignoreUnit = false;
+
+						mediaParser(node.params).walk((mediaNode, i, mediaNodes) => {
+							if (
+								mediaNode.value.toLowerCase().includes('resolution') &&
+								_.last(mediaNodes).sourceIndex === valueNode.sourceIndex
+							) {
+								ignoreUnit = true;
+
+								return false;
+							}
+						});
+
+						if (ignoreUnit) {
+							return;
+						}
+					}
+
+					if (
+						node.type === 'decl' &&
+						(node.prop.toLowerCase() === 'image-resolution' || /^image-set/i.test(node.value))
+					) {
+						return;
+					}
+				}
+
 				report({
 					index: getIndex(node) + valueNode.sourceIndex,
 					message: messages.rejected(unit),