Add stylelint to ci (#167)

* add stylelint to ci

* fix stylelint ci

* fix workdir

* fix workdir

* just run stylelint

* fix dir

* fix lints

* global install

Author: ealmloff

.github/workflows/stylelint.yml

@@ -0,0 +1,49 @@
+name: Stylelint Checks
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - /**
+      - preview/**/*.rs
+      - preview/**/Cargo.toml
+      - primitives/**/*.rs
+      - primitives/**/Cargo.toml
+      - .github/**
+      - Cargo.toml
+
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+    branches:
+      - main
+    paths:
+      - /**
+      - preview/**/*.rs
+      - preview/**/Cargo.toml
+      - primitives/**/*.rs
+      - primitives/**/Cargo.toml
+      - .github/**
+      - Cargo.toml
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  stylelint:
+    if: github.event.pull_request.draft == false
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      # Do our best to cache the toolchain and node install steps
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: |
+          npm install --save-dev stylelint-config-idiomatic-order
+          npm install -g stylelint stylelint-config-standard
+      - name: Stylelint
+        run: cd ./preview && npx stylelint "**/*.css" --max-warnings=0

preview/assets/hero.css

@@ -1,10 +1,10 @@
 #hero {
     display: flex;
+    height: 40rem;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 0;
-    height: 40rem;
 }
 
 #hero > h1,
@@ -36,24 +36,26 @@
     position: absolute;
     top: 38rem;
     left: 50%;
-    transform: translate(-50%, -50%);
     width: 20px;
     height: 20px;
+    animation: scroll-down-icon-animation 3000ms ease-in-out infinite;
     fill: none;
     stroke: var(--secondary-color-4);
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: 2;
-    animation: scroll-down-icon-animation 3000ms ease-in-out infinite;
+    transform: translate(-50%, -50%);
 }
 
 @keyframes scroll-down-icon-animation {
     0% {
         transform: translateY(0);
     }
+
     50% {
         transform: translateY(10px);
     }
+
     100% {
         transform: translateY(0);
     }
@@ -62,11 +64,11 @@
 #hero-search-container {
     display: flex;
     width: 80%;
-    padding: 10px;
     max-width: 800px;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 10px;
     margin: auto;
 }
 
@@ -102,10 +104,10 @@
 }
 
 .explaination {
-    margin-bottom: 1rem;
-    padding-left: 5vw;
-    padding-right: 5vw;
     min-width: 50vw;
+    padding-right: 5vw;
+    padding-left: 5vw;
+    margin-bottom: 1rem;
     text-align: center;
 }
 
@@ -116,8 +118,8 @@
 
 .explaination-box {
     display: flex;
-    max-width: 30vw;
     width: 10rem;
+    max-width: 30vw;
     min-height: 10rem;
     box-sizing: border-box;
     flex-direction: column;

preview/assets/main.css

@@ -187,11 +187,11 @@ body {
 }
 
 .component-description {
-    margin-left: 5vw;
+    max-width: 90vw;
     margin-right: 5vw;
+    margin-left: 5vw;
     font-size: 1em;
     overflow-x: scroll;
-    max-width: 90vw;
 }
 
 .component-installation {

preview/src/components/calendar/style.css

@@ -89,12 +89,12 @@
 .calendar-grid-cell {
     width: 2rem;
     border: none;
+    border-radius: 0.5rem;
     aspect-ratio: 1;
     background: none;
     color: var(--secondary-color-4);
     cursor: pointer;
     font-size: 14px;
-    border-radius: 0.5rem;
 }
 
 .calendar-grid-cell[data-month="current"]:not([data-disabled="true"]):hover {
@@ -125,54 +125,54 @@
 
 .calendar-grid-cell[data-month="current"][data-unavailable="true"] {
     color: var(--secondary-color-6);
-    text-decoration: line-through;
     cursor: not-allowed;
+    text-decoration: line-through;
 }
 
 .calendar-grid-week td {
-    padding-left: 0;
     padding-right: 0;
+    padding-left: 0;
 }
 
 .calendar-grid-week td:first-child .calendar-grid-cell {
-    border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
 }
 
 .calendar-grid-week td:last-child .calendar-grid-cell {
-    border-top-right-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
 }
 
 .calendar-grid-cell[data-month="last"][data-selection-between="true"],
 .calendar-grid-cell[data-month="next"][data-selection-between="true"] {
+    border-radius: 0;
     background-color: var(--primary-color-5);
     color: var(--secondary-color-5);
-    border-radius: 0;
 }
 
 .calendar-grid-cell[data-month="current"][data-selection-between="true"] {
+    border-radius: 0;
     background-color: var(--primary-color-5);
     color: var(--secondary-color-4);
-    border-radius: 0;
 }
 
 td:has(.calendar-grid-cell[data-selection-start="true"]) {
+    padding: 0;
+    margin-top: 1px;
+    margin-bottom: 1px;
     background-color: var(--primary-color-5);
-    border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
-    padding: 0;
-    margin-top: 1;
-    margin-bottom: 1;
+    border-top-left-radius: 0.5rem;
 }
 
 td:has(.calendar-grid-cell[data-selection-end="true"]) {
+    padding: 0;
+    margin-top: 1px;
+    margin-bottom: 1px;
     background-color: var(--primary-color-5);
-    border-top-right-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
-    padding: 0;
-    margin-top: 1;
-    margin-bottom: 1;
+    border-top-right-radius: 0.5rem;
 }
 
 .calendar-grid-cell[data-month="current"][data-selected="true"]:hover {

preview/src/components/card/style.css

@@ -1,33 +1,32 @@
 .card {
   display: flex;
   flex-direction: column;
-
-  gap: 1.5rem;
   padding: 1.5rem 0;
-  color: var(--secondary-color-4);
   border: 1px solid var(--light, var(--primary-color-6)) var(--dark, var(--primary-color-5));
   border-radius: 1rem;
   background-color: var(--light, var(--primary-color-2)) var(--dark, var(--primary-color-3));
   box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
+  color: var(--secondary-color-4);
+  gap: 1.5rem;
 }
 
 .card-header {
   display: grid;
-  grid-template-rows: auto auto;
-  grid-auto-rows: min-content;
   align-items: start;
-  gap: 0.5rem;
   padding: 0 1.5rem;
+  gap: 0.5rem;
+  grid-auto-rows: min-content;
+  grid-template-rows: auto auto;
 }
 
 .card-header:has([data-slot="card-action"]) {
   grid-template-columns: 1fr auto;
 }
 
 .card-title {
-  line-height: 1;
-  font-weight: 600;
   font-size: 1rem;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .card-description {
@@ -39,8 +38,7 @@
 .card-action {
   grid-column-start: 2;
   grid-row: 1 / span 2;
-  align-self: start;
-  justify-self: end;
+  place-self: start end;
 }
 
 .card-content {

preview/src/components/sheet/style.css

@@ -43,12 +43,12 @@
   display: flex;
   box-sizing: border-box;
   flex-direction: column;
-  gap: 1rem;
   border: none;
   background: var(--primary-color-2);
   box-shadow: 0 4px 20px rgb(0 0 0 / 20%);
   color: var(--secondary-color-4);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  gap: 1rem;
   will-change: transform;
 }
 
@@ -205,16 +205,16 @@
 .sheet-header {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
   padding: 1rem;
+  gap: 0.375rem;
 }
 
 .sheet-footer {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
   padding: 1rem;
   margin-top: auto;
+  gap: 0.5rem;
 }
 
 .sheet-title {
@@ -235,10 +235,10 @@
   top: 1rem;
   right: 1rem;
   display: flex;
-  align-items: center;
-  justify-content: center;
   width: 24px;
   height: 24px;
+  align-items: center;
+  justify-content: center;
   padding: 0;
   border: none;
   border-radius: 4px;
@@ -256,7 +256,7 @@
   width: 20px;
   height: 20px;
   fill: none;
-  stroke: currentColor;
+  stroke: currentcolor;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2;

preview/src/components/skeleton/style.css

@@ -1,11 +1,10 @@
 .skeleton {
-  background-color: var(--primary-color-5);
   border-radius: 0.375rem;
   animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  background-color: var(--primary-color-5);
 }
 
 @keyframes skeleton-pulse {
-
   0%,
   100% {
     opacity: 1;

preview/src/components/textarea/style.css

@@ -2,22 +2,19 @@
 .textarea {
   width: 100%;
   min-height: 4rem;
+  box-sizing: border-box;
   padding: 8px 12px;
-  line-height: 1.5;
-  font-family: inherit;
+  border: none;
+  border-radius: 0.5rem;
+  margin: 0;
+  appearance: none;
+  background: none;
   color: var(--secondary-color-4);
+  font-family: inherit;
+  line-height: 1.5;
   outline: none;
   resize: vertical;
   transition: background-color 100ms ease-out, border-color 100ms ease-out, box-shadow 100ms ease-out;
-
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  margin: 0;
-  border: none;
-  background: none;
-  box-sizing: border-box;
-  border-radius: 0.5rem;
 }
 
 .textarea:disabled {
@@ -59,7 +56,7 @@
     var(--dark, var(--primary-color-3));
 }
 
-.textarea[data-style="outline"]:hover:not(:disabled):not(:focus) {
+.textarea[data-style="outline"]:hover:not(:disabled, :focus) {
   border-color: var(--primary-color-7);
 }