Merge pull request #286 from humanmade/update-stylelint

Add stylelint tests

.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.' ) );
+ }
+});