chore: add scss linter (#2298)

Author: Lisa18289

.stylelintignore

@@ -0,0 +1,4 @@
+apps/docs/out/
+packages/design-tokens/dist/
+packages/stylesheet/dist/
+packages/components/dist/

apps/docs/src/app/_components/layout/Footer/footer.module.scss

@@ -24,6 +24,7 @@
     .feedbackImage {
       display: none;
     }
+
     .footerContent {
       padding-inline: var(--size-px--xl);
     }

apps/docs/src/app/global.scss

@@ -6,7 +6,6 @@
 
 html {
   scroll-behavior: smooth;
-  data-scroll-behavior: smooth;
 }
 
 body {

apps/docs/src/app/layout.module.scss

@@ -1,5 +1,6 @@
 .body {
   --header-height: 72px;
+
   background-color: var(--neutral--color--300);
   isolation: isolate;
 
@@ -28,6 +29,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
+
   &.scrolled {
     box-shadow: var(--shadow--content);
   }
@@ -121,9 +123,8 @@
   padding: 0;
 
   .homeImage {
-    border-bottom-color: var(--separator--color);
-    border-bottom-width: var(--separator--height);
-    border-bottom-style: var(--border-style--default);
+    border-bottom: var(--separator--height) var(--border-style--default)
+      var(--separator--color);
   }
 
   .homeTopContent {
@@ -143,6 +144,7 @@
     display: flex;
     padding-block: var(--size-px--m);
   }
+
   .mobileNavigationOffCanvas {
     h3 {
       display: none;

apps/docs/src/lib/liveCode/components/LiveCodeEditor/LiveCodeEditor.module.css

@@ -1,5 +1,10 @@
+.preview {
+  padding: var(--size-px--l);
+}
+
 .liveCodeEditor {
   --border-color: var(--neutral-outline-border-color);
+
   border: 1px solid var(--border-color);
   border-radius: var(--corner-radius--default);
   background-color: var(--neutral--color--200);
@@ -36,6 +41,19 @@
       .preview {
         background-color: var(--primary--color--1000);
       }
+
+      .mobile {
+        height: 100%;
+
+        .preview {
+          border-inline: 4px solid var(--neutral--color--500);
+          margin: 0 auto;
+          padding: var(--size-px--l);
+          max-width: 400px;
+          background-color: var(--neutral--color--100);
+          height: 100%;
+        }
+      }
     }
   }
 
@@ -59,29 +77,10 @@
   }
 }
 
-.preview {
-  padding: var(--size-px--l);
-}
-
 .editorContainer {
   overflow-x: auto;
 }
 
-.darkBackground {
-  .mobile {
-    height: 100%;
-
-    .preview {
-      border-inline: 4px solid var(--neutral--color--500);
-      margin: 0 auto;
-      padding: var(--size-px--l);
-      max-width: 400px;
-      background-color: var(--neutral--color--100);
-      height: 100%;
-    }
-  }
-}
-
 .toggleCode {
   width: 100% !important;
   outline-offset: calc(var(--size-px--xxs) * -1) !important;
@@ -103,6 +102,7 @@
   border-top: 1px solid var(--border-color);
   display: flex;
   justify-content: center;
+
   button {
     padding-block: var(--size-px--s);
   }

apps/docs/src/lib/liveCode/components/LiveCodeEditor/components/Row/Row.module.css

@@ -1,8 +1,6 @@
 .row {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  column-gap: var(--size-rem--m);
-  row-gap: var(--size-rem--m);
+  flex-flow: row wrap;
+  gap: var(--size-rem--m);
   align-items: center;
 }

apps/docs/src/lib/mdx/components/DesignTokenTable/Samples/Sample.module.scss

@@ -23,6 +23,7 @@
   width: fit-content;
   border-radius: 4px;
   border: solid 1px;
+
   &:where(.padding) {
     background: repeating-linear-gradient(
       45deg,
@@ -33,6 +34,7 @@
     );
     border-color: var(--color--soft-contrast-violet--700);
   }
+
   &:where(.margin) {
     background: repeating-linear-gradient(
       45deg,
@@ -50,10 +52,12 @@
   padding: 25px 20px;
   border: 1px solid;
   border-radius: 4px;
+
   &:where(.padding) {
     color: var(--color--soft-contrast-violet--800);
     border-color: var(--color--soft-contrast-violet--800);
   }
+
   &:where(.margin) {
     color: var(--color--super-teal--800);
     border-color: var(--color--super-teal--800);

apps/docs/src/lib/mdx/components/MdxFileView/customComponents.module.css

@@ -30,16 +30,19 @@
 .anchorLinkHeading {
   width: fit-content;
   scroll-margin-top: 6rem;
+
   > span {
     display: flex;
     align-items: center;
     column-gap: var(--size-rem--s);
   }
+
   .anchorButton {
     opacity: 0;
     transition-property: opacity;
     transition-duration: var(--transition--duration--fast);
   }
+
   &:hover {
     .anchorButton {
       opacity: 1;
@@ -107,14 +110,17 @@
     "firstContent secondContent";
   grid-template-columns: 1fr 1fr;
 
-  .doAndDontCode:first-of-type,
-  .doAndDontText:first-of-type {
-    grid-area: firstExample;
-  }
+  .doAndDontCode,
+  .doAndDontText {
+    margin-bottom: 0;
 
-  .doAndDontCode:last-of-type,
-  .doAndDontText:last-of-type {
-    grid-area: secondExample;
+    &:last-of-type {
+      grid-area: secondExample;
+    }
+
+    &:first-of-type {
+      grid-area: firstExample;
+    }
   }
 
   .doAndDontContent:first-of-type {
@@ -124,11 +130,6 @@
   .doAndDontContent:last-of-type {
     grid-area: secondContent;
   }
-
-  .doAndDontCode,
-  .doAndDontText {
-    margin-bottom: 0;
-  }
 }
 
 @media (max-width: 1200px) {

package.json

@@ -17,7 +17,7 @@
     "dev": "nx build:deps $@ && concurrently \"yarn watch $@\" \"yarn nx dev $@\"",
     "dev:init-githooks": "pnpm dlx simple-git-hooks",
     "format": "prettier --write '**/*.{ts,tsx,yaml,yml,json,md,mdx,js,cjs,mjs,css}'",
-    "lint": "eslint .",
+    "lint": "eslint . && stylelint '**/*.{css,scss}'",
     "test": "nx run-many --targets=test:unit,test:compile",
     "test:browser": "nx run-many --targets=test:browser,test:e2e,test:visual",
     "test:browser:prepare": "pnpx playwright install --with-deps firefox webkit",
@@ -58,6 +58,10 @@
     "prettier-plugin-sort-json": "^4.2.0",
     "react-docgen-typescript": "^2.4.0",
     "simple-git-hooks": "^2.13.1",
+    "stylelint": "^17.0.0",
+    "stylelint-config-recommended-scss": "^17.0.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-scss": "^7.0.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",

packages/components/src/components/AccentBox/AccentBox.module.scss

@@ -22,6 +22,7 @@
   @mixin status($color) {
     &.#{$color} {
       background: var(--accent-box--background-color-#{$color});
+
       > svg {
         color: var(--accent-box--icon-color-#{$color});
       }