refactor(stylelint): Enfore camelCase for CSS Selectors. (#5814)

* refactor(stylelint): update guidelines

* refactor(stylelint): update lintsragedrc

* Update .stylelintrc.mjs

Signed-off-by: Claudio W <[e-mail]>

* refactor(stylelint): only ignore old styles

* refactor(stylelint): add EOL

* meta: fix file formatting

---------

Signed-off-by: Claudio W <[e-mail]>
Co-authored-by: Claudio W <[e-mail]>
Co-authored-by: Claudio Wunder <[e-mail]>

.lintstagedrc.json

···
 {
   "**/*.{mjs,ts,tsx,md,mdx}": ["eslint --fix", "prettier --check --write"],
-  "**/*.{css,sass,scss}": [
-    "stylelint --config .stylelintrc.json",
-    "prettier --write"
-  ],
+  "**/*.{css,sass,scss}": ["stylelint", "prettier --write"],
   "**/*.{json,yml}": ["prettier --check --write"]
 }

.stylelintignore

···
 
 # Storybook
 storybook-static
+
+# Old Styles
+styles/old

.stylelintrc.json

···
-{
-  "extends": ["stylelint-config-recommended-scss"],
-  "plugins": ["stylelint-order", "stylelint-selector-bem-pattern"],
-  "rules": {
-    "order/properties-alphabetical-order": true,
-    "no-descending-specificity": null,
-    "scss/at-extend-no-missing-placeholder": null,
-    "scss/at-import-no-partial-leading-underscore": null,
-    "selector-pseudo-class-no-unknown": [
-      true,
-      { "ignorePseudoClasses": ["global"] }
-    ],
-    "scss/at-rule-no-unknown": [
-      true,
-      {
-        "ignoreAtRules": ["tailwind", "apply"]
-      }
-    ]
-  }
-}

.stylelintrc.mjs

···
+// Enforces certain selectors to be only in camelCase notation
+// such as class names, for example
+const onlyAllowCamelCaseRule = [
+  /^(?:[a-z]+(?:[A-Z][a-z]*)*)$/,
+  { message: s => `Expected '${s}' to be in camelCase` },
+];
+
+export default {
+  extends: ['stylelint-config-recommended-scss'],
+  plugins: ['stylelint-order', 'stylelint-selector-bem-pattern'],
+  rules: {
+    'order/properties-alphabetical-order': true,
+    'no-descending-specificity': null,
+    'scss/at-extend-no-missing-placeholder': null,
+    'scss/at-import-no-partial-leading-underscore': null,
+    'selector-class-pattern': onlyAllowCamelCaseRule,
+    'selector-id-pattern': onlyAllowCamelCaseRule,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      { ignorePseudoClasses: ['global'] },
+    ],
+    'scss/at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind', 'apply'] }],
+  },
+};

components/Common/Badge/index.module.scss

···
     font-medium;
 
   .icon {
-    @apply w-4 h-4;
+    @apply w-4
+      h-4;
   }
 
   .badge {
···
 
     .icon {
       @apply text-danger-500
-       dark:text-danger-300;
+        dark:text-danger-300;
     }
 
     .badge {
       @apply border-danger-200
-       dark:border-danger-600
-       bg-danger-600;
+        dark:border-danger-600
+        bg-danger-600;
     }
 
     .message {
       @apply text-danger-700
-       dark:text-danger-300;
+        dark:text-danger-300;
     }
   }
 

components/Common/Banner/index.module.scss

···
   }
 
   svg {
-    @apply h-4 w-4;
+    @apply h-4 
+      w-4;
   }
 }
 

package.json

···
     "build": "cross-env NODE_NO_WARNINGS=1 next build",
     "start": "cross-env NODE_NO_WARNINGS=1 next start",
     "deploy": "cross-env NEXT_STATIC_EXPORT=true npm run build",
-    "lint:js": "eslint \"**/*.{mjs,ts,tsx}\" --cache --cache-strategy content --cache-file .eslintjscache --report-unused-disable-directives",
+    "lint:js": "eslint \"**/*.{mjs,ts,tsx}\" --cache --cache-strategy content --cache-file .eslintjscache",
     "lint:md": "eslint \"**/*.md?(x)\" --cache --cache-strategy content --cache-file .eslintmdcache",
     "lint:scss": "stylelint \"**/*.{css,sass,scss}\"",
     "lint": "npm run lint:js && npm run lint:md && npm run lint:scss",

turbo.json

···
     "lint:scss": {
       "inputs": [
         "{app,components,layouts,pages,styles}/**/*.{css,sass,scss}",
-        ".stylelintrc.json",
+        ".stylelintrc.mjs",
         ".stylelintignore"
       ]
     },
···
         "*.{md,mdx,ts,tsx,mjs,yml}",
         ".eslintrc.json",
         ".eslintignore",
-        ".stylelintrc.json",
+        ".stylelintrc.mjs",
         ".stylelintignore",
         ".prettierrc.json",
         ".prettierignore",
···
         "*.{md,mdx,ts,tsx,mjs}",
         ".eslintrc.json",
         ".eslintignore",
-        ".stylelintrc.json",
+        ".stylelintrc.mjs",
         ".stylelintignore",
         ".prettierrc.json",
         ".prettierignore",
···
         "*.{md,mdx,json,ts,tsx,mjs,yml}",
         ".eslintrc.json",
         ".eslintignore",
-        ".stylelintrc.json",
+        ".stylelintrc.mjs",
         ".stylelintignore",
         ".prettierrc.json",
         ".prettierignore",
···
         "*.{md,mdx,json,ts,tsx,mjs,yml}",
         ".eslintrc.json",
         ".eslintignore",
-        ".stylelintrc.json",
+        ".stylelintrc.mjs",
         ".stylelintignore",
         ".prettierrc.json",
         ".prettierignore",
···
         "*.{md,mdx,json,ts,tsx,mjs,yml}",
         ".eslintrc.json",
         ".eslintignore",
-        ".stylelintrc.json",
+        ".stylelintrc.mjs",
         ".stylelintignore",
         ".prettierrc.json",
         ".prettierignore",