feat(sage-monorepo): add Stylelint (ARCH-294) (#2861)

.devcontainer/devcontainer.json

@@ -55,6 +55,7 @@
         "shengchen.vscode-checkstyle",
         "SonarSource.sonarlint-vscode",
         "stkb.rewrap",
+        "stylelint.vscode-stylelint",
         "vmware.vscode-boot-dev-pack",
         "vscjava.vscode-gradle",
         "vscjava.vscode-java-pack"

.stylelintignore

@@ -0,0 +1,13 @@
+# Ignore all node modules
+node_modules/
+
+# Ignore all build directories
+build/
+dist/
+
+# Ignore all test reports
+coverage/
+reports/
+
+# Ignore selected project folders
+apps/schematic/api/great_expectations

.vscode/settings.json

@@ -5,6 +5,11 @@
   "java.format.enabled": false,
   "java.compile.nullAnalysis.mode": "disabled",
   "java.configuration.updateBuildConfiguration": "disabled",
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.enable": true,
+  "stylelint.validate": ["css", "scss"],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.tabSize": 2,

lint-staged.config.js

@@ -8,6 +8,13 @@ module.exports = {
     `nx affected --target=lint --files=${filenames.join(',')}`,
   ],
 
+  '**/*.{css,scss}': (filenames) => [
+    // Format files with Prettier
+    `prettier --write ${filenames.join(' ')}`,
+    // Lint files with Stylelint
+    `stylelint --allow-empty-input ${filenames.join(' ')}`,
+  ],
+
   '**/*.{json,md,yaml,yml,html}': (filenames) => [
     // Format files with Prettier
     `prettier --write ${filenames.join(' ')}`,

package.json

@@ -170,6 +170,11 @@
     "serverless": "3.22.0",
     "serverless-plugin-typescript": "2.1.4",
     "smee-client": "1.2.3",
+    "stylelint": "16.9.0",
+    "stylelint-config-prettier-scss": "1.0.0",
+    "stylelint-config-standard": "36.0.1",
+    "stylelint-config-standard-scss": "13.1.0",
+    "stylelint-scss": "6.7.0",
     "supertest": "^6.3.0",
     "tailwindcss": "3.4.3",
     "ts-jest": "29.1.1",