build: add stylelint

Use stylelint to lint CSS and enforce plugin best practices:

1. Disallow color names and hex colors to better support dark mode
2. Disallow .pf- and .co- classname prefixes to avoid clashes with
   default console styles
3. Disallow naked element selectors like `table` and `li`

.stylelintrc.yaml

@@ -0,0 +1,23 @@
+extends:
+  - stylelint-config-standard
+  - stylelint-config-prettier
+rules:
+  # Disallow color names and hex colors as these don't work well with dark mode.
+  # Use PF global variables instead:
+  # https://patternfly-react-main.surge.sh/developer-resources/global-css-variables#global-css-variables
+  color-named: never
+  color-no-hex: true
+  function-disallowed-list:
+    - rgb
+  # Disallow CSS classnames prefixed with .pf- or .co- as these prefixes are
+  # reserved by PatternFly and OpenShift console.
+  selector-disallowed-list:
+    - "*"
+    - /\.(pf|co)-/
+  # Plugins should avoid naked element selectors like `table` and `li` since
+  # this can impact layout of existing pages in console.
+  selector-max-type:
+    - 0
+    - ignore:
+        - compounded
+        - descendant

README.md

@@ -147,6 +147,23 @@ oc patch consoles.operator.openshift.io cluster \
   --patch '{ "spec": { "plugins": ["my-plugin"] } }' --type=merge
 ```
 
+## Linting
+
+This project adds prettier, eslint, and stylelint. Linting can be run with
+`yarn run lint`.
+
+The stylelint config disallows hex colors since these cause problems with dark
+mode (starting in OpenShift console 4.11). You should use the
+[PatternFly global CSS variables](https://patternfly-react-main.surge.sh/developer-resources/global-css-variables#global-css-variables)
+for colors instead.
+
+The stylelint config also disallows naked element selectors like `table` and
+`.pf-` or `.co-` prefixed classes. This prevents plugins from accidentally
+overwriting default console styles, breaking the layout of existing pages. The
+best practice is to prefix your CSS classnames with your plugin name to avoid
+conflicts. Please don't disable these rules without understanding how they can
+break console styles!
+
 ## References
 
 - [Console Plugin SDK README](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk)

package.json

@@ -11,7 +11,7 @@
     "start-console": "./start-console.sh",
     "i18n": "i18next \"src/**/*.{js,jsx,ts,tsx}\" [-oc] -c i18next-parser.config.js",
     "ts-node": "ts-node -O '{\"module\":\"commonjs\"}'",
-    "lint": "eslint ./src --fix"
+    "lint": "eslint ./src --fix && stylelint \"src/**/*.css\" --allow-empty-input --fix"
   },
   "devDependencies": {
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
@@ -29,6 +29,7 @@
     "eslint-plugin-prettier": "^4.1.0",
     "eslint-plugin-react": "^7.30.1",
     "prettier": "^2.7.1",
+    "prettier-stylelint": "^0.4.2",
     "react": "17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
@@ -36,6 +37,9 @@
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "style-loader": "^3.3.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^26.0.0",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.8.1",
     "typescript": "^4.7.4",