From ea261519a8fd8b9dcb867ef4be1e0f53152e7018 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Bene=C5=A1?= Date: Sun, 31 Mar 2019 18:17:25 +0200 Subject: [PATCH] Polished things in real-world scenario (#5) - Fixed case where we can't parse the color - Ignored `rgba` because color can't work with alpha (in hex) --- Readme.md | 23 ++++++++++----- package.json | 2 +- .../__tests__/smart-color-replacement.test.js | 13 ++++++++- src/rules/smart-color-replacement.js | 29 ++++++++++++------- 4 files changed, 47 insertions(+), 20 deletions(-) diff --git a/Readme.md b/Readme.md index a1e21eb..cf434d2 100644 --- a/Readme.md +++ b/Readme.md @@ -32,9 +32,11 @@ Example configuration. 👇 ```js { rules: { - "@productboardlabs/smart-color-replacement": { - "@snowWhite": "#f4f5e2" - } + "@productboard/smart-color-replacement": [ + { + "@snowWhite": "#f4f5e2" + } + ] } } ``` @@ -43,11 +45,16 @@ You can also run this rule in **strict mode** which means that there is no other ```js { - rules: { - "@productboardlabs/smart-color-replacement": [{ - "@snowWhite": "#f4f5e2" - }, "strictMode"] - } + "rules": { + "@productboard/smart-color-replacement": [ + { + "@white": "#ffffff" + }, + { + "strictMode": true + } + ] + } } ``` diff --git a/package.json b/package.json index 8d99261..23b1d73 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@productboard/stylelint-pb", "version": "1.0.0", - "main": "index.js", + "main": "src/index.js", "license": "MIT", "scripts": { "test": "jest" diff --git a/src/rules/__tests__/smart-color-replacement.test.js b/src/rules/__tests__/smart-color-replacement.test.js index 45791be..1dc8887 100644 --- a/src/rules/__tests__/smart-color-replacement.test.js +++ b/src/rules/__tests__/smart-color-replacement.test.js @@ -37,6 +37,10 @@ testRule(rule, { { code: "a { color: #333333; }", description: "Color out of the config should be ignored by default" + }, + { + code: "a { box-shadow: 0 1px 2px rgb(broken, 0.3); }", + description: "non-parsable colors should be ignored" } ], @@ -86,10 +90,17 @@ testRule(rule, { { "@snowWhite": "#f4f5e2" }, - "strictMode" + { strictMode: true } ], fix: true, + accept: [ + { + code: "a { box-shadow: 0 1px 2px rgb(broken, 0.3); }", + description: "non-parsable colors should be ignored" + } + ], + reject: [ { code: "a { color: #333333; }", diff --git a/src/rules/smart-color-replacement.js b/src/rules/smart-color-replacement.js index bc8b094..2b9d903 100644 --- a/src/rules/smart-color-replacement.js +++ b/src/rules/smart-color-replacement.js @@ -2,7 +2,7 @@ const stylelint = require("stylelint"); const color = require("color"); const HEX_REGEX = /(#[a-f0-9]{3,6})/gi; -const RGB_REGEX = /(rgb|rgba)\([^\)]*\)/gi; +const RGB_REGEX = /rgb\([^\)]*\)/gi; const HSL_REGEX = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/gi; const ruleName = "@productboard/smart-color-replacement"; @@ -14,7 +14,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, { .join(" ") }); -const rule = function(configuration, strictMode, context) { +const rule = function(configuration, { strictMode = false } = {}, context) { return (root, result) => { if (typeof configuration !== "object" || !configuration) return; @@ -40,18 +40,27 @@ const rule = function(configuration, strictMode, context) { return acc; }, []); - const results = colors.map(used => { - const sanitized = color(used).hex(); - return { + const results = colors.reduce((acc, v, i) => { + let sanitized; + try { + sanitized = color(v).hex(); + } catch (e) { + // ignore non-parsable colors + return acc; + } + + acc.push({ valid: lookUpObject[sanitized] ? !lookUpObject[sanitized] - : strictMode !== "strictMode", + : !strictMode, suggested: lookUpObject[sanitized], - used - }; - }); + used: v + }); + + return acc; + }, []); - const failedColors = results.filter(res => !res.valid); + const failedColors = results.filter(({ valid }) => !valid); if (failedColors.length) { stylelint.utils.report({