chore(infrastructure): Add stylelint config for screenshot tests (#2144)

This PR:
- Adds `test/**/*.scss` to `npm run fix:css` and `npm run lint:css`
- Requires all Sass symbols (variables/functions/mixins) to begin with `test-` or `custom-` rather than `mdc-`
- Moves `ignoreFiles` from `.stylelintrc.yaml` to `.stylelintignore`

    According to the [stylelint configuration docs](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/configuration.md#ignorefiles):
    > _Note that `ignoreFiles` is not an efficient method for ignoring lots of files._ If you want to ignore a lot of files efficiently, use `.stylelintignore` or adjust your files globs.
- Ignores all directories named `node_modules` or `out`, regardless of where they are
- Extends the root `.stylelintrc.yaml` file

Author: acdvorak

.stylelintignore

@@ -0,0 +1,3 @@
+**/node_modules
+**/out
+build/

.stylelintrc.yaml

@@ -1,8 +1,4 @@
 extends: stylelint-config-standard
-ignoreFiles:
-  - node_modules/**/*
-  - packages/**/node_modules/**/*
-  - build/**/*
 plugins:
   - stylelint-selector-bem-pattern
   - stylelint-scss

package.json

@@ -13,9 +13,9 @@
     "dist": "npm run build && npm run build:min",
     "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --config=demos/webpack.config.js --progress --inline --hot --host 0.0.0.0",
     "fix:js": "eslint --fix packages test webpack.config.js demos/webpack.config.js karma.conf.js",
-    "fix:css": "stylelint --fix \"packages/**/*.scss\"",
+    "fix:css": "stylelint --fix \"packages/**/*.scss\"; stylelint --fix --config=test/screenshot/.stylelintrc.yaml \"test/screenshot/**/*.scss\"",
     "fix": "npm-run-all --parallel fix:*",
-    "lint:css": "stylelint \"packages/**/*.scss\"",
+    "lint:css": "stylelint \"packages/**/*.scss\"; stylelint --config=test/screenshot/.stylelintrc.yaml \"test/screenshot/**/*.scss\"",
     "lint:js": "eslint packages test scripts webpack.config.js demos/webpack.config.js karma.conf.js",
     "lint:html": "find test/screenshot/spec/ -name '*.html' | grep -v 'index.html$' | xargs htmllint",
     "lint:imports": "node scripts/check-imports.js",

test/screenshot/.stylelintrc.yaml

@@ -0,0 +1,16 @@
+extends: ../../.stylelintrc.yaml
+rules:
+  # CSS
+  custom-media-pattern: "^(?:test|custom|report)-.+"
+  custom-property-pattern: "^(?:test|custom|report)-.+"
+  selector-class-pattern:
+    - "^(?:test|custom|report)-.+"
+    - resolveNestedSelectors: true
+  selector-id-pattern: "^(?:test|custom|report)-.+"
+
+  # Sass
+  scss/dollar-variable-pattern:
+    - "^(?:test|custom|report)-.+"
+    - ignore: local
+  scss/at-function-pattern: "^(?:test|custom|report)-.+"
+  scss/at-mixin-pattern: "^(?:test|custom|report)-.+"

test/screenshot/report/report.scss

@@ -20,6 +20,8 @@
  * THE SOFTWARE.
  */
 
+// stylelint-disable selector-max-type, selector-max-universal, no-descending-specificity, declaration-property-unit-whitelist
+
 /*
  * Global
  */
@@ -29,7 +31,7 @@
 html {
   box-sizing: border-box;
 }
-*, *:before, *:after {
+*, *:before, *:after { // stylelint-disable-line
   box-sizing: inherit;
 }
 
@@ -75,7 +77,7 @@ th {
 .report-metadata__heading-content,
 .report-collection__heading-content,
 .report-html-file__heading-content,
-.report-user-agent__heading-content{
+.report-user-agent__heading-content {
   display: inline-block;
   width: calc(100% - 7em);
   vertical-align: top;
@@ -103,8 +105,8 @@ th {
 }
 
 .report-metadata__table {
-  border-collapse: collapse;
   border: 1px solid #eee;
+  border-collapse: collapse;
 }
 
 .report-metadata__row--top-divider {
@@ -294,13 +296,15 @@ th {
 .report-toolbar__button--approve {
   color: green;
 }
+
 .report-toolbar__button--approve:disabled {
   color: rgba(green, .5);
 }
 
 .report-toolbar__button--retry {
   color: red;
 }
+
 .report-toolbar__button--retry:disabled {
   color: rgba(red, .5);
 }

test/screenshot/spec/fixture.scss

@@ -24,13 +24,13 @@
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 
 $test-viewport-trim-color: #abc123; // Value must match `TRIM_COLOR_CSS_VALUE` in `image-cropper.js`
-$test-layout-cell-grid-color: #dddddd;
+$test-layout-cell-grid-color: #ddd;
 
 @mixin test-fixture-grid-bg {
   // Ruler grid pattern
   // https://stackoverflow.com/a/32861765/467582
   background-image:
-    linear-gradient(to right, #{$test-layout-cell-grid-color} 1px, transparent 1.01px),  // fraction for IE 11
+    linear-gradient(to right, #{$test-layout-cell-grid-color} 1px, transparent 1.01px),
     linear-gradient(to bottom, #{$test-layout-cell-grid-color} 1px, transparent 1.01px); // fraction for IE 11
 
   background-size: 10px 10px;
@@ -105,6 +105,7 @@ $test-layout-cell-grid-color: #dddddd;
   height: 20px;
 }
 
+// stylelint-disable selector-max-universal
 .test-animation--paused,
 .test-animation--paused::before,
 .test-animation--paused::after,
@@ -114,3 +115,4 @@ $test-layout-cell-grid-color: #dddddd;
   animation-play-state: paused !important;
   transition: none !important;
 }
+// stylelint-enable selector-max-universal

test/screenshot/spec/mdc-drawer/fixture.scss

@@ -33,9 +33,9 @@ $custom-drawer-color: $material-color-orange-900;
 .test-viewport--drawer {
   @include mdc-typography-base;
 
-  height: 100vh;
   display: flex;
   flex-direction: row;
+  height: 100vh;
   overflow: hidden;
 }
 
@@ -54,12 +54,12 @@ $custom-drawer-color: $material-color-orange-900;
 
 .test-drawer-main-content {
   display: block; // Needed for IE 11
+  box-sizing: border-box;
   height: 100%;
   padding-right: 16px;
   padding-left: 16px;
-  overflow: auto;
-  box-sizing: border-box;
   background: #fff;
+  overflow: auto;
 }
 
 .custom-drawer--fill-color {

test/screenshot/spec/mdc-radio/fixture.scss

@@ -43,6 +43,7 @@ $custom-radio-color: $material-color-red-300;
   cursor: pointer;
 }
 
+// stylelint-disable-next-line selector-class-pattern
 .mdc-radio--disabled + .test-radio-label {
   background: rgba(0, 0, 0, .1);
   cursor: not-allowed;

test/screenshot/spec/mdc-switch/fixture.scss

@@ -44,6 +44,7 @@ $custom-switch-color: $material-color-red-500;
   cursor: pointer;
 }
 
+// stylelint-disable-next-line selector-class-pattern
 .mdc-switch--disabled + .test-switch-label {
   background: rgba(0, 0, 0, .1);
   cursor: not-allowed;