From 12078a11494748294ae3cd94604613224951e486 Mon Sep 17 00:00:00 2001 From: Alex Stephen Date: Fri, 14 Jun 2019 14:51:54 -0700 Subject: [PATCH 1/5] use scalar-color function instead of other color adjustment functions --- .../README.md | 74 +++++++++++++++ .../__tests__/index.js | 93 +++++++++++++++++++ .../function-scalar-color-use-always/index.js | 52 +++++++++++ src/rules/index.js | 2 + 4 files changed, 221 insertions(+) create mode 100644 src/rules/function-scalar-color-use-always/README.md create mode 100644 src/rules/function-scalar-color-use-always/__tests__/index.js create mode 100644 src/rules/function-scalar-color-use-always/index.js diff --git a/src/rules/function-scalar-color-use-always/README.md b/src/rules/function-scalar-color-use-always/README.md new file mode 100644 index 00000000..c37706b5 --- /dev/null +++ b/src/rules/function-scalar-color-use-always/README.md @@ -0,0 +1,74 @@ +# function-quote-no-quoted-strings-inside + +Disallow quoted strings inside the [quote function](https://sass-lang.com/documentation/functions/string#quote) + +```scss +p { + color: saturate(blue, 20%); + /** ↑ ↑ + * This function should be scalar-color + */ +} +``` + +## Options + +### `true` + +The following patterns are considered violations: + +```scss +p { + color: saturate(blue, 20%); +} +``` + +```scss +p { + color: desaturate(blue, 20%); +} +``` + +```scss +p { + color: darken(blue, .2); +} +``` + +```scss +p { + color: lighten(blue, .2); +} +``` + +```scss +p { + color: opacify(blue, .2); +} +``` + +```scss +p { + color: fade-in(blue, .2); +} +``` + +```scss +p { + color: transparentize(blue, .2); +} +``` + +```scss +p { + color: fade-out(blue, .2); +} +``` + +The following patterns are _not_ considered violations: + +```scss + p { + color: scale-color(blue, $alpha: -40%); + } +``` \ No newline at end of file diff --git a/src/rules/function-scalar-color-use-always/__tests__/index.js b/src/rules/function-scalar-color-use-always/__tests__/index.js new file mode 100644 index 00000000..f5eac8d8 --- /dev/null +++ b/src/rules/function-scalar-color-use-always/__tests__/index.js @@ -0,0 +1,93 @@ +import rule, { ruleName, messages } from ".."; + +testRule(rule, { + ruleName, + config: [true], + syntax: "scss", + + accept: [ + { + code: ` + p { + color: scale-color(blue, $alpha: -40%); + } + `, + description: "accepts the scalar-color function" + } + ], + + reject: [ + { + code: ` + p { + color: saturate(blue, 20%); + } + `, + description: "does not accept the saturate function", + message: messages.rejected + }, + { + code: ` + p { + color: desaturate(blue, 20%); + } + `, + description: "does not accept the desaturate function", + message: messages.rejected + }, + { + code: ` + p { + color: darken(blue, .2); + } + `, + description: "does not accept the darken function", + message: messages.rejected + }, + { + code: ` + p { + color: lighten(blue, .2); + } + `, + description: "does not accept the lighten function", + message: messages.rejected + }, + { + code: ` + p { + color: opacify(blue, .2); + } + `, + description: "does not accept the opacify function", + message: messages.rejected + }, + { + code: ` + p { + color: fade-in(blue, .2); + } + `, + description: "does not accept the fade-in function", + message: messages.rejected + }, + { + code: ` + p { + color: transparentize(blue, .2); + } + `, + description: "does not accept the transparentize function", + message: messages.rejected + }, + { + code: ` + p { + color: fade-out(blue, .2); + } + `, + description: "does not accept the fade-out function", + message: messages.rejected + } + ] +}); diff --git a/src/rules/function-scalar-color-use-always/index.js b/src/rules/function-scalar-color-use-always/index.js new file mode 100644 index 00000000..7e390dc0 --- /dev/null +++ b/src/rules/function-scalar-color-use-always/index.js @@ -0,0 +1,52 @@ +import { utils } from "stylelint"; +import { namespace } from "../../utils"; +import valueParser from "postcss-value-parser"; + +export const ruleName = namespace("function-scalar-color-use-always"); + +export const messages = utils.ruleMessages(ruleName, { + rejected: "Use the scalar function." +}); + +const function_names = [ + "saturate", + "desaturate", + "darken", + "lighten", + "opacify", + "fade-in", + "transparentize", + "fade-out" +]; + +function rule(primary) { + return (root, result) => { + const validOptions = utils.validateOptions(result, ruleName, { + actual: primary + }); + + if (!validOptions) { + return; + } + + root.walkDecls(decl => { + valueParser(decl.value).walk(node => { + // Verify that we're only looking at functions. + if (node.type !== "function" || node.value === "") { + return; + } + + if (function_names.includes(node.value)) { + utils.report({ + message: messages.rejected, + node: decl, + result, + ruleName + }); + } + }); + }); + }; +} + +export default rule; diff --git a/src/rules/index.js b/src/rules/index.js index 73a1bf75..89fcfc36 100644 --- a/src/rules/index.js +++ b/src/rules/index.js @@ -31,6 +31,7 @@ import doubleSlashCommentInline from "./double-slash-comment-inline"; import doubleSlashCommentWhitespaceInside from "./double-slash-comment-whitespace-inside"; import functionNoQuotedStrings from "./function-quote-no-quoted-strings-inside"; import functionNoUnquotedStrings from "./function-unquote-no-unquoted-strings-inside"; +import functionScalar from "./function-scalar-color-use-always"; import mediaFeatureValueDollarVariable from "./media-feature-value-dollar-variable"; import noDollarVariables from "./no-dollar-variables"; import noDuplicateDollarVariables from "./no-duplicate-dollar-variables"; @@ -76,6 +77,7 @@ export default { "double-slash-comment-whitespace-inside": doubleSlashCommentWhitespaceInside, "function-quote-no-quoted-strings-inside": functionNoQuotedStrings, "function-unquote-no-unquoted-strings-inside": functionNoUnquotedStrings, + "function-scalar-color-use-always": functionScalar, "media-feature-value-dollar-variable": mediaFeatureValueDollarVariable, "no-dollar-variables": noDollarVariables, "no-duplicate-dollar-variables": noDuplicateDollarVariables, From 586ffa167b177d266cf14c07412ee65cd1f37278 Mon Sep 17 00:00:00 2001 From: Alex Stephen Date: Thu, 20 Jun 2019 17:54:01 -0700 Subject: [PATCH 2/5] better docs and rename --- .../README.md | 74 ----------------- .../function-scale-color-use-always/README.md | 83 +++++++++++++++++++ .../__tests__/index.js | 0 .../index.js | 4 +- src/rules/index.js | 4 +- 5 files changed, 87 insertions(+), 78 deletions(-) delete mode 100644 src/rules/function-scalar-color-use-always/README.md create mode 100644 src/rules/function-scale-color-use-always/README.md rename src/rules/{function-scalar-color-use-always => function-scale-color-use-always}/__tests__/index.js (100%) rename src/rules/{function-scalar-color-use-always => function-scale-color-use-always}/index.js (89%) diff --git a/src/rules/function-scalar-color-use-always/README.md b/src/rules/function-scalar-color-use-always/README.md deleted file mode 100644 index c37706b5..00000000 --- a/src/rules/function-scalar-color-use-always/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# function-quote-no-quoted-strings-inside - -Disallow quoted strings inside the [quote function](https://sass-lang.com/documentation/functions/string#quote) - -```scss -p { - color: saturate(blue, 20%); - /** ↑ ↑ - * This function should be scalar-color - */ -} -``` - -## Options - -### `true` - -The following patterns are considered violations: - -```scss -p { - color: saturate(blue, 20%); -} -``` - -```scss -p { - color: desaturate(blue, 20%); -} -``` - -```scss -p { - color: darken(blue, .2); -} -``` - -```scss -p { - color: lighten(blue, .2); -} -``` - -```scss -p { - color: opacify(blue, .2); -} -``` - -```scss -p { - color: fade-in(blue, .2); -} -``` - -```scss -p { - color: transparentize(blue, .2); -} -``` - -```scss -p { - color: fade-out(blue, .2); -} -``` - -The following patterns are _not_ considered violations: - -```scss - p { - color: scale-color(blue, $alpha: -40%); - } -``` \ No newline at end of file diff --git a/src/rules/function-scale-color-use-always/README.md b/src/rules/function-scale-color-use-always/README.md new file mode 100644 index 00000000..d0ea49d7 --- /dev/null +++ b/src/rules/function-scale-color-use-always/README.md @@ -0,0 +1,83 @@ +# function-scale-color-use-always + +Encourage the use of the [scale-color](https://sass-lang.com/documentation/functions/color#scale-color) over: + +* [darken](https://sass-lang.com/documentation/functions/color#darken) +* [desaturate](https://sass-lang.com/documentation/functions/color#desaturate) +* [fade-in](https://sass-lang.com/documentation/functions/color#fade-in) +* [fade-out](https://sass-lang.com/documentation/functions/color#fade-out) +* [lighten](https://sass-lang.com/documentation/functions/color#lighten) +* [opacify](https://sass-lang.com/documentation/functions/color#opacify) +* [saturate](https://sass-lang.com/documentation/functions/color#saturate) +* [transparentize](https://sass-lang.com/documentation/functions/color#transparentize) + +```scss +p { + color: saturate(blue, 20%); + /** ↑ ↑ + * This function should be scalar-color + */ +} +``` + +## Options + +### `true` + +The following patterns are considered violations: + +```scss +p { + color: saturate(blue, 20%); +} +``` + +```scss +p { + color: desaturate(blue, 20%); +} +``` + +```scss +p { + color: darken(blue, .2); +} +``` + +```scss +p { + color: lighten(blue, .2); +} +``` + +```scss +p { + color: opacify(blue, .2); +} +``` + +```scss +p { + color: fade-in(blue, .2); +} +``` + +```scss +p { + color: transparentize(blue, .2); +} +``` + +```scss +p { + color: fade-out(blue, .2); +} +``` + +The following patterns are _not_ considered violations: + +```scss + p { + color: scale-color(blue, $alpha: -40%); + } +``` diff --git a/src/rules/function-scalar-color-use-always/__tests__/index.js b/src/rules/function-scale-color-use-always/__tests__/index.js similarity index 100% rename from src/rules/function-scalar-color-use-always/__tests__/index.js rename to src/rules/function-scale-color-use-always/__tests__/index.js diff --git a/src/rules/function-scalar-color-use-always/index.js b/src/rules/function-scale-color-use-always/index.js similarity index 89% rename from src/rules/function-scalar-color-use-always/index.js rename to src/rules/function-scale-color-use-always/index.js index 7e390dc0..844abd0d 100644 --- a/src/rules/function-scalar-color-use-always/index.js +++ b/src/rules/function-scale-color-use-always/index.js @@ -2,10 +2,10 @@ import { utils } from "stylelint"; import { namespace } from "../../utils"; import valueParser from "postcss-value-parser"; -export const ruleName = namespace("function-scalar-color-use-always"); +export const ruleName = namespace("function-scale-color-use-always"); export const messages = utils.ruleMessages(ruleName, { - rejected: "Use the scalar function." + rejected: "Use the scale-color function." }); const function_names = [ diff --git a/src/rules/index.js b/src/rules/index.js index 89fcfc36..4006830a 100644 --- a/src/rules/index.js +++ b/src/rules/index.js @@ -31,7 +31,7 @@ import doubleSlashCommentInline from "./double-slash-comment-inline"; import doubleSlashCommentWhitespaceInside from "./double-slash-comment-whitespace-inside"; import functionNoQuotedStrings from "./function-quote-no-quoted-strings-inside"; import functionNoUnquotedStrings from "./function-unquote-no-unquoted-strings-inside"; -import functionScalar from "./function-scalar-color-use-always"; +import functionScaleColor from "./function-scale-color-use-always"; import mediaFeatureValueDollarVariable from "./media-feature-value-dollar-variable"; import noDollarVariables from "./no-dollar-variables"; import noDuplicateDollarVariables from "./no-duplicate-dollar-variables"; @@ -77,7 +77,7 @@ export default { "double-slash-comment-whitespace-inside": doubleSlashCommentWhitespaceInside, "function-quote-no-quoted-strings-inside": functionNoQuotedStrings, "function-unquote-no-unquoted-strings-inside": functionNoUnquotedStrings, - "function-scalar-color-use-always": functionScalar, + "function-scale-color-use-always": functionScaleColor, "media-feature-value-dollar-variable": mediaFeatureValueDollarVariable, "no-dollar-variables": noDollarVariables, "no-duplicate-dollar-variables": noDuplicateDollarVariables, From 63d3fbf8ba68cab3d50bf3353853853852fca981 Mon Sep 17 00:00:00 2001 From: Alex Stephen Date: Mon, 1 Jul 2019 11:37:49 -0700 Subject: [PATCH 3/5] changed error message --- src/rules/function-scale-color-use-always/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/rules/function-scale-color-use-always/index.js b/src/rules/function-scale-color-use-always/index.js index 844abd0d..dac68087 100644 --- a/src/rules/function-scale-color-use-always/index.js +++ b/src/rules/function-scale-color-use-always/index.js @@ -5,7 +5,7 @@ import valueParser from "postcss-value-parser"; export const ruleName = namespace("function-scale-color-use-always"); export const messages = utils.ruleMessages(ruleName, { - rejected: "Use the scale-color function." + rejected: "Expected the scale-color function to be used" }); const function_names = [ From 21d29a1ce1dca1290b25f8553eed884c6652a450 Mon Sep 17 00:00:00 2001 From: Alex Stephen Date: Mon, 1 Jul 2019 16:46:44 -0700 Subject: [PATCH 4/5] changing rule name --- .../README.md | 2 +- .../__tests__/index.js | 0 .../index.js | 2 +- src/rules/index.js | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) rename src/rules/{function-scale-color-use-always => function-color-relative}/README.md (97%) rename src/rules/{function-scale-color-use-always => function-color-relative}/__tests__/index.js (100%) rename src/rules/{function-scale-color-use-always => function-color-relative}/index.js (93%) diff --git a/src/rules/function-scale-color-use-always/README.md b/src/rules/function-color-relative/README.md similarity index 97% rename from src/rules/function-scale-color-use-always/README.md rename to src/rules/function-color-relative/README.md index d0ea49d7..270d1033 100644 --- a/src/rules/function-scale-color-use-always/README.md +++ b/src/rules/function-color-relative/README.md @@ -1,4 +1,4 @@ -# function-scale-color-use-always +# function-color-relative Encourage the use of the [scale-color](https://sass-lang.com/documentation/functions/color#scale-color) over: diff --git a/src/rules/function-scale-color-use-always/__tests__/index.js b/src/rules/function-color-relative/__tests__/index.js similarity index 100% rename from src/rules/function-scale-color-use-always/__tests__/index.js rename to src/rules/function-color-relative/__tests__/index.js diff --git a/src/rules/function-scale-color-use-always/index.js b/src/rules/function-color-relative/index.js similarity index 93% rename from src/rules/function-scale-color-use-always/index.js rename to src/rules/function-color-relative/index.js index dac68087..af9a9454 100644 --- a/src/rules/function-scale-color-use-always/index.js +++ b/src/rules/function-color-relative/index.js @@ -2,7 +2,7 @@ import { utils } from "stylelint"; import { namespace } from "../../utils"; import valueParser from "postcss-value-parser"; -export const ruleName = namespace("function-scale-color-use-always"); +export const ruleName = namespace("function-color-relative"); export const messages = utils.ruleMessages(ruleName, { rejected: "Expected the scale-color function to be used" diff --git a/src/rules/index.js b/src/rules/index.js index 4006830a..7de04f64 100644 --- a/src/rules/index.js +++ b/src/rules/index.js @@ -31,7 +31,7 @@ import doubleSlashCommentInline from "./double-slash-comment-inline"; import doubleSlashCommentWhitespaceInside from "./double-slash-comment-whitespace-inside"; import functionNoQuotedStrings from "./function-quote-no-quoted-strings-inside"; import functionNoUnquotedStrings from "./function-unquote-no-unquoted-strings-inside"; -import functionScaleColor from "./function-scale-color-use-always"; +import functionColorRelative from "function-color-relative"; import mediaFeatureValueDollarVariable from "./media-feature-value-dollar-variable"; import noDollarVariables from "./no-dollar-variables"; import noDuplicateDollarVariables from "./no-duplicate-dollar-variables"; @@ -77,7 +77,7 @@ export default { "double-slash-comment-whitespace-inside": doubleSlashCommentWhitespaceInside, "function-quote-no-quoted-strings-inside": functionNoQuotedStrings, "function-unquote-no-unquoted-strings-inside": functionNoUnquotedStrings, - "function-scale-color-use-always": functionScaleColor, + "function-color-relative": functionColorRelative, "media-feature-value-dollar-variable": mediaFeatureValueDollarVariable, "no-dollar-variables": noDollarVariables, "no-duplicate-dollar-variables": noDuplicateDollarVariables, From d4c264758f0a2b84d82cad7fd814315a94a36422 Mon Sep 17 00:00:00 2001 From: Alex Stephen Date: Mon, 1 Jul 2019 16:54:21 -0700 Subject: [PATCH 5/5] typo --- src/rules/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/rules/index.js b/src/rules/index.js index 7de04f64..2407b662 100644 --- a/src/rules/index.js +++ b/src/rules/index.js @@ -31,7 +31,7 @@ import doubleSlashCommentInline from "./double-slash-comment-inline"; import doubleSlashCommentWhitespaceInside from "./double-slash-comment-whitespace-inside"; import functionNoQuotedStrings from "./function-quote-no-quoted-strings-inside"; import functionNoUnquotedStrings from "./function-unquote-no-unquoted-strings-inside"; -import functionColorRelative from "function-color-relative"; +import functionColorRelative from "./function-color-relative"; import mediaFeatureValueDollarVariable from "./media-feature-value-dollar-variable"; import noDollarVariables from "./no-dollar-variables"; import noDuplicateDollarVariables from "./no-duplicate-dollar-variables";