chore: add stylelint for linting sass

cprussin · cprussin · commit aa21cf18d932 · 2024-11-21T09:32:28.000-08:00
diff --git a/apps/insights/package.json b/apps/insights/package.json
@@ -9,12 +9,14 @@
   "scripts": {
     "build": "next build",
     "fix:format": "prettier --write .",
-    "fix:lint": "eslint --fix .",
+    "fix:lint:eslint": "eslint --fix .",
+    "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
     "start:dev": "next dev --port 3003",
     "start:prod": "next start --port 3003",
     "test:format": "prettier --check .",
-    "test:lint": "eslint .",
+    "test:lint:eslint": "eslint .",
+    "test:lint:stylelint": "stylelint 'src/**/*.scss'",
     "test:types": "tsc"
   },
   "dependencies": {
@@ -56,6 +58,8 @@
     "postcss": "catalog:",
     "prettier": "catalog:",
     "sass": "catalog:",
+    "stylelint": "catalog:",
+    "stylelint-config-standard-scss": "catalog:",
     "typescript": "catalog:",
     "vercel": "catalog:"
   }
diff --git a/apps/insights/src/components/CopyButton/index.module.scss b/apps/insights/src/components/CopyButton/index.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .copyButton {
   margin: -#{theme.spacing(0.5)} -0.5em;
diff --git a/apps/insights/src/components/H1/index.module.scss b/apps/insights/src/components/H1/index.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .h1 {
   font-size: theme.font-size("2xl");
diff --git a/apps/insights/src/components/Loading/index.module.scss b/apps/insights/src/components/Loading/index.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .loading {
   @include theme.max-width;
diff --git a/apps/insights/src/components/Overview/index.module.scss b/apps/insights/src/components/Overview/index.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .overview {
   @include theme.max-width;
diff --git a/apps/insights/src/components/PriceFeeds/epoch-select.module.scss b/apps/insights/src/components/PriceFeeds/epoch-select.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .epochSelect {
   display: flex;
diff --git a/apps/insights/src/components/PriceFeeds/index.module.scss b/apps/insights/src/components/PriceFeeds/index.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .assetName {
   display: flex;
diff --git a/apps/insights/src/components/PriceFeeds/layout.module.scss b/apps/insights/src/components/PriceFeeds/layout.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .priceFeedsLayout {
   @include theme.max-width;
diff --git a/apps/insights/src/components/PriceFeeds/prices.module.scss b/apps/insights/src/components/PriceFeeds/prices.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .price {
   transition: color 100ms linear;
diff --git a/apps/insights/src/components/Publishers/epoch-select.module.scss b/apps/insights/src/components/Publishers/epoch-select.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .epochSelect {
   display: flex;
diff --git a/apps/insights/src/components/Publishers/index.module.scss b/apps/insights/src/components/Publishers/index.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .publisherNameContainer {
   display: flex;
diff --git a/apps/insights/src/components/Publishers/layout.module.scss b/apps/insights/src/components/Publishers/layout.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .publishersLayout {
   @include theme.max-width;
diff --git a/apps/insights/src/components/Root/footer.module.scss b/apps/insights/src/components/Root/footer.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .footer {
   // SM
@@ -34,6 +34,7 @@
 
       // SM
       gap: theme.spacing(6);
+
       // gap-8
 
       .logoLink {
@@ -75,6 +76,7 @@
       // SM
       justify-content: flex-end;
       gap: theme.spacing(2);
+
       // justify-between
     }
   }
diff --git a/apps/insights/src/components/Root/header.module.scss b/apps/insights/src/components/Root/header.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .header {
   position: sticky;
@@ -10,17 +10,19 @@
   .content {
     height: 100%;
     justify-content: space-between;
+
     @include theme.row;
     @include theme.max-width;
 
     .leftMenu {
       flex: none;
       gap: theme.spacing(6);
+
       @include theme.row;
 
       .logo {
-        margin-top: 0.56456rem;
-        height: 2.81456rem;
+        margin-top: 0.5646rem;
+        height: 2.8146rem;
         width: theme.spacing(9);
       }
 
@@ -38,7 +40,9 @@
     .rightMenu {
       flex: none;
       gap: theme.spacing(2);
+
       @include theme.row;
+
       margin-right: -#{theme.button-padding("sm", false)};
 
       .themeSwitch {
diff --git a/apps/insights/src/components/Root/index.module.scss b/apps/insights/src/components/Root/index.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .tabRoot {
   display: grid;
diff --git a/apps/insights/src/components/Root/theme-switch.module.scss b/apps/insights/src/components/Root/theme-switch.module.scss
@@ -1,4 +1,4 @@
-@use "@pythnetwork/component-library/theme.scss";
+@use "@pythnetwork/component-library/theme";
 
 .themeSwitch {
   overflow: hidden;
diff --git a/apps/insights/stylelint.config.js b/apps/insights/stylelint.config.js
@@ -0,0 +1,15 @@
+import standardScss from "stylelint-config-standard-scss";
+
+const config = {
+  extends: standardScss,
+  rules: {
+    "selector-class-pattern": [
+      "^[a-z][a-zA-Z0-9]+$",
+      {
+        message: (selector) =>
+          `Expected class selector "${selector}" to be camel-case`,
+      },
+    ],
+  },
+};
+export default config;
diff --git a/apps/insights/turbo.json b/apps/insights/turbo.json
@@ -14,6 +14,17 @@
         "CLICKHOUSE_PASSWORD"
       ]
     },
+    "fix:lint": {
+      "dependsOn": ["fix:lint:eslint", "fix:lint:stylelint"],
+      "cache": false
+    },
+    "fix:lint:eslint": {
+      "dependsOn": ["^build"],
+      "cache": false
+    },
+    "fix:lint:stylelint": {
+      "cache": false
+    },
     "pull:env": {
       "outputs": [".env.local"],
       "cache": false
@@ -27,6 +38,13 @@
       "dependsOn": ["build"],
       "persistent": true,
       "cache": false
-    }
+    },
+    "test:lint": {
+      "dependsOn": ["test:lint:eslint", "test:lint:stylelint"]
+    },
+    "test:lint:eslint": {
+      "dependsOn": ["^build"]
+    },
+    "test:lint:stylelint": {}
   }
 }
diff --git a/packages/component-library/package.json b/packages/component-library/package.json
@@ -8,15 +8,17 @@
   },
   "exports": {
     "./*": "./src/*/index.tsx",
-    "./theme.scss": "./src/theme.scss"
+    "./theme": "./src/theme.scss"
   },
   "scripts": {
     "build:storybook": "storybook build",
     "fix:format": "prettier --write .",
-    "fix:lint": "eslint --fix .",
+    "fix:lint:eslint": "eslint --fix .",
+    "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "start:dev": "storybook dev --port 4000 --no-open",
     "test:format": "prettier --check .",
-    "test:lint": "eslint .",
+    "test:lint:eslint": "eslint .",
+    "test:lint:stylelint": "stylelint 'src/**/*.scss'",
     "test:types": "tsc"
   },
   "peerDependencies": {
@@ -57,6 +59,8 @@
     "sass-loader": "catalog:",
     "storybook": "catalog:",
     "style-loader": "catalog:",
+    "stylelint": "catalog:",
+    "stylelint-config-standard-scss": "catalog:",
     "typescript": "catalog:"
   }
 }
diff --git a/packages/component-library/src/AppTabs/index.module.scss b/packages/component-library/src/AppTabs/index.module.scss
@@ -1,7 +1,8 @@
-@use "../theme.scss";
+@use "../theme";
 
 .appTabs {
   gap: theme.spacing(2);
+
   @include theme.row;
 
   .tab {
@@ -24,7 +25,7 @@
       border-color: transparent;
 
       .bubble {
-        box-shadow: 0px 0px 0px 4px rgba(white, 0.4);
+        box-shadow: 0 0 0 4px rgba(white, 0.4);
       }
     }
   }
diff --git a/packages/component-library/src/Button/index.module.scss b/packages/component-library/src/Button/index.module.scss
@@ -1,12 +1,11 @@
-@use "../theme.scss";
+@use "../theme";
 
 .button {
   display: inline flow-root;
   cursor: pointer;
   white-space: nowrap;
   font-weight: theme.font-weight("medium");
   outline: none;
-  border: none;
   transition-property: background-color, color, border-color, box-shadow;
   transition-duration: 100ms;
   transition-timing-function: linear;
@@ -129,6 +128,6 @@
 
   &[data-focus-visible] {
     border-color: theme.color("forms", "input", "focus", "border");
-    box-shadow: 0px 0px 0px 4px theme.color("forms", "focus-color");
+    box-shadow: 0 0 0 4px theme.color("forms", "focus-color");
   }
 }
diff --git a/packages/component-library/src/Card/index.module.scss b/packages/component-library/src/Card/index.module.scss
@@ -1,9 +1,8 @@
-@use "../theme.scss";
+@use "../theme";
 
 .card {
   flex-direction: column;
   gap: theme.spacing(2);
-  border-radius: theme.border-radius("2xl");
   background-color: theme.color("background", "secondary");
   border-radius: theme.border-radius("2xl");
   padding: theme.spacing(1);
diff --git a/packages/component-library/src/Html/base.scss b/packages/component-library/src/Html/base.scss
@@ -1,6 +1,5 @@
 @use "modern-normalize";
-
-@use "../theme.scss";
+@use "../theme";
 
 :root {
   color: theme.color("foreground");
diff --git a/packages/component-library/src/Link/index.module.scss b/packages/component-library/src/Link/index.module.scss
@@ -1,4 +1,4 @@
-@use "../theme.scss";
+@use "../theme";
 
 .link {
   text-decoration: underline;
diff --git a/packages/component-library/src/Paginator/index.module.scss b/packages/component-library/src/Paginator/index.module.scss
@@ -1,4 +1,4 @@
-@use "../theme.scss";
+@use "../theme";
 
 .paginator {
   display: flex;
@@ -16,6 +16,7 @@
       height: theme.spacing(4);
       opacity: 0;
       transition: opacity 100ms linear;
+
       @include theme.spin;
 
       &.visible {
diff --git a/packages/component-library/src/SearchInput/index.module.scss b/packages/component-library/src/SearchInput/index.module.scss
diff --git a/packages/component-library/src/Select/index.module.scss b/packages/component-library/src/Select/index.module.scss
diff --git a/packages/component-library/src/Skeleton/index.module.scss b/packages/component-library/src/Skeleton/index.module.scss
diff --git a/packages/component-library/src/Table/index.module.scss b/packages/component-library/src/Table/index.module.scss
diff --git a/packages/component-library/src/TableCard/index.module.scss b/packages/component-library/src/TableCard/index.module.scss
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
diff --git a/packages/component-library/stylelint.config.js b/packages/component-library/stylelint.config.js
diff --git a/packages/component-library/turbo.json b/packages/component-library/turbo.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@use "@pythnetwork/component-library/theme.scss";`
	`1`	`+@use "@pythnetwork/component-library/theme";`
`2`	`2`
`3`	`3`	`.copyButton {`
`4`	`4`	`margin: -#{theme.spacing(0.5)} -0.5em;`