wip: stylelint

wevm · Oct 24, 2023 · 94656df · 94656df
1 parent ea7f4bb
commit 94656df
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 74 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,2 @@
+_lib
+dist
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,11 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "comment-empty-line-before": null,
+    "comment-whitespace-inside": null,
+    "custom-property-pattern": null,
+    "no-duplicate-selectors": null,
+    "selector-class-pattern": null,
+    "value-keyword-case": null
+  }
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["biomejs.biome"]
+  "recommendations": ["biomejs.biome", "vunguyentuan.vscode-css-variables"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -21,7 +21,5 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "[css]": {
-    "editor.defaultFormatter": "vscode.css-language-features"
-  }
+  "css.validate": false
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "docs:dev": "cd site && bun run dev",
     "docs:build": "cd site && bun run build",
     "format": "biome format . --write",
-    "lint": "biome lint . --apply-unsafe",
+    "lint": "biome lint . --apply-unsafe && stylelint --fix src/**/*.css",
     "playground": "cd playgrounds/default && bun run dev",
     "prepare": "bun x simple-git-hooks",
     "typecheck": "tsc --noEmit"
@@ -25,6 +25,8 @@
     "fs-extra": "^11.1.1",
     "rimraf": "^5.0.5",
     "simple-git-hooks": "^2.9.0",
+    "stylelint": "^15.11.0",
+    "stylelint-config-standard": "^34.0.0",
     "typescript": "^5.2.2"
   },
   "simple-git-hooks": {

diff --git a/src/app/styles/elements.css b/src/app/styles/elements.css
@@ -31,13 +31,6 @@
   }
 
   /** Markdown: "## (Text)" */
-  .vocs :not(header)+h2,
-  .vocs h2:is(:first-child) {
-    border-top: 1px solid var(--vocs-color_border);
-    margin-top: var(--vocs-space_56);
-    padding-top: var(--vocs-space_24);
-  }
-
   .vocs h2 {
     font-size: var(--vocs-fontSize_h2);
     font-weight: var(--vocs-fontWeight-semibold);
@@ -46,6 +39,14 @@
     margin-bottom: var(--vocs-space_20);
   }
 
+  .vocs :not(header)+h2,
+  .vocs h2:is(:first-child) {
+    border-top: 1px solid var(--vocs-color_border);
+    margin-top: var(--vocs-space_56);
+    padding-top: var(--vocs-space_24);
+  }
+
+
   /** Markdown: "### (Text)" */
   .vocs h3 {
     font-size: var(--vocs-fontSize_h3);
@@ -140,29 +141,22 @@
   /* Code                             */
   /************************************/
 
-  .vocs :not(pre, [data-rehype-pretty-code-fragment])>code {
-    background-color: var(--vocs-color_inline-code-background);
-    color: var(--vocs-color_inline-code);
+  .vocs pre {
+    margin-bottom: var(--vocs-space_16);
   }
-
+  
   .vocs :not(pre)>code {
     border-radius: var(--vocs-borderRadius_4);
     font-size: var(--vocs-fontSize_code);
     padding: var(--vocs-space_3) var(--vocs-space_6);
   }
 
-  .vocs.vocs a>code {
-    color: var(--vocs-color_link);
-    text-decoration: underline;
-    text-underline-offset: var(--vocs-space_2);
-
-    &:hover {
-      color: var(--vocs-color_link-hover);
-    }
+  .vocs :not(pre, [data-rehype-pretty-code-fragment])>code {
+    background-color: var(--vocs-color_inline-code-background);
+    color: var(--vocs-color_inline-code);
   }
 
   @media (prefers-color-scheme: light) {
-
     & pre[data-theme='dark'],
     & code[data-theme='dark'],
     & div[data-theme='dark'] {
@@ -171,7 +165,6 @@
   }
 
   @media (prefers-color-scheme: dark) {
-
     & pre[data-theme='light'],
     & code[data-theme='light'],
     & div[data-theme='light'] {
@@ -209,8 +202,8 @@
     }
 
     & [data-rehype-pretty-code-title]+pre {
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
     }
 
     & [data-line] {
@@ -267,37 +260,43 @@
       position: relative;
     }
 
-    & [data-line].diff:before {
+    & [data-line].diff::before {
       position: absolute;
       left: 10px;
     }
 
     & [data-line].diff.add {
-      background-color: rgba(16, 185, 129, .16);
+      background-color: rgb(16 185 129 / 16%);
     }
 
-    & [data-line].diff.add:before {
+    & [data-line].diff.add::before {
       content: "+";
       color: #3dd68c;
     }
 
     & [data-line].diff.remove {
-      background-color: rgba(244, 63, 94, 0.16);
+      background-color: rgb(244 63 94 / 16%);
       opacity: 0.6;
     }
 
     & [data-line].diff.remove>span {
       filter: grayscale(1);
     }
 
-    & [data-line].diff.remove:before {
+    & [data-line].diff.remove::before {
       content: "-";
       color: #f66f81;
     }
   }
 
-  .vocs pre {
-    margin-bottom: var(--vocs-space_16);
+  .vocs.vocs a>code {
+    color: var(--vocs-color_link);
+    text-decoration: underline;
+    text-underline-offset: var(--vocs-space_2);
+
+    &:hover {
+      color: var(--vocs-color_link-hover);
+    }
   }
 
   /************************************/
@@ -308,6 +307,7 @@
     margin-bottom: var(--vocs-space_16);
   }
 
+  /* stylelint-disable-next-line no-descending-specificity */
   .vocs .code-group [data-rehype-pretty-code-fragment],
   .vocs .code-group pre {
     margin-bottom: var(--vocs-space_0);

diff --git a/src/app/styles/layouts.css b/src/app/styles/layouts.css
@@ -6,26 +6,26 @@
     padding: var(--vocs-space_64) var(--vocs-space_16);
   }
 
-  @media screen and (max-width: 70ch) {
+  @media screen and (width <= 70ch) {
     .vocs article {
       padding: var(--vocs-space_48) var(--vocs-space_16);
 
       & pre {
-        border-radius: 0px;
+        border-radius: 0;
         margin-left: calc(var(--vocs-space_16) * -1);
         margin-right: calc(var(--vocs-space_16) * -1);
 
         && [data-line] {
           padding: var(--vocs-space_0) var(--vocs-space_16);
         }
 
-        && [data-line].diff:before {
+        && [data-line].diff::before {
           left: 6px;
         }
       }
 
       & .code-group {
-        border-radius: 0px;
+        border-radius: 0;
         margin-left: calc(var(--vocs-space_16) * -1);
         margin-right: calc(var(--vocs-space_16) * -1);
 
@@ -35,7 +35,7 @@
       }
 
       & [data-rehype-pretty-code-title] {
-        border-radius: 0px;
+        border-radius: 0;
         margin-left: calc(var(--vocs-space_16) * -1);
         margin-right: calc(var(--vocs-space_16) * -1);
         padding-left: var(--vocs-space_16);

diff --git a/src/app/styles/reset.css b/src/app/styles/reset.css
@@ -1,5 +1,4 @@
 @layer reset {
-
   *,
   ::before,
   ::after {
@@ -16,8 +15,7 @@
 
   html,
   body {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
     tab-size: 4;
     font-family: var(--vocs-fontFamily_default);
     font-feature-settings: "rlig" 1, "calt" 1;
@@ -119,7 +117,7 @@
   [type='button'],
   [type='reset'],
   [type='submit'] {
-    -webkit-appearance: button;
+    appearance: button;
     background-color: transparent;
     background-image: none;
   }
@@ -142,16 +140,16 @@
   }
 
   [type='search'] {
-    -webkit-appearance: textfield;
+    appearance: textfield;
     outline-offset: -2px;
   }
 
   ::-webkit-search-decoration {
-    -webkit-appearance: none;
+    appearance: none;
   }
 
   ::-webkit-file-upload-button {
-    -webkit-appearance: button;
+    appearance: button;
     font: inherit;
   }
 

diff --git a/src/app/styles/vars.css b/src/app/styles/vars.css
@@ -1,31 +1,30 @@
-@import "@radix-ui/colors/blue.css";
-@import "@radix-ui/colors/blue-dark.css";
-@import "@radix-ui/colors/blue-alpha.css";
-@import "@radix-ui/colors/yellow.css";
-@import "@radix-ui/colors/yellow-dark.css";
-@import "@radix-ui/colors/yellow-alpha.css";
-@import "@radix-ui/colors/red.css";
-@import "@radix-ui/colors/red-dark.css";
-@import "@radix-ui/colors/red-alpha.css";
-@import "@radix-ui/colors/green.css";
-@import "@radix-ui/colors/green-dark.css";
-@import "@radix-ui/colors/green-alpha.css";
-@import "@radix-ui/colors/iris.css";
-@import "@radix-ui/colors/iris-dark.css";
-@import "@radix-ui/colors/iris-alpha.css";
-@import "@radix-ui/colors/mauve.css";
-@import "@radix-ui/colors/mauve-dark.css";
-@import "@radix-ui/colors/gray.css";
-@import "@radix-ui/colors/gray-dark.css";
-@import "@radix-ui/colors/black-alpha.css";
-@import "@radix-ui/colors/white-alpha.css";
+@import url("@radix-ui/colors/blue.css");
+@import url("@radix-ui/colors/blue-dark.css");
+@import url("@radix-ui/colors/blue-alpha.css");
+@import url("@radix-ui/colors/yellow.css");
+@import url("@radix-ui/colors/yellow-dark.css");
+@import url("@radix-ui/colors/yellow-alpha.css");
+@import url("@radix-ui/colors/red.css");
+@import url("@radix-ui/colors/red-dark.css");
+@import url("@radix-ui/colors/red-alpha.css");
+@import url("@radix-ui/colors/green.css");
+@import url("@radix-ui/colors/green-dark.css");
+@import url("@radix-ui/colors/green-alpha.css");
+@import url("@radix-ui/colors/iris.css");
+@import url("@radix-ui/colors/iris-dark.css");
+@import url("@radix-ui/colors/iris-alpha.css");
+@import url("@radix-ui/colors/mauve.css");
+@import url("@radix-ui/colors/mauve-dark.css");
+@import url("@radix-ui/colors/gray.css");
+@import url("@radix-ui/colors/gray-dark.css");
+@import url("@radix-ui/colors/black-alpha.css");
+@import url("@radix-ui/colors/white-alpha.css");
 
 @layer vars {
-
   /* Primitive colors */
   :root {
-    --vocs-color_white: rgba(255, 255, 255, 1);
-    --vocs-color_black: rgba(0, 0, 0, 1);
+    --vocs-color_white: rgba(255 255 255 / 100%);
+    --vocs-color_black: rgba(0 0 0 / 100%);
     --vocs-color_accent: var(--iris-11);
     --vocs-color_accent-hover: var(--iris-12);
     --vocs-color_accent-tint: var(--iris-3);
@@ -55,9 +54,11 @@
 
   /* Semantic colors */
   :root {
+    /* Blockquotes */
     --vocs-color_blockquote-border: var(--vocs-color_border);
     --vocs-color_blockquote-text: var(--vocs-color_text-3);
 
+    /* Callouts */
     --vocs-color_danger-background: var(--red-a2);
     --vocs-color_danger-border: var(--red-a4);
     --vocs-color_danger-text: var(--red-11);
@@ -77,26 +78,29 @@
     --vocs-color_warning-border: var(--yellow-a5);
     --vocs-color_warning-text: var(--yellow-11);
 
+    /* Code */
     --vocs-color_inline-code: var(--vocs-color_accent);
     --vocs-color_inline-code-background: var(--vocs-color_accent-tint);
     --vocs-color_code-block-background: var(--vocs-color_background-2);
     --vocs-color_code-highlight-background: var(--vocs-color_background-3);
     --vocs-color_code-highlight-border: var(--gray-7);
     --vocs-color_line-number: var(--vocs-color_text-4);
 
+    /* Line breaks */
     --vocs-color_hr: var(--vocs-color_border);
 
+    /* Links */
     --vocs-color_link: var(--vocs-color_accent);
     --vocs-color_link-hover: var(--vocs-color_accent-hover);
 
+    /* Tables */
     --vocs-color_table-border: var(--vocs-color_border);
     --vocs-color_table-header-background: var(--vocs-color_background-2);
     --vocs-color_table-header-text: var(--vocs-color_text-2);
 
     &.dark {
       --vocs-color_code-highlight-background: var(--vocs-color_background-4);
       --vocs-color_code-highlight-border: var(--mauve-9);
-
       --vocs-color_danger-background: var(--red-a3);
       --vocs-color_info-background: var(--blue-a3);
       --vocs-color_success-background: var(--green-a3);
@@ -122,15 +126,13 @@
   /* Font sizes */
   :root {
     --vocs-fontSize_root: 16px;
-
     --vocs-fontSize_32: 2rem;
     --vocs-fontSize_24: 1.5rem;
     --vocs-fontSize_20: 1.25rem;
     --vocs-fontSize_18: 1.125rem;
     --vocs-fontSize_16: 1rem;
     --vocs-fontSize_15: 0.9375rem;
     --vocs-fontSize_14: 0.875rem;
-
     --vocs-fontSize_h1: var(--vocs-fontSize_32);
     --vocs-fontSize_h2: var(--vocs-fontSize_24);
     --vocs-fontSize_h3: var(--vocs-fontSize_20);