From 534cfc7c6fdbcb78b6937c37e35626261b97bc14 Mon Sep 17 00:00:00 2001 From: yaga Date: Thu, 4 Nov 2021 16:50:29 +0300 Subject: [PATCH 1/9] Fix false positives for maps in property-no-unknown (#5654) --- .../__tests__/isStandardSyntaxDeclaration.test.js | 4 ++++ lib/utils/isStandardSyntaxDeclaration.js | 11 +++++++++++ 2 files changed, 15 insertions(+) diff --git a/lib/utils/__tests__/isStandardSyntaxDeclaration.test.js b/lib/utils/__tests__/isStandardSyntaxDeclaration.test.js index 7cc6872745..fcce7bba53 100644 --- a/lib/utils/__tests__/isStandardSyntaxDeclaration.test.js +++ b/lib/utils/__tests__/isStandardSyntaxDeclaration.test.js @@ -139,6 +139,10 @@ describe('isStandardSyntaxDeclaration', () => { expect(isStandardSyntaxDeclaration(lessDecl('@map: { key: value; }'))).toBe(false); }); + it('less another map', () => { + expect(isStandardSyntaxDeclaration(lessDecl('#my-map() { key: value; }'))).toBe(false); + }); + it('scss map declaration', () => { expect(isStandardSyntaxDeclaration(scssDecl('$foo: (key: value, key2: value2)'))).toBe(false); }); diff --git a/lib/utils/isStandardSyntaxDeclaration.js b/lib/utils/isStandardSyntaxDeclaration.js index d917520c79..56516607c7 100644 --- a/lib/utils/isStandardSyntaxDeclaration.js +++ b/lib/utils/isStandardSyntaxDeclaration.js @@ -46,6 +46,17 @@ module.exports = function (decl) { return false; } + // Less map (e.g. #my-map() { myprop: red; }) + if ( + parent && + isRule(parent) && + parent.selector && + parent.selector[0] === '#' && + parent.selector[parent.selector.length - 1] === ')' + ) { + return false; + } + // Sass nested properties (e.g. border: { style: solid; color: red; }) if ( parent && From 5c01102b27a43901c7e54f4f271c42203ebc9f9a Mon Sep 17 00:00:00 2001 From: yaga Date: Thu, 4 Nov 2021 17:24:25 +0300 Subject: [PATCH 2/9] Fix false positives for maps in color-no-invalid-hex (#5654) --- .../color-no-invalid-hex/__tests__/index.js | 4 ++++ lib/rules/color-no-invalid-hex/index.js | 5 +++++ .../__tests__/isStandardSyntaxHexColor.test.js | 12 ++++++++++++ lib/utils/isStandardSyntaxHexColor.js | 16 ++++++++++++++++ 4 files changed, 37 insertions(+) create mode 100644 lib/utils/__tests__/isStandardSyntaxHexColor.test.js create mode 100644 lib/utils/isStandardSyntaxHexColor.js diff --git a/lib/rules/color-no-invalid-hex/__tests__/index.js b/lib/rules/color-no-invalid-hex/__tests__/index.js index 435d0ce51a..d1d1f20c2b 100644 --- a/lib/rules/color-no-invalid-hex/__tests__/index.js +++ b/lib/rules/color-no-invalid-hex/__tests__/index.js @@ -61,6 +61,10 @@ testRule({ 'font-style: normal;\n' + '}', }, + { + code: 'a { color: #colors[somecolor]; }', + description: 'Less map usage', + }, ], reject: [ diff --git a/lib/rules/color-no-invalid-hex/index.js b/lib/rules/color-no-invalid-hex/index.js index 94fb9a2ad1..45db19fed7 100644 --- a/lib/rules/color-no-invalid-hex/index.js +++ b/lib/rules/color-no-invalid-hex/index.js @@ -1,6 +1,7 @@ 'use strict'; const declarationValueIndex = require('../../utils/declarationValueIndex'); +const isStandardSyntaxHexColor = require('../../utils/isStandardSyntaxHexColor'); const isValidHex = require('../../utils/isValidHex'); const report = require('../../utils/report'); const ruleMessages = require('../../utils/ruleMessages'); @@ -23,6 +24,10 @@ const rule = (primary) => { } root.walkDecls((decl) => { + if (!isStandardSyntaxHexColor(decl.value)) { + return; + } + valueParser(decl.value).walk(({ value, type, sourceIndex }) => { if (type === 'function' && value.endsWith('url')) return false; diff --git a/lib/utils/__tests__/isStandardSyntaxHexColor.test.js b/lib/utils/__tests__/isStandardSyntaxHexColor.test.js new file mode 100644 index 0000000000..c28fc65208 --- /dev/null +++ b/lib/utils/__tests__/isStandardSyntaxHexColor.test.js @@ -0,0 +1,12 @@ +'use strict'; + +const isStandardSyntaxHexColor = require('../isStandardSyntaxHexColor'); + +describe('isStandardSyntaxHexColor', () => { + it('default hex', () => { + expect(isStandardSyntaxHexColor('#000000')).toBeTruthy(); + }); + it('less map usage', () => { + expect(isStandardSyntaxHexColor('#prop[someprop]')).toBeFalsy(); + }); +}); diff --git a/lib/utils/isStandardSyntaxHexColor.js b/lib/utils/isStandardSyntaxHexColor.js new file mode 100644 index 0000000000..57a7468a78 --- /dev/null +++ b/lib/utils/isStandardSyntaxHexColor.js @@ -0,0 +1,16 @@ +'use strict'; + +/** + * Check whether a hex color is standard + * + * @param {string} property + * @returns {boolean} + */ +module.exports = function (property) { + // Less map usage (e.g. .myclass { color: #colors[somecolor]; }) + if (property.includes('[')) { + return false; + } + + return true; +}; From 8bc00f28fc6ef47c16224b86dc9610eb6b078005 Mon Sep 17 00:00:00 2001 From: strigefleur Date: Sat, 6 Nov 2021 12:54:20 +0300 Subject: [PATCH 3/9] Update lib/utils/isStandardSyntaxDeclaration.js Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com> --- lib/utils/isStandardSyntaxDeclaration.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/utils/isStandardSyntaxDeclaration.js b/lib/utils/isStandardSyntaxDeclaration.js index 56516607c7..d8291befef 100644 --- a/lib/utils/isStandardSyntaxDeclaration.js +++ b/lib/utils/isStandardSyntaxDeclaration.js @@ -51,8 +51,8 @@ module.exports = function (decl) { parent && isRule(parent) && parent.selector && - parent.selector[0] === '#' && - parent.selector[parent.selector.length - 1] === ')' + parent.selector.startsWith('#') && + parent.selector.endsWith('()') ) { return false; } From 9188cc71a9f46f9b24f0787d846bf4b1fc2dc974 Mon Sep 17 00:00:00 2001 From: strigefleur Date: Sat, 6 Nov 2021 12:54:30 +0300 Subject: [PATCH 4/9] Update lib/utils/__tests__/isStandardSyntaxHexColor.test.js Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com> --- lib/utils/__tests__/isStandardSyntaxHexColor.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/utils/__tests__/isStandardSyntaxHexColor.test.js b/lib/utils/__tests__/isStandardSyntaxHexColor.test.js index c28fc65208..42520bd51c 100644 --- a/lib/utils/__tests__/isStandardSyntaxHexColor.test.js +++ b/lib/utils/__tests__/isStandardSyntaxHexColor.test.js @@ -4,9 +4,9 @@ const isStandardSyntaxHexColor = require('../isStandardSyntaxHexColor'); describe('isStandardSyntaxHexColor', () => { it('default hex', () => { - expect(isStandardSyntaxHexColor('#000000')).toBeTruthy(); + expect(isStandardSyntaxHexColor('#000000')).toBe(true); }); it('less map usage', () => { - expect(isStandardSyntaxHexColor('#prop[someprop]')).toBeFalsy(); + expect(isStandardSyntaxHexColor('#prop[someprop]')).toBe(false); }); }); From c5566051cc0c773d7bef0b05a7d49d9a91a883ad Mon Sep 17 00:00:00 2001 From: strigefleur Date: Sat, 6 Nov 2021 12:54:37 +0300 Subject: [PATCH 5/9] Update lib/utils/isStandardSyntaxHexColor.js Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com> --- lib/utils/isStandardSyntaxHexColor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/utils/isStandardSyntaxHexColor.js b/lib/utils/isStandardSyntaxHexColor.js index 57a7468a78..1976b80be6 100644 --- a/lib/utils/isStandardSyntaxHexColor.js +++ b/lib/utils/isStandardSyntaxHexColor.js @@ -6,7 +6,7 @@ * @param {string} property * @returns {boolean} */ -module.exports = function (property) { +module.exports = function isStandardSyntaxHexColor(property) { // Less map usage (e.g. .myclass { color: #colors[somecolor]; }) if (property.includes('[')) { return false; From 889e2a2a286714d9703920579f7f8ab6565ea926 Mon Sep 17 00:00:00 2001 From: strigefleur Date: Wed, 10 Nov 2021 14:00:54 +0300 Subject: [PATCH 6/9] Update lib/utils/isStandardSyntaxHexColor.js Co-authored-by: Richard Hallows --- lib/utils/isStandardSyntaxHexColor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/utils/isStandardSyntaxHexColor.js b/lib/utils/isStandardSyntaxHexColor.js index 1976b80be6..9168abcf39 100644 --- a/lib/utils/isStandardSyntaxHexColor.js +++ b/lib/utils/isStandardSyntaxHexColor.js @@ -3,7 +3,7 @@ /** * Check whether a hex color is standard * - * @param {string} property + * @param {string} hex * @returns {boolean} */ module.exports = function isStandardSyntaxHexColor(property) { From 6225234ff99e242c296313a736d1dc96fe3ccebe Mon Sep 17 00:00:00 2001 From: strigefleur Date: Wed, 10 Nov 2021 14:01:01 +0300 Subject: [PATCH 7/9] Update lib/utils/isStandardSyntaxHexColor.js Co-authored-by: Richard Hallows --- lib/utils/isStandardSyntaxHexColor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/utils/isStandardSyntaxHexColor.js b/lib/utils/isStandardSyntaxHexColor.js index 9168abcf39..d3213b37c3 100644 --- a/lib/utils/isStandardSyntaxHexColor.js +++ b/lib/utils/isStandardSyntaxHexColor.js @@ -6,7 +6,7 @@ * @param {string} hex * @returns {boolean} */ -module.exports = function isStandardSyntaxHexColor(property) { +module.exports = function isStandardSyntaxHexColor(hex) { // Less map usage (e.g. .myclass { color: #colors[somecolor]; }) if (property.includes('[')) { return false; From 6d4076bea87bc4793ecd3a54bb88775be1639fef Mon Sep 17 00:00:00 2001 From: strigefleur Date: Wed, 10 Nov 2021 14:01:06 +0300 Subject: [PATCH 8/9] Update lib/utils/isStandardSyntaxHexColor.js Co-authored-by: Richard Hallows --- lib/utils/isStandardSyntaxHexColor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/utils/isStandardSyntaxHexColor.js b/lib/utils/isStandardSyntaxHexColor.js index d3213b37c3..71a7581a99 100644 --- a/lib/utils/isStandardSyntaxHexColor.js +++ b/lib/utils/isStandardSyntaxHexColor.js @@ -8,7 +8,7 @@ */ module.exports = function isStandardSyntaxHexColor(hex) { // Less map usage (e.g. .myclass { color: #colors[somecolor]; }) - if (property.includes('[')) { + if (hex.includes('[')) { return false; } From 9ef16482a57c648a8d37b11f9e41f62fcd820eee Mon Sep 17 00:00:00 2001 From: Richard Hallows Date: Sat, 13 Nov 2021 17:57:37 +0000 Subject: [PATCH 9/9] Update index.js --- .../color-no-invalid-hex/__tests__/index.js | 40 +++++++++++++------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/lib/rules/color-no-invalid-hex/__tests__/index.js b/lib/rules/color-no-invalid-hex/__tests__/index.js index d1d1f20c2b..be797e0a06 100644 --- a/lib/rules/color-no-invalid-hex/__tests__/index.js +++ b/lib/rules/color-no-invalid-hex/__tests__/index.js @@ -30,14 +30,6 @@ testRule({ { code: 'a::before { content: "#ababa"; }', }, - { - code: 'a { border-#$side: 0; }', - description: 'ignore sass-like interpolation', - }, - { - code: 'a { box-sizing: #$type-box; }', - description: 'ignore sass-like interpolation', - }, { code: "a { background-image: svg-load('x.svg', fill=url(#a)); }", description: 'svg-load url with fill', @@ -61,10 +53,6 @@ testRule({ 'font-style: normal;\n' + '}', }, - { - code: 'a { color: #colors[somecolor]; }', - description: 'Less map usage', - }, ], reject: [ @@ -95,6 +83,34 @@ testRule({ ], }); +testRule({ + ruleName, + config: [true], + customSyntax: 'postcss-less', + accept: [ + { + code: 'a { color: #colors[somecolor]; }', + description: 'Less map usage', + }, + ], +}); + +testRule({ + ruleName, + config: [true], + customSyntax: 'postcss-scss', + accept: [ + { + code: 'a { border-#$side: 0; }', + description: 'ignore sass-like interpolation', + }, + { + code: 'a { box-sizing: #$type-box; }', + description: 'ignore sass-like interpolation', + }, + ], +}); + testRule({ skip: true, ruleName,