Merge pull request #286 from humanmade/update-stylelint

Add stylelint tests

Author: ntwb

.travis.yml

@@ -56,4 +56,13 @@ jobs:
         - npm install --legacy-peer-deps
         - cd ../..
       script:
-        - npm test
+        - npm run test:eslint
+    - language: node_js
+      node_js: 16
+      install:
+        - npm install
+        - cd packages/stylelint-config
+        - npm install
+        - cd ../..
+      script:
+        - npm run test:stylelint

package.json

@@ -78,7 +78,8 @@
 		"publish:dev": "lerna publish --dist-tag next",
 		"publish:legacy": "lerna publish --dist-tag legacy",
 		"publish:prod": "lerna publish",
-		"test": "npm run lint-pkg-json && npm run test:packages",
-		"test:packages": "cd packages/eslint-config-humanmade && npm test"
+		"test": "npm run lint-pkg-json && npm run test:eslint && npm run test:stylelint",
+		"test:eslint": "cd packages/eslint-config-humanmade && npm test",
+		"test:stylelint": "cd packages/stylelint-config && npm test"
 	}
 }

packages/stylelint-config/fixtures/fail/bad-bem-syntax.css

@@ -0,0 +1,6 @@
+/* Bad BEM syntax */
+.foo__bar__foo,
+.foo--bar--foo,
+.foo--bar__foo {
+	display: block;
+}

packages/stylelint-config/fixtures/fail/max-nesting-depth.scss

@@ -0,0 +1,16 @@
+// Max nesting depth.
+.element {
+	display: block;
+
+	.child-element {
+		display: block;
+
+		.child-element {
+			display: block;
+
+			.child-element {
+				display: block;
+			}
+		}
+	}
+}

packages/stylelint-config/fixtures/fail/no-color-named.css

@@ -0,0 +1,3 @@
+.element {
+	background: red;
+}

packages/stylelint-config/fixtures/pass/style.css

@@ -0,0 +1,11 @@
+/* No color-named */
+.element {
+	background: #f00;
+}
+
+/* Valid BEM syntax */
+.block__element,
+.block__element--modifier,
+.block--modifier {
+	display: block;
+}

packages/stylelint-config/fixtures/pass/style.scss

@@ -0,0 +1,21 @@
+// Max nesting depth.
+.element {
+	display: block;
+
+	// Nesting depth: 1
+	.child-element {
+		display: block;
+
+		// Nesting depth: 2. Maximum allowed.
+		.child-element {
+			display: block;
+		}
+
+		// Allowed to be nested deeper because it's within a media query.
+		@media screen {
+			.child-element {
+				display: block;
+			}
+		}
+	}
+}

packages/stylelint-config/fixtures/test-lint-config.js

@@ -0,0 +1,42 @@
+const stylelint = require(  'stylelint' );
+const chalk = require(  'chalk' );
+const path = require(  'path' );
+
+stylelint.lint( {
+	files: 'fixtures/pass/**/*.{css,scss}'
+} ).then( (resultObject) => {
+	if ( resultObject.errored ) {
+		console.log( chalk.bold.red( 'Stylelint detected the following errors in the test files that are expected to pass.' ) );
+		resultObject.results.forEach( result => {
+			if ( ! result.errored ) {
+				return;
+			}
+
+			console.log( '• ' + path.relative( process.cwd(), result.source ) );
+			result.warnings.forEach( result => {
+				console.log( `  • ${ result.text }. Line: ${ result.line }.` );
+			} );
+		} );
+		process.exitCode = 1;
+	} else {
+		console.log( chalk.green( 'No errors detected in files that are expected to pass.' ) );
+	}
+});
+
+stylelint.lint( {
+	files: 'fixtures/fail/**/*.{css,scss}'
+} ).then( (resultObject) => {
+	if ( ! resultObject.errored ) {
+			console.log( chalk.bold.red( 'The following files did not produce errors:' ) );
+			resultObject.results.forEach( result => {
+				if ( result.errored ) {
+					return;
+				}
+
+				console.log( '  ' + result.source );
+			} );
+		process.exitCode = 1;
+	} else {
+		console.log( chalk.green( 'All files that should fail log errors as expected.' ) );
+	}
+});