Upgrade packages and swap to pnpm

.changes/upgrade-packages.md

@@ -0,0 +1,5 @@
+---
+"obsidian-css-inlay-colors": patch:feat
+---
+
+Upgrades all packages and swaps to pnpm for development

.github/workflows/checks.yml

@@ -10,7 +10,7 @@ on:
       - "**/*.ts"
       - "package.json"
       - "tsconfig.json"
-      - "yarn.lock"
+      - "pnpm-lock.yaml"
       - ".github/workflows/checks.yml"
 
 concurrency:
@@ -21,21 +21,23 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - run: corepack enable
+      - uses: actions/checkout@v5
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          cache: yarn
-      - run: yarn install
-      - run: yarn biome ci --reporter=github --error-on-warnings
+          node-version-file: .nvmrc
+          cache: pnpm
+      - run: pnpm i
+      - run: pnpm biome ci --reporter=github --error-on-warnings
 
   typecheck:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - run: corepack enable
+      - uses: actions/checkout@v5
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          cache: yarn
-      - run: yarn install
-      - run: yarn tsc
+          node-version-file: .nvmrc
+          cache: pnpm
+      - run: pnpm i
+      - run: pnpm tsc

.github/workflows/release.yml

@@ -12,14 +12,15 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           fetch-depth: 0 # required for use of git history
-      - run: corepack enable
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          cache: yarn
-      - run: yarn install
+          node-version-file: .nvmrc
+          cache: pnpm
+      - run: pnpm i
       - uses: jbolda/covector/packages/action@covector-v0
         id: covector
         with:
@@ -30,7 +31,7 @@ jobs:
 
       # If versioning (creating a version PR)
       - name: update plugin manifest version
-        run: yarn run version
+        run: pnpm run version
         if: steps.covector.outputs.commandRan == 'version'
       - name: create pr
         uses: peter-evans/create-pull-request@v6
@@ -43,7 +44,7 @@ jobs:
           body: ${{ steps.covector.outputs.change }}
 
       # If publishing (creating a release)
-      - run: yarn build
+      - run: pnpm build
         if: steps.covector.outputs.commandRan == 'publish' && steps.covector.outputs.published-obsidian-css-inlay-colors == 'true'
       - uses: xresloader/upload-to-github-release@v1.6.0
         if: steps.covector.outputs.commandRan == 'publish' && steps.covector.outputs.published-obsidian-css-inlay-colors == 'true'

.github/workflows/status.yml

@@ -6,7 +6,7 @@ jobs:
   covector:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           fetch-depth: 0 # required for use of git history
       - uses: jbolda/covector/packages/action@covector-v0

.nvmrc

@@ -0,0 +1 @@
+v22.19.0

.yarnrc.yml

@@ -1,2 +0,0 @@
-nodeLinker: node-modules
-compressionLevel: mixed

README.md

@@ -26,4 +26,4 @@ Customize the inlays by targeting the `.css-color-inlay` class. For example, you
 
 ## Development
 
-This project uses Biome and Yarn for linting/formatting and package management. Run `yarn dev` to build on changes.
+This project uses [Biome](https://biomejs.dev/) for linting/formatting and [pnpm](https://pnpm.io/) for package management. Run `pnpm dev` to build on changes.

biome.json

@@ -6,9 +6,7 @@
     "useIgnoreFile": true,
     "defaultBranch": "main"
   },
-  "organizeImports": {
-    "enabled": true
-  },
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
   "linter": {
     "enabled": true,
     "rules": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "obsidian-css-inlay-colors",
   "version": "1.2.0",
-  "packageManager": "yarn@4.4.0",
+  "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67",
   "description": "Show inline color hints for CSS colors",
   "main": "main.js",
   "scripts": {
@@ -29,20 +29,20 @@
     "url": "https://github.com/GRA0007/obsidian-css-inlay-colors.git"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.8.3",
-    "@types/culori": "^2.1.1",
-    "@types/node": "^20.14.11",
-    "builtin-modules": "3.3.0",
-    "covector": "^0.12.2",
-    "esbuild": "0.23.0",
+    "@biomejs/biome": "^2.2.2",
+    "@types/culori": "^4.0.0",
+    "@types/node": "^24.3.0",
+    "builtin-modules": "5.0.0",
+    "covector": "^0.12.4",
+    "esbuild": "0.25.9",
     "obsidian": "latest",
-    "tslib": "2.6.3",
-    "typescript": "5.5.3"
+    "tslib": "2.8.1",
+    "typescript": "5.9.2"
   },
   "dependencies": {
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.28.5",
-    "culori": "^4.0.1"
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.2",
+    "culori": "^4.0.2"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - '@biomejs/biome'
+  - esbuild

src/formatColor.ts

@@ -2,7 +2,7 @@ import { type Color, converter, formatCss, round } from 'culori'
 
 const twoDecimals = round(2)
 const fourDecimals = round(4)
-const re = /[0-9\.%]+/g
+const re = /[0-9.%]+/g
 
 /** Format a hex the same as an existing color format */
 export const formatColor = (

styles.css

@@ -3,10 +3,10 @@
   width: 1em;
   border: 1px solid currentColor;
   display: inline-block;
-  border-radius: .2em;
+  border-radius: 0.2em;
   vertical-align: middle;
-  margin-right: .3em;
-  margin-top: -.1em;
+  margin-right: 0.3em;
+  margin-top: -0.1em;
   background: var(--css-color-inlay-color);
 
   &.css-color-name-hidden {
@@ -21,7 +21,9 @@
 }
 
 /* Make inlay colors in the live editor appear part of the code block */
-.css-color-wrapper:not(:has(.css-color-name-hidden)).cm-inline-code:not(.cm-formatting) {
+.css-color-wrapper:not(:has(.css-color-name-hidden)).cm-inline-code:not(
+    .cm-formatting
+  ) {
   padding-inline-end: 0;
   border-start-end-radius: 0;
   border-end-end-radius: 0;

tsconfig.json

@@ -13,7 +13,7 @@
     "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
-    "lib": ["DOM", "ES5", "ES6", "ES7"]
+    "lib": ["DOM", "ES5", "ES6", "ES7", "ES2024"]
   },
   "include": ["**/*.ts"]
 }