From b817dd5be0e64903f4c1b77da39841c379500d15 Mon Sep 17 00:00:00 2001 From: Brett Jankord Date: Thu, 4 Aug 2016 22:22:01 -0500 Subject: [PATCH] Add stylelint rules around variable colon whitespace --- CHANGELOG.md | 7 +++++++ README.md | 2 ++ __tests__/space-after-variable-colon.js | 28 +++++++++++++++++++++++++ __tests__/space-after-variable-name.js | 28 +++++++++++++++++++++++++ index.js | 2 ++ package.json | 14 ++++++------- src/.stylelintrc.json | 2 ++ src/failing-test-cases.scss | 8 +++---- 8 files changed, 80 insertions(+), 11 deletions(-) create mode 100644 __tests__/space-after-variable-colon.js create mode 100644 __tests__/space-after-variable-name.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ae7812..303ee2f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# 1.1.0 + +- Added: `scss/dollar-variable-colon-space-after` rule +- Added: `scss/dollar-variable-colon-space-before` rule +- Updated: Bumped up `stylelint` to v7.1.0 +- Updated: Bumped up `stylelint-scss` to v1.3.4 + # 1.0.0 - Added: `stylelint-disable-reason` rule diff --git a/README.md b/README.md index a9abe29..991b27b 100644 --- a/README.md +++ b/README.md @@ -132,6 +132,8 @@ This is a list of the lints turned on in this configuration, and what they do. * [`at-import-partial-extension-blacklist`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/at-import-partial-extension-blacklist/README.md): Specify blacklist of disallowed file extensions for partial names in `@import` commands. * `.scss`: Disallow the use of the `.scss` file extension in imports. * [`at-mixin-pattern`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/at-mixin-pattern/README.md): SCSS mixins must be written in lowercase and match the regex `^[a-z]+([a-z0-9-]+[a-z0-9]+)?$`. +* [`dollar-variable-colon-space-after`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/dollar-variable-colon-space-after/README.md): Require a single space after the colon in $-variable declarations. +* [`dollar-variable-colon-space-before`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/dollar-variable-colon-space-before/README.md): Disallow whitespace before the colon in $-variable declarations. * [`dollar-variable-pattern`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/dollar-variable-pattern/README.md): SCSS variables must be written in lowercase and match the regex `^[a-z]+([a-z0-9-]+[a-z0-9]+)?$`. * [`percent-placeholder-pattern`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/percent-placeholder-pattern/README.md): SCSS `%`-placeholders must be written in lowercase and match the regex `^[a-z]+([a-z0-9-]+[a-z0-9]+)?$`. * [`selector-no-redundant-nesting-selector`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/selector-no-redundant-nesting-selector/README.md): Disallow redundant nesting selectors (`&`). diff --git a/__tests__/space-after-variable-colon.js b/__tests__/space-after-variable-colon.js new file mode 100644 index 0000000..435ff30 --- /dev/null +++ b/__tests__/space-after-variable-colon.js @@ -0,0 +1,28 @@ +import config from "../" +import stylelint from "stylelint" +import postcss from "postcss" +import scssSyntax from "postcss-scss" +import test from "tape" + +const invalidScss = ( +`$spaceaftervariablecolon:#fff; +`) + +test("Space after variable colon scss", t => { + t.plan(2) + + postcss() + .use(stylelint({ code: invalidScss, config: config,})) + .process(invalidScss, { syntax: scssSyntax }) + .then(checkResult) + .catch(logError) + + function checkResult(result) { + t.equal(result.warnings().length, 1, "flags 1 warning") + t.is(result.warnings()[0].text, "Expected single space after \":\" (scss/dollar-variable-colon-space-after)", "correct warning text") + } +}) + +function logError(err) { + console.log(err.stack) +} diff --git a/__tests__/space-after-variable-name.js b/__tests__/space-after-variable-name.js new file mode 100644 index 0000000..3f0845b --- /dev/null +++ b/__tests__/space-after-variable-name.js @@ -0,0 +1,28 @@ +import config from "../" +import stylelint from "stylelint" +import postcss from "postcss" +import scssSyntax from "postcss-scss" +import test from "tape" + +const invalidScss = ( +`$spaceaftervariablename : #f00; +`) + +test("Space after variable name scss", t => { + t.plan(2) + + postcss() + .use(stylelint({ code: invalidScss, config: config,})) + .process(invalidScss, { syntax: scssSyntax }) + .then(checkResult) + .catch(logError) + + function checkResult(result) { + t.equal(result.warnings().length, 1, "flags 1 warning") + t.is(result.warnings()[0].text, "Unexpected whitespace before \":\" (scss/dollar-variable-colon-space-before)", "correct warning text") + } +}) + +function logError(err) { + console.log(err.stack) +} diff --git a/index.js b/index.js index 53d1059..0737613 100644 --- a/index.js +++ b/index.js @@ -62,6 +62,8 @@ module.exports = { "scss/at-import-no-partial-leading-underscore": true, "scss/at-import-partial-extension-blacklist": ["scss"], "scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "scss/dollar-variable-colon-space-after": "always", + "scss/dollar-variable-colon-space-before": "never", "scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$", "scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", "scss/selector-no-redundant-nesting-selector": true, diff --git a/package.json b/package.json index 9cf6267..f7ecaf1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stylelint-config-sass-guidelines", - "version": "1.0.0", + "version": "1.1.0", "description": "Sharable stylelint config based on https://sass-guidelin.es/", "keywords": [ "stylelint", @@ -25,18 +25,18 @@ "index.js" ], "dependencies": { - "stylelint-scss": "^1.2.1", + "stylelint-scss": "^1.3.4", "stylelint-selector-no-utility": "^1.1.0" }, "devDependencies": { - "copyfiles": "^1.0.0", - "rename-files": "0.0.2", - "replace": "^0.3.0", - "stylelint": "^7.0.2", - "nyc": "^7.0.0", "babel-cli": "^6.1.18", "babel-preset-es2015": "^6.1.18", "babel-tape-runner": "^2.0.0", + "copyfiles": "^1.0.0", + "nyc": "^7.0.0", + "rename-files": "0.0.2", + "replace": "^0.3.0", + "stylelint": "^7.1.0", "tape": "^4.2.0" }, "scripts": { diff --git a/src/.stylelintrc.json b/src/.stylelintrc.json index e023c33..897743a 100644 --- a/src/.stylelintrc.json +++ b/src/.stylelintrc.json @@ -62,6 +62,8 @@ "scss/at-import-no-partial-leading-underscore": true, "scss/at-import-partial-extension-blacklist": ["scss"], "scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", + "scss/dollar-variable-colon-space-after": "always", + "scss/dollar-variable-colon-space-before": "never", "scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$", "scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$", "scss/selector-no-redundant-nesting-selector": true, diff --git a/src/failing-test-cases.scss b/src/failing-test-cases.scss index 43ff676..69aecf6 100644 --- a/src/failing-test-cases.scss +++ b/src/failing-test-cases.scss @@ -238,13 +238,13 @@ a[href='place'] { margin : 0; } -// Have not found a way to test this with stylelint + // SpaceAfterVariableColon test -$spaceaftervariblecolon:#fff; // No space +$spaceaftervariablecolon:#fff; // No space + -// stylelint does not seem to be checking this // SpaceAfterVariableName test -$spaceaftervariblename : #f00; +$spaceaftervariablename : #f00; // SpaceAroundOperator test .spacearoundoperator {