Fix stylelint (#8169)

* Stylelint: Ignore only top-level directories

The `.stylelintignore` entries lacked leading slashes, so most of the
UI code was ignored (because it fell under the `ui/app` directory, and
`app/` was ignored.

The leading slashes ensure only the intended top-level directories are
ignored.

* Simplify stylelint rules

We use the `stylelint-config-standard` rule-set, so most commonly-used
stylelint rules are inherited from that.

Some of the removed rules were redundant, some of them were more strict
than the rules in `standard` and we hadn't been following them in
practice, and some were obsolete.

* Convert stylelint config to JavaScript

JavaScript is a bit easier than JSON to work with, as it allows
comments.

This was also done to make it easier to merge in the `stylelint-config-
standard`, which is also in JavaScript.

* Inline `stylelint-config-standard`

I intend to go through each of these rules one-by-one, which is easier
with all of these rules inlined. Selectively overriding/disabling them
would have been messy.

* Comment out rules that aren't current working

These rules have been temporarily disabled. They will be re-renabled
one-by-one as they are fixed. This was done to make it easier to split
these changes among separate PRs, as many of the rules require
extensive functional changes.

* Add `stylelint` to `lint` script

`stylelint` is now run as part of the `lint` script. There is also a
separate `lint:styles` script for running just `stylelint`.

.stylelintignore

@@ -1,9 +1,9 @@
-app/
+/app
-development/
+/development
-dist/
+/dist
-docs/
+/docs
-fonts/
+/fonts
-images/
+/images
-node_modules/
+/node_modules
-notices/
+/notices
-test/
+/test

.stylelintrc

@@ -1,50 +0,0 @@
-{
-  "extends": "stylelint-config-standard",
-  "rules": {
-    "color-named": "never",
-    "font-family-name-quotes": "always-where-recommended",
-    "font-weight-notation": "numeric",
-    "function-url-quotes": "always",
-    "number-leading-zero": "never",
-    "value-no-vendor-prefix": true,
-    "value-list-comma-newline-before": "never-multi-line",
-    "custom-property-empty-line-before": "never",
-    "property-no-unknown": [
-      true,
-      {
-        "ignoreProperties": [
-          "composes",
-          "all",
-          "-webkit-appearance"
-        ]
-      }
-    ],
-    "declaration-block-semicolon-newline-after": "always",
-    "block-opening-brace-newline-after": "always",
-    "selector-attribute-quotes": "always",
-    "selector-max-specificity": "0,5,2",
-    "selector-pseudo-class-no-unknown": [
-      true,
-      {
-        "ignorePseudoClasses": ["local", "global"]
-      }
-    ],
-    "at-rule-empty-line-before": [
-      "always",
-      {
-        "ignore": [
-          "after-comment"
-        ]
-      }
-    ],
-    "indentation": [
-      2,
-      {
-        "indentInsideParens": "once-at-root-twice-in-block"
-      }
-    ],
-    "max-nesting-depth": 3,
-    "no-duplicate-selectors": true,
-    "no-unknown-animations": true
-  }
-}

package.json

@@ -30,11 +30,12 @@
     "test:coveralls-upload": "if [ \"$COVERALLS_REPO_TOKEN\" ]; then nyc report --reporter=text-lcov | coveralls; fi",
     "ganache:start": "./development/run-ganache",
     "sentry:publish": "node ./development/sentry-publish.js",
-    "lint": "eslint . --ext js,json",
+    "lint": "eslint . --ext js,json && yarn lint:styles",
     "lint:fix": "eslint . --ext js,json --fix",
     "lint:changed": "{ git ls-files --others --exclude-standard ; git diff-index --name-only --diff-filter=d HEAD ; } | grep --regexp='[.]js$' --regexp='[.]json$' | tr '\\n' '\\0' | xargs -0 eslint",
     "lint:changed:fix": "{ git ls-files --others --exclude-standard ; git diff-index --name-only --diff-filter=d HEAD ; } | grep --regexp='[.]js$' --regexp='[.]json$' | tr '\\n' '\\0' | xargs -0 eslint --fix",
     "lint:shellcheck": "./development/shellcheck.sh",
+    "lint:styles": "stylelint '*/**/*.scss'",
     "lint:lockfile": "lockfile-lint --path yarn.lock --allowed-hosts npm yarn github.com codeload.github.com --empty-hostname false --allowed-schemes \"https:\" \"git+https:\"",
     "verify-locales": "node ./development/verify-locale-strings.js",
     "verify-locales:fix": "node ./development/verify-locale-strings.js --fix",
@@ -269,7 +270,6 @@
     "string.prototype.matchall": "^4.0.2",
     "style-loader": "^0.21.0",
     "stylelint": "^9.10.1",
-    "stylelint-config-standard": "^18.2.0",
     "through2": "^2.0.3",
     "ttest": "^2.1.1",
     "vinyl-buffer": "^1.0.1",

stylelint.config.js

@@ -0,0 +1,120 @@
+module.exports = {
+  rules: {
+    // stylelint-config-standard
+    // 'at-rule-empty-line-before': [
+    //   'always',
+    //   {
+    //     except: ['blockless-after-same-name-blockless', 'first-nested'],
+    //     ignore: ['after-comment'],
+    //   },
+    // ],
+    'at-rule-name-case': 'lower',
+    'at-rule-name-space-after': 'always-single-line',
+    'at-rule-semicolon-newline-after': 'always',
+    // 'block-closing-brace-empty-line-before': 'never',
+    // 'block-closing-brace-newline-after': 'always',
+    // 'block-closing-brace-newline-before': 'always-multi-line',
+    // 'block-closing-brace-space-before': 'always-single-line',
+    'block-opening-brace-newline-after': 'always-multi-line',
+    // 'block-opening-brace-space-after': 'always-single-line',
+    // 'block-opening-brace-space-before': 'always',
+    // 'color-hex-case': 'lower',
+    // 'color-hex-length': 'short',
+    // 'comment-empty-line-before': [
+    //   'always',
+    //   {
+    //     except: ['first-nested'],
+    //     ignore: ['stylelint-commands'],
+    //   },
+    // ],
+    // 'comment-whitespace-inside': 'always',
+    'custom-property-empty-line-before': [
+      'always',
+      {
+        except: ['after-custom-property', 'first-nested'],
+        ignore: ['after-comment', 'inside-single-line-block'],
+      },
+    ],
+    'declaration-bang-space-after': 'never',
+    // 'declaration-bang-space-before': 'always',
+    // 'declaration-block-semicolon-newline-after': 'always-multi-line',
+    // 'declaration-block-semicolon-space-after': 'always-single-line',
+    'declaration-block-semicolon-space-before': 'never',
+    // 'declaration-block-single-line-max-declarations': 1,
+    // 'declaration-block-trailing-semicolon': 'always',
+    'declaration-colon-newline-after': 'always-multi-line',
+    // 'declaration-colon-space-after': 'always-single-line',
+    'declaration-colon-space-before': 'never',
+    // 'declaration-empty-line-before': [
+    //   'always',
+    //   {
+    //     except: ['after-declaration', 'first-nested'],
+    //     ignore: ['after-comment', 'inside-single-line-block'],
+    //   },
+    // ],
+    'function-comma-newline-after': 'always-multi-line',
+    // 'function-comma-space-after': 'always-single-line',
+    // 'function-comma-space-before': 'never',
+    'function-max-empty-lines': 0,
+    'function-name-case': 'lower',
+    'function-parentheses-newline-inside': 'always-multi-line',
+    'function-parentheses-space-inside': 'never-single-line',
+    'function-whitespace-after': 'always',
+    // indentation: 2,
+    // 'length-zero-no-unit': true,
+    // 'max-empty-lines': 1,
+    // 'media-feature-colon-space-after': 'always',
+    'media-feature-colon-space-before': 'never',
+    'media-feature-name-case': 'lower',
+    'media-feature-parentheses-space-inside': 'never',
+    'media-feature-range-operator-space-after': 'always',
+    'media-feature-range-operator-space-before': 'always',
+    'media-query-list-comma-newline-after': 'always-multi-line',
+    'media-query-list-comma-space-after': 'always-single-line',
+    'media-query-list-comma-space-before': 'never',
+    // 'no-eol-whitespace': true,
+    // 'no-missing-end-of-source-newline': true,
+    // 'number-leading-zero': 'always',
+    // 'number-no-trailing-zeros': true,
+    'property-case': 'lower',
+    // 'rule-empty-line-before': [
+    //   'always-multi-line',
+    //   {
+    //     except: ['first-nested'],
+    //     ignore: ['after-comment'],
+    //   },
+    // ],
+    'selector-attribute-brackets-space-inside': 'never',
+    'selector-attribute-operator-space-after': 'never',
+    'selector-attribute-operator-space-before': 'never',
+    'selector-combinator-space-after': 'always',
+    'selector-combinator-space-before': 'always',
+    'selector-descendant-combinator-no-non-space': true,
+    // 'selector-list-comma-newline-after': 'always',
+    'selector-list-comma-space-before': 'never',
+    'selector-max-empty-lines': 0,
+    'selector-pseudo-class-case': 'lower',
+    'selector-pseudo-class-parentheses-space-inside': 'never',
+    'selector-pseudo-element-case': 'lower',
+    // 'selector-pseudo-element-colon-notation': 'double',
+    'selector-type-case': 'lower',
+    'unit-case': 'lower',
+    // 'value-keyword-case': 'lower',
+    'value-list-comma-newline-after': 'always-multi-line',
+    // 'value-list-comma-space-after': 'always-single-line',
+    'value-list-comma-space-before': 'never',
+    'value-list-max-empty-lines': 0,
+
+    // custom rules
+    // 'color-named': 'never',
+    // 'font-family-name-quotes': 'always-where-recommended',
+    // 'font-weight-notation': 'numeric',
+    // 'function-url-quotes': 'always',
+    'value-no-vendor-prefix': true,
+    'value-list-comma-newline-before': 'never-multi-line',
+    // 'selector-attribute-quotes': 'always',
+    // 'selector-max-specificity': '0,5,2',
+    // 'max-nesting-depth': 3,
+    'no-unknown-animations': true,
+  },
+}

yarn.lock

@@ -25130,18 +25130,6 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
-stylelint-config-recommended@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-2.1.0.tgz#f526d5c771c6811186d9eaedbed02195fee30858"
-  integrity sha512-ajMbivOD7JxdsnlS5945KYhvt7L/HwN6YeYF2BH6kE4UCLJR0YvXMf+2j7nQpJyYLZx9uZzU5G1ZOSBiWAc6yA==
-
-stylelint-config-standard@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-18.2.0.tgz#6283149aba7f64f18731aef8f0abfb35cf619e06"
-  integrity sha512-07x0TaSIzvXlbOioUU4ORkCIM07kyIuojkbSVCyFWNVgXMXYHfhnQSCkqu+oHWJf3YADAnPGWzdJ53NxkoJ7RA==
-  dependencies:
-    stylelint-config-recommended "^2.1.0"
-
 stylelint@^9.10.1:
   version "9.10.1"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.10.1.tgz#5f0ee3701461dff1d68284e1386efe8f0677a75d"