Add stylelint config file with specific rule adjustments (#316)

* build: configure stylelint for CSS and SCSS

* config: add stylelint config file with specific rule adjustments

* install: packages

* fix: spaces

* add: autofix to css/scss files

* fix: fix current stylelint issues

---------

Co-authored-by: fruneen <fruneen@gmail.com>

template/apps/web/.stylelintrc.json

@@ -0,0 +1,26 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "scss/no-duplicate-mixins": null,
+    "declaration-empty-line-before": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "alpha-value-notation": null,
+    "custom-property-empty-line-before": null,
+    "property-no-vendor-prefix": null,
+    "color-function-notation": null,
+    "length-zero-no-unit": null,
+    "selector-not-notation": null,
+    "no-descending-specificity": null,
+    "comment-empty-line-before": null,
+    "scss/at-mixin-pattern": null,
+    "scss/at-rule-no-unknown": null,
+    "value-keyword-case": null,
+    "media-feature-range-notation": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}

template/apps/web/package.json

@@ -63,12 +63,18 @@
     "prettier-config-custom": "workspace:*",
     "storybook": "8.2.0",
     "storybook-dark-mode": "4.0.2",
+    "stylelint": "16.7.0",
+    "stylelint-config-standard-scss": "13.1.0",
     "tsconfig": "workspace:*",
     "typescript": "5.2.2"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
       "eslint --fix"
+    ],
+    "*.{css,scss}": [
+      "stylelint --fix",
+      "prettier --write"
     ]
   }
 }

template/apps/web/src/components/Table/Thead/index.module.css

@@ -1,4 +1,4 @@
-.headerButton {
+.header-button {
   width: 100%;
   display: flex;
   line-height: 16px;

template/apps/web/src/pages/profile/components/PhotoUpload/index.module.css

@@ -1,23 +1,23 @@
-.dropzoneRoot {
+.dropzone-root {
   border: none;
   border-radius: 0;
   padding: 0;
   background-color: transparent;
 
-  &:hover .addIcon {
+  &:hover .add-icon {
     color: var(--mantine-color-gray-5);
   }
 
-  &:hover .browseButton {
+  &:hover .browse-button {
     border: 1px dashed var(--mantine-color-gray-5);
   }
 
-  &:hover .innerAvatar {
+  &:hover .inner-avatar {
     opacity: 1;
   }
 }
 
-.browseButton {
+.browse-button {
   width: 88px;
   height: 88px;
   border-radius: 50%;
@@ -33,12 +33,12 @@
   border: 1px dashed var(--mantine-color-red-5);
 }
 
-.addIcon {
+.add-icon {
   color: var(--mantine-primary-color-filled);
   transition: all 200ms ease-in-out;
 }
 
-.innerAvatar {
+.inner-avatar {
   border-radius: 50%;
 
   opacity: 0;
@@ -52,12 +52,12 @@
   word-wrap: break-word;
 }
 
-.buttonContainer {
+.button-container {
   display: flex;
   align-items: center;
 }
 
-.errorMessage {
+.error-message {
   margin-top: 4px;
   font-size: 14px;
   line-height: 17px;