[Lint] add custom stylelint rules and config

Adding `@osd/stylelint-config` and `@osd/stylelint-plugin-stylelint` packages.

These packages are utilized by OSD core and can be ran with the following:
`yarn lint:style`

Can be used to fix known non-compliant styling with the following:
`yarn lint:style --fix`

Can be used to audit untracked styling (based on defined rules) with the following:
```
export OUI_AUDIT_ENABLED=true
yarn lint:style
```

---

`@osd/stylelint-config`

Defines rules approved by UX and OSD core in JSON files and is added to OSD core.
Within this commit is defined `colors.json` and `global_selectors.json`.

`colors.json` defines a property that can be matched with a regex of a selector.
If the selector is tracked it will have an `approved` value and a list of `rejected`
values that UX knows if a value should be something.

`global_selectors.json` defines a selector that if tracked, it will have an `approved`
list of relative paths to files that can modify the global selector.

---

`@osd/stylelint-plugin-stylelint`

Creates the functionality that utilizes the JSON files within the `@osd/stylelint-config`.
Within this commit is defined `no_custom_colors` and `no_modifying_global_selectors` rules.

`no_custom_colors` checks if a property is a color property. It then utilizes a compliance
engine helper to check the `colors.json` to see if the property being modified has a compliance
rule available for the property for the specific selector and if it is not compliant.
For example, if a selector matches `button` and we are trying to apply `background-color: red`
to it. Stylelint will catch this and flag this as a known non-compliance issue since it knows
that it should `$euiColorWarning`. If we pass `--fix` the property will be updated to be
`$euiColorWarning`. If `OUI_AUDIT_ENABLED` is true it will catch all `background-color` being
modified that is not being defined explicitly in `colors.json`

`no_modifying_global_selectors` checks if a selector being modified is defined in
`global_selectors.json` to see if a selector not defined in a specific list of approved files.
For example, if a selector matches `#opensearch-dashboards-body` and it is being modified in
`src/core/public/rendering/_base.scss`. Stylelint will catch this and flag this as a
non-compliance issue. Since no other file should be modifying this selector. If we pass `--fix`
the styling will be complete removed from the non-compliant file.

---

Next steps:

* Migrate these packages to OUI
* Consider adding `yarn lint:style --fix` to the build release script here:
https://github.com/opensearch-project/opensearch-build/blob/main/scripts/default/opensearch-dashboards/build.sh#L89

Issue:
opensearch-project#4246

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

Author: kavilla

.eslintignore

@@ -3,6 +3,7 @@
 /.chromium
 /build
 /built_assets
+/bwc_tmp
 /config/apm.dev.js
 /data
 /html_docs

.stylelintrc.yml

@@ -1,5 +1,6 @@
 extends:
   - stylelint-config-standard-scss
+  - '@osd/stylelint-config'
 rules:
   # while we still use node-sass, only legacy rgb() notation is allowed
   color-function-notation: "legacy"

package.json

@@ -248,6 +248,8 @@
     "@osd/optimizer": "1.0.0",
     "@osd/plugin-generator": "1.0.0",
     "@osd/pm": "1.0.0",
+    "@osd/stylelint-config": "1.0.0",
+    "@osd/stylelint-plugin-stylelint": "1.0.0",
     "@osd/telemetry-tools": "1.0.0",
     "@osd/test": "1.0.0",
     "@osd/test-subj-selector": "0.2.1",

packages/osd-stylelint-config/.stylelintrc.js

@@ -0,0 +1,32 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+module.exports = {
+  plugins: [
+    '@osd/stylelint-plugin-stylelint',
+  ],
+
+  rules: {
+    '@osd/stylelint/no_modifying_global_selectors': [
+      {
+        config: "./../../../osd-stylelint-config/config/global_selectors.json"
+      },
+      {
+        severity: "error"
+      }
+    ],
+    '@osd/stylelint/no_custom_colors': [
+      {
+        config: './../../../osd-stylelint-config/config/colors.json'
+      },
+    ]
+  }
+}

packages/osd-stylelint-config/README.md

@@ -0,0 +1,16 @@
+# osd-stylelint-config
+
+The Stylelint config used by OpenSearch Dashboards
+
+## Usage
+
+To use this stylelint config, just install the peer dependencies and reference it
+in your `.stylelintrc`:
+
+```javascript
+{
+  extends: [
+    '@osd/stylelint-config'
+  ]
+}
+```

packages/osd-stylelint-config/config/colors.json

@@ -0,0 +1,18 @@
+{
+  "background-color": {
+    "button": [
+      {
+        "approved": "$euiColorPrimary",
+        "rejected": [
+          "blue"
+        ]
+      },
+      {
+        "approved": "$euiColorWarning",
+        "rejected": [
+          "red"
+        ]
+      }
+    ]
+  }
+}

packages/osd-stylelint-config/config/global_selectors.json

@@ -0,0 +1,12 @@
+{
+  "#opensearch-dashboards-body": {
+    "approved": [
+      "src/core/public/rendering/_base.scss"
+    ]
+  },
+  ".app-wrapper": {
+    "approved": [
+      "src/core/public/rendering/_base.scss"
+    ]
+  }
+}

packages/osd-stylelint-config/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@osd/stylelint-config",
+  "version": "1.0.0",
+  "description": "The stylelint config used by OpenSearch Dashboards",
+  "main": ".stylelintrc.js",
+  "private": true,
+  "license": "Apache-2.0",
+  "opensearchDashboards": {
+    "devOnly": true
+  },
+  "peerDependencies": {
+    "@osd/stylelint-plugin-stylelint": "1.0.0",
+    "stylelint": "^14.5.2"
+  }
+}

packages/osd-stylelint-plugin-stylelint/README.md

@@ -0,0 +1,3 @@
+# Custom Stylelint rules for OpenSearch Dashboards
+
+This package contains custom Stylelint rules used for OpenSearch Dashboards development.

packages/osd-stylelint-plugin-stylelint/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@osd/stylelint-plugin-stylelint",
+  "main": "./target/index.js",
+  "types": "./target/index.d.ts",
+  "version": "1.0.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc",
+    "osd:bootstrap": "yarn build"
+  },
+  "opensearchDashboards": {
+    "devOnly": true
+  },
+  "peerDependencies": {
+    "stylelint": "^14.5.2"
+  },
+  "devDependencies": {
+    "typescript": "4.0.2",
+    "tsd": "^0.21.0"
+  }
+}

packages/osd-stylelint-plugin-stylelint/src/index.ts

@@ -0,0 +1,22 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import stylelint from 'stylelint';
+import rules from './rules';
+
+export const NAMESPACE = '@osd/stylelint';
+
+const rulesPlugins = Object.keys(rules).map((ruleName: string) => {
+  return stylelint.createPlugin(`${NAMESPACE}/${ruleName}`, rules[ruleName]);
+});
+
+// eslint-disable-next-line import/no-default-export
+export default rulesPlugins;

packages/osd-stylelint-plugin-stylelint/src/rules/index.ts

@@ -0,0 +1,19 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import noCustomColors from './no_custom_colors';
+import noModifyingGlobalSelectors from './no_modifying_global_selectors';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  no_custom_colors: noCustomColors,
+  no_modifying_global_selectors: noModifyingGlobalSelectors,
+};

packages/osd-stylelint-plugin-stylelint/src/rules/no_custom_colors/index.ts

@@ -0,0 +1,106 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import stylelint from 'stylelint';
+import { NAMESPACE } from '../..';
+import {
+  ComplianceEngine,
+  getTrackedMessage,
+  getUntrackedMessage,
+  getNotCompliantMessage,
+  getRulesFromConfig,
+  isColorProperty,
+  isValidOptions,
+} from '../../utils';
+
+const isOuiAuditEnabled = Boolean(process.env.OUI_AUDIT_ENABLED);
+
+const { ruleMessages, report } = stylelint.utils;
+const engine = ComplianceEngine.default;
+
+const ruleName = 'no_custom_colors';
+const messages = ruleMessages(ruleName, {
+  expected: (message) => `${message}`,
+});
+
+const ruleFunction = (
+  primaryOption: Record<string, any>,
+  secondaryOptionObject: Record<string, any>,
+  context
+) => {
+  return (postcssRoot: any, postcssResult: any) => {
+    const validOptions = isValidOptions(postcssResult, ruleName, primaryOption);
+    if (!validOptions) {
+      return;
+    }
+
+    const rules = getRulesFromConfig(primaryOption.config);
+
+    const isAutoFixing = Boolean(context.fix);
+
+    postcssRoot.walkDecls((decl: any) => {
+      if (!isColorProperty(decl.prop)) {
+        return;
+      }
+
+      let shouldReport = false;
+
+      const nodeInfo = {
+        selector: decl.parent.selector,
+        prop: decl.prop,
+        value: decl.value,
+      };
+
+      const reportInfo = {
+        ruleName: `${NAMESPACE}/${ruleName}`,
+        result: postcssResult,
+        node: decl,
+        message: '',
+      };
+
+      if (isOuiAuditEnabled && !engine.isTracked(rules, nodeInfo)) {
+        reportInfo.message = messages.expected(getUntrackedMessage(nodeInfo));
+        report(reportInfo);
+        return;
+      }
+
+      const ruleObject = engine.getComplianceRule(rules, nodeInfo);
+
+      if (!ruleObject) {
+        if (isOuiAuditEnabled) {
+          reportInfo.message = messages.expected(getTrackedMessage(nodeInfo));
+          report(reportInfo);
+        }
+        return;
+      }
+
+      shouldReport = !ruleObject.isComplaint;
+
+      if (shouldReport && isAutoFixing) {
+        decl.value = ruleObject.expected;
+        return;
+      }
+
+      if (!shouldReport) {
+        return;
+      }
+
+      reportInfo.message = messages.expected(getNotCompliantMessage(ruleObject.message));
+      report(reportInfo);
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+
+// eslint-disable-next-line import/no-default-export
+export default ruleFunction;

packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts

@@ -0,0 +1,83 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import stylelint from 'stylelint';
+import { NAMESPACE } from '../..';
+import { getNotCompliantMessage, getRulesFromConfig, isValidOptions } from '../../utils';
+
+const { ruleMessages, report } = stylelint.utils;
+
+const ruleName = 'no_modifying_global_selectors';
+const messages = ruleMessages(ruleName, {
+  expected: (message) => `${message}`,
+});
+
+const ruleFunction = (
+  primaryOption: Record<string, any>,
+  secondaryOptionObject: Record<string, any>,
+  context
+) => {
+  return (postcssRoot: any, postcssResult: any) => {
+    const validOptions = isValidOptions(postcssResult, ruleName, primaryOption);
+    if (!validOptions) {
+      return;
+    }
+
+    const rules = getRulesFromConfig(primaryOption.config);
+
+    const isAutoFixing = Boolean(context.fix);
+
+    postcssRoot.walkRules((rule: any) => {
+      const selectorRule = rules[rule.selector];
+      if (!selectorRule) {
+        return;
+      }
+
+      let shouldReport = false;
+
+      const file = postcssRoot.source.input.file;
+      const approvedFiles = selectorRule.approved;
+
+      const reportInfo = {
+        ruleName: `${NAMESPACE}/${ruleName}`,
+        result: postcssResult,
+        node: rule,
+        message: '',
+      };
+
+      if (approvedFiles) {
+        shouldReport = !approvedFiles.some((inspectedFile) => {
+          return file.includes(inspectedFile);
+        });
+      }
+
+      if (shouldReport && isAutoFixing) {
+        rule.remove();
+        return;
+      }
+
+      if (!shouldReport) {
+        return;
+      }
+
+      reportInfo.message = messages.expected(
+        getNotCompliantMessage(`Modifying global selector "${rule.selector}" not allowed.`)
+      );
+      report(reportInfo);
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+
+// eslint-disable-next-line import/no-default-export
+export default ruleFunction;