feat(all): add stylelint CSS linter (#140)

Author: Danil42Russia

.github/workflows/ci.yml

@@ -34,7 +34,10 @@ jobs:
         run: yarn run fmt:check
 
       - name: Run eslint
-        run: yarn run lint
+        run: yarn run lint:ts
+
+      - name: Run stylelint
+        run: yarn run lint:css
 
       - name: Build project
         run: yarn run build:all

.gitignore

@@ -36,5 +36,8 @@ yarn-error.log
 # Eslint
 .eslintcache
 
+# stylelint
+.stylelintcache
+
 # astro
 .astro/

.stylelintignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+playwright-report/
+test-results/

package.json

@@ -8,7 +8,9 @@
     "dev": "vite --port 5174",
     "build": "tsc -b && vite build",
     "build:all": "yarn build && yarn astro:build",
-    "lint": "eslint --max-warnings 0 . --cache",
+    "lint": "yarn run lint:ts && yarn run lint:css",
+    "lint:ts": "eslint --max-warnings 0 . --cache",
+    "lint:css": "stylelint '**/*.css' --cache",
     "preview": "vite preview",
     "deploy": "gh-pages -d dist --nojekyll",
     "fmt": "prettier --write -l --cache .",
@@ -86,6 +88,9 @@
     "starlight-links-validator": "^0.18.0",
     "starlight-llms-txt": "^0.6.0",
     "starlight-theme-rapide": "^0.5.1",
+    "stylelint": "^16.24.0",
+    "stylelint-config-css-modules": "^4.5.1",
+    "stylelint-config-standard": "^39.0.0",
     "ts-node": "^10.9.1",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",

spec/src/starlight.custom.css

@@ -8,8 +8,8 @@
   --sl-color-accent-low: #00234c;
   --sl-color-accent: #0067c9;
   --sl-color-accent-high: #a4ccff;
-  --sl-color-real-white: #ffffff;
-  --sl-color-white: #ffffff;
+  --sl-color-real-white: #fff;
+  --sl-color-white: #fff;
   --sl-color-gray-1: #eceef2;
   --sl-color-gray-2: #c0c2c7;
   --sl-color-gray-3: #888b96;
@@ -34,7 +34,7 @@
   --sl-color-gray-5: #c0c2c7;
   --sl-color-gray-6: #eceef2;
   --sl-color-gray-7: #f5f6f8;
-  --sl-color-black: #ffffff;
+  --sl-color-black: #fff;
   --tracepage-logo-inner-gradient-start: #0f3ec9;
 }
 
@@ -132,7 +132,7 @@ header.header .site-title {
   font-weight: 400;
 }
 
-header.header .site-title span:before {
+header.header .site-title span::before {
   content: "TxTracer";
   font-size: var(--sl-text-lg) !important;
   color: var(--sl-color-real-white);

src/features/sandbox/ui/abi/ParsedDataView.module.css

@@ -149,7 +149,7 @@
 }
 
 /* Responsive adjustments */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .fieldValue {
     margin-left: var(--spacing-sm);
     width: calc(100% - var(--spacing-sm));
@@ -202,14 +202,14 @@
 
 .diffOldValue .stringValue {
   color: var(--color-error-text);
-  background-color: rgba(220, 38, 38, 0.1);
-  border-color: rgba(220, 38, 38, 0.3);
+  background-color: rgb(220 38 38 / 10%);
+  border-color: rgb(220 38 38 / 30%);
 }
 
 .diffNewValue .stringValue {
   color: var(--color-success-text);
-  background-color: rgba(22, 163, 74, 0.1);
-  border-color: rgba(22, 163, 74, 0.3);
+  background-color: rgb(22 163 74 / 10%);
+  border-color: rgb(22 163 74 / 30%);
 }
 
 .diffOldValue .numberValue {

src/features/themeSwitcher/ui/ThemeToggleButton.module.css

@@ -14,7 +14,7 @@
   margin-left: var(--spacing-sm);
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .toggleButtonText {
     display: none;
   }

src/features/txTrace/ui/StepInstructionBlock.module.css

@@ -26,7 +26,7 @@
   box-sizing: border-box;
   gap: 8px;
   margin-left: var(--spacing-sm);
-  font-family: var(--font-family-mono), "monospace";
+  font-family: var(--font-family-mono), monospace;
 }
 
 .instructionName {

src/features/txTrace/ui/TransactionDetailsTable.module.css

@@ -41,9 +41,6 @@
   color: var(--table-th-text-color);
 }
 
-.sectionTitle {
-}
-
 .detailLabel {
   display: flex;
   align-items: center;
@@ -103,9 +100,6 @@
   color: var(--color-text-secondary);
 }
 
-.numberValue {
-}
-
 .booleanTrue {
   font-weight: var(--font-weight-semibold);
   color: var(--table-boolean-true-color);
@@ -188,9 +182,6 @@
   border-bottom: 1px solid var(--table-border-color);
 }
 
-.labeledSectionRow:last-of-type {
-}
-
 .labeledSectionTitle {
   text-align: left;
   font-weight: var(--font-weight-semibold);
@@ -212,7 +203,7 @@
   box-sizing: border-box;
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .detailRow,
   .labeledSectionRow {
     flex-direction: column;