meta: updated stylelint configs

.editorconfig

@@ -7,3 +7,4 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+max_line_length = 80

.prettierrc.json

@@ -1,5 +1,4 @@
 {
-  "printWidth": 80,
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,

.stylelintrc.json

@@ -13,7 +13,7 @@
     "scss/at-rule-no-unknown": [
       true,
       {
-        "ignoreAtRules": ["tailwind"]
+        "ignoreAtRules": ["tailwind", "apply"]
       }
     ]
   }

COLLABORATOR_GUIDE.md

@@ -156,6 +156,20 @@ We also recommend reading [this guide for setting up Tailwind on your IDE](https
 
 Finally, if you're unfamiliar with how to use Tailwind or how to use Tailwind within CSS Modules, we recommend reading [this guide](https://tailwindcss.com/docs/using-with-preprocessors).
 
+#### Example of a CSS Module
+
+```scss
+.myComponent {
+  @apply some
+    tailwind
+    classes;
+}
+```
+
+- We use Camel Case for defining Class Names
+- We use Tailwind's `@apply` selector to apply Tailwind Styles
+  - Note that we should have one tailwind token per line as shown in the example above; This improves readability
+
 > [!NOTE]\
 > Tailwind is already configured for this repository. You don't need to import any Tailwind module within your CSS modules.
 > You can apply Tailwind classes by regularly using CSS variables or SCSS's `@apply` statement, for example. If you have questions, please raise them on Pull Requests or Issues.
@@ -191,9 +205,10 @@ Finally, if you're unfamiliar with how to use Tailwind or how to use Tailwind wi
 #### How a new Component should look like when freshly created
 
 ```tsx
-import styles from './index.module.scss';
 import type { FC } from 'react';
 
+import styles from './index.module.scss';
+
 type MyComponentProps = {}; // The types of the Props of your Component
 
 const MyComponent: FC<MyComponentProps> = ({ prop1, prop2... }) => (

components/Common/Badge/index.module.scss

@@ -1,63 +1,98 @@
 .wrapper {
-  @apply border rounded-full flex items-center w-fit py-1 pl-1 pr-2.5 text-sm font-medium;
+  @apply border
+    rounded-full
+    flex
+    items-center
+    w-fit
+    py-1
+    pl-1
+    pr-2.5
+    text-sm
+    font-medium;
 
   .icon {
     @apply w-4 h-4;
   }
 
   .badge {
-    @apply rounded-full border px-2.5 py-0.5 mr-2 text-white;
+    @apply rounded-full
+      border
+      px-2.5
+      py-0.5
+      mr-2
+      text-white;
   }
 
   .message {
     @apply mr-1;
   }
 
   &.default {
-    @apply border-green-200 bg-green-100 dark:border-green-700 dark:bg-neutral-900;
+    @apply border-green-200
+      bg-green-100
+      dark:border-green-700
+      dark:bg-neutral-900;
 
     .icon {
-      @apply text-green-500 dark:text-green-300;
+      @apply text-green-500
+        dark:text-green-300;
     }
 
     .badge {
-      @apply border-green-200 dark:border-green-600 bg-green-600;
+      @apply border-green-200
+        dark:border-green-600
+        bg-green-600;
     }
 
     .message {
-      @apply text-green-700 dark:text-green-300;
+      @apply text-green-700
+        dark:text-green-300;
     }
   }
 
   &.error {
-    @apply border-danger-200 dark:border-danger-700 bg-danger-100 dark:bg-neutral-900;
+    @apply border-danger-200
+      dark:border-danger-700
+      bg-danger-100
+      dark:bg-neutral-900;
 
     .icon {
-      @apply text-danger-500 dark:text-danger-300;
+      @apply text-danger-500
+       dark:text-danger-300;
     }
 
     .badge {
-      @apply border-danger-200 dark:border-danger-600 bg-danger-600;
+      @apply border-danger-200
+       dark:border-danger-600
+       bg-danger-600;
     }
 
     .message {
-      @apply text-danger-700 dark:text-danger-300;
+      @apply text-danger-700
+       dark:text-danger-300;
     }
   }
 
   &.warning {
-    @apply border-warning-200 dark:border-warning-700 bg-warning-100 dark:bg-neutral-900;
+    @apply border-warning-200
+      dark:border-warning-700
+      bg-warning-100
+      dark:bg-neutral-900;
 
     .icon {
-      @apply text-warning-500 dark:text-warning-300;
+      @apply text-warning-500
+        dark:text-warning-300;
     }
 
     .badge {
-      @apply border-warning-200 dark:border-warning-600 bg-warning-600;
+      @apply border-warning-200
+        dark:border-warning-600
+        bg-warning-600;
     }
 
     .message {
-      @apply text-warning-700 dark:text-warning-300;
+      @apply text-warning-700
+        dark:text-warning-300;
     }
   }
 }

components/Common/Banner/index.module.scss

@@ -1,5 +1,13 @@
 .banner {
-  @apply text-sm text-white flex flex-row items-center justify-center gap-2 py-3 w-full;
+  @apply text-sm
+    text-white
+    flex
+    flex-row
+    items-center
+    justify-center
+    gap-2
+    py-3
+    w-full;
 
   a {
     @apply underline;

package.json

@@ -28,7 +28,7 @@
     "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:md": "eslint \"**/*.md?(x)\" --cache --cache-strategy content --cache-file .eslintmdcache",
-    "lint:scss": "stylelint --config .stylelintrc.json \"**/*.{css,sass,scss}\"",
+    "lint:scss": "stylelint \"**/*.{css,sass,scss}\"",
     "lint": "npm run lint:js && npm run lint:md && npm run lint:scss",
     "lint:fix": "npm run lint:js -- --fix && npm run lint:md -- --fix && npm run lint:scss -- --fix",
     "prettier": "prettier \"**/*.{mjs,ts,tsx,md,mdx,json,yml,css,sass,scss}\" --check --cache --cache-strategy content --cache-location=.prettiercache",

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
+  syntax: 'postcss-scss',
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};