Add stylelint rules around variable colon whitespace

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

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 (`&`).

__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)
+}

__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)
+}

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,

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": {

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,

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 {