Add stylelint

jhancock532 · Aug 8, 2024 · 3bf8de9 · 3bf8de9
1 parent 6b81c39
commit 3bf8de9
Show file tree

Hide file tree

Showing 21 changed files with 1,395 additions and 291 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,8 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-css-modules"],
+  "rules": {
+    "selector-max-id": 0,
+    "custom-property-pattern": null,
+    "selector-class-pattern": null
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint && prettier --check '**/?(.)*.{md,css,scss,js,ts,tsx,json,yaml,yml}'",
+    "lint": "next lint && prettier --check '**/?(.)*.{md,css,scss,js,ts,tsx,json,yaml,yml}' && stylelint '**/*.scss'",
     "format": "prettier --write '**/?(.)*.{md,css,scss,js,ts,tsx,json,yaml,yml}'",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -44,6 +44,10 @@
     "axe-playwright": "^2.0.1",
     "eslint-config-torchbox": "1.1.0",
     "eslint-plugin-storybook": "0.8.0",
-    "storybook": "8.2.7"
+    "storybook": "8.2.7",
+    "stylelint": "16.8.1",
+    "stylelint-config-standard": "36.0.1",
+    "stylelint-config-standard-scss": "13.1.0",
+    "stylelint-config-css-modules": "4.4.0"
   }
 }
diff --git a/src/components/AdHocCard/AdHocCard.module.scss b/src/components/AdHocCard/AdHocCard.module.scss
@@ -2,6 +2,7 @@
 
 .container {
     @include font-size(s);
+
     padding: $grid;
     border-radius: $border-radius;
     background-color: var(--color--bright-white);
@@ -19,5 +20,5 @@
 }
 
 .externalLink {
-    @include external-button-link();
+    @include external-button-link;
 }
diff --git a/src/components/DiscordCard/DiscordCard.module.scss b/src/components/DiscordCard/DiscordCard.module.scss
@@ -2,6 +2,7 @@
 
 .container {
     @include font-size(s);
+
     padding: $grid;
     border-radius: $border-radius;
     background-color: var(--color--bright-white);
@@ -25,5 +26,5 @@
 }
 
 .externalLink {
-    @include external-button-link();
+    @include external-button-link;
 }
diff --git a/src/components/EventCard/EventCard.module.scss b/src/components/EventCard/EventCard.module.scss
@@ -1,5 +1,6 @@
 .details {
     @include font-size(s);
+
     padding: $grid;
     display: flex;
     flex-direction: column;
@@ -8,7 +9,6 @@
     background-color: var(--color--bright-white);
     margin-bottom: auto;
     max-width: 600px;
-
     box-shadow: $box-shadow;
 
     @include media-query(medium) {
@@ -36,7 +36,7 @@
 
         p {
             color: var(--color--text);
-            margin: -1px 0 0 0;
+            margin: -1px 0 0;
         }
     }
 }
@@ -51,23 +51,22 @@
     margin-top: 0;
     text-decoration: underline;
 
+    svg {
+        width: 1.8ex;
+        height: 1.8ex;
+        margin: 0.4ex 0 0 0.2ex;
+        transition: transform $transition;
+    }
+
     &:hover {
         color: var(--color--black);
 
         svg {
             transform: translate(0.2ex, -0.2ex);
         }
     }
-
-    svg {
-        width: 1.8ex;
-        height: 1.8ex;
-        margin: 0.4ex 0 0 0.2ex;
-
-        transition: transform $transition;
-    }
 }
 
 .externalLink {
-    @include external-button-link();
+    @include external-button-link;
 }
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -1,5 +1,6 @@
 .container {
-    @include main-grid();
+    @include main-grid;
+
     padding-top: $grid * 2;
     padding-bottom: $grid * 2;
     background-color: var(--color--midnight);
@@ -12,14 +13,16 @@
 
 .description {
     @include font-size(s);
+
     font-weight: 400;
     margin-bottom: $grid / 2;
     color: var(--color--white);
 }
 
 .link {
-    @include focus-outline-inverse();
+    @include focus-outline-inverse;
     @include font-size(s);
+
     font-weight: 400;
     margin-top: $grid;
     color: var(--color--highlight-green);

diff --git a/src/components/GroupCard/GroupCard.module.scss b/src/components/GroupCard/GroupCard.module.scss
@@ -10,7 +10,8 @@
 
 .title {
     @include font-size(m);
-    @include highlight-link();
+    @include highlight-link;
+
     line-height: 1.25;
     font-weight: 500;
 
@@ -19,14 +20,16 @@
     }
 
     &__link {
+        @include focus-outline;
+
         display: inline-block;
         margin-bottom: $grid;
-        @include focus-outline();
     }
 }
 
 .description {
     @include font-size(s);
+
     font-weight: 400;
     margin-bottom: $grid;
 }

diff --git a/src/components/GroupListingFeed/GroupListingFeed.module.scss b/src/components/GroupListingFeed/GroupListingFeed.module.scss
@@ -1,5 +1,6 @@
 .noGroupsFoundMessage {
     @include font-size(sm);
+
     font-weight: 500;
     margin-bottom: $grid * 3;
 }
diff --git a/src/components/GroupListingMap/GroupListingMap.module.scss b/src/components/GroupListingMap/GroupListingMap.module.scss
@@ -11,7 +11,8 @@
 }
 
 .toggleButton {
-    @include focus-outline();
+    @include focus-outline;
+
     padding: $grid;
     display: flex;
     justify-content: center;
@@ -34,12 +35,26 @@
     }
 }
 
+.buttonText {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: max-content;
+    font-weight: 500;
+    color: var(--color--bright-white);
+    background-color: var(--color--dark-green);
+    padding: $grid * 0.5 $grid * 0.5 $grid * 0.5 $grid;
+    border-radius: $border-radius;
+    border: 1px solid var(--color--dark-gray);
+    transition: background-color 0.3s ease;
+}
+
 .toggleButtonOpen {
     // Whenever we open the dropdown, resize the button container to nothing,
     // only allowing the central button text to be clickable.
     // This is because we want the placeholder background image to disappear
     // and the map element to appear in its place.
-    background: rgba(0, 0, 0, 0);
+    background: rgb(0 0 0 / 0%);
     height: 0;
     padding: 0;
     border: none;
@@ -59,20 +74,6 @@
     }
 }
 
-.buttonText {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: max-content;
-    font-weight: 500;
-    color: var(--color--bright-white);
-    background-color: var(--color--dark-green);
-    padding: $grid * 0.5 $grid * 0.5 $grid * 0.5 $grid;
-    border-radius: $border-radius;
-    border: 1px solid var(--color--dark-gray);
-    transition: background-color 0.3s ease;
-}
-
 .dropdownIcon {
     width: 24px;
     height: 24px;

diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -1,5 +1,6 @@
 .container {
-    @include main-grid();
+    @include main-grid;
+
     padding-top: $grid;
     position: relative;
 
@@ -10,15 +11,17 @@
 
 .description {
     @include font-size(s);
+
     font-weight: 400;
     margin-bottom: $grid / 2;
     color: var(--color--white);
 }
 
 .link {
-    @include highlight-link();
-    @include focus-outline();
+    @include highlight-link;
+    @include focus-outline;
     @include font-size(sm);
+
     font-weight: 400;
     color: var(--color--text);
     padding: $grid / 2;
@@ -78,18 +81,23 @@
 
 .menuButton {
     @include font-size(m);
+
     color: var(--color--white);
     background-color: var(--color--primary);
     padding: $grid / 2;
     border-radius: $border-radius;
     border: none;
     cursor: pointer;
-    font-weight: $weight--bold;
+    font-weight: $weight-bold;
     display: flex;
     align-items: center;
     gap: $grid / 2;
     margin-right: auto;
 
+    svg {
+        color: var(--color--white);
+    }
+
     &:hover {
         background-color: var(--color--highlight-green);
         color: var(--color--text);
@@ -100,14 +108,10 @@
     }
 
     &:focus {
-        @include focus-outline();
+        @include focus-outline;
     }
 
     @include media-query(medium) {
         display: none;
     }
-
-    svg {
-        color: var(--color--white);
-    }
 }
diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
@@ -1,5 +1,6 @@
 .mainContainer {
-    @include main-grid();
+    @include main-grid;
+
     padding-top: $grid * 2;
     padding-bottom: $grid * 2;
 
@@ -11,9 +12,3 @@
         padding-top: $grid * 6;
     }
 }
-
-.sidebar {
-}
-
-.content {
-}
diff --git a/src/components/Link/Link.module.scss b/src/components/Link/Link.module.scss
@@ -1,7 +1,15 @@
 @use 'variables' as *;
 
+.externalLinkIcon {
+    vertical-align: middle;
+    margin-bottom: 0.35ex;
+    margin-left: 0.2ex;
+    transition: transform $transition;
+}
+
 .link {
-    @include highlight-link();
+    @include highlight-link;
+
     color: var(--color--midnight);
 
     &:hover {
@@ -12,10 +20,3 @@
         }
     }
 }
-
-.externalLinkIcon {
-    vertical-align: middle;
-    margin-bottom: 0.35ex;
-    margin-left: 0.2ex;
-    transition: transform $transition;
-}
diff --git a/src/components/Map/Map.module.scss b/src/components/Map/Map.module.scss
@@ -12,7 +12,8 @@
 
 .popupTitle {
     @include font-size(s);
-    @include highlight-link();
+    @include highlight-link;
+
     font-weight: 500;
 
     a {
@@ -22,6 +23,7 @@
 
 .popupText {
     @include font-size(xs);
+
     margin: $grid * 0.25 0;
 }
 
@@ -30,7 +32,7 @@
         color: var(--color--white);
     }
 
-    @include external-button-link();
+    @include external-button-link;
 
     font-size: 1.125rem;
     font-weight: 450;