feat: make it works

.vscode/tasks.json

@@ -10,17 +10,35 @@
       "presentation": {
         "reveal": "never"
       },
-      "problemMatcher": [
-        {
-          "base": "$ts-webpack-watch",
-          "background": {
-            "activeOnStart": true,
-            "beginsPattern": "Build start",
-            "endsPattern": "Build success"
-          }
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          // TODO: correct "regexp"
+          "regexp": "^([a-zA-Z]\\:/?([\\w\\-]/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Build start",
+          "endsPattern": "Build success"
         }
-      ],
-      "group": "build"
+      }
+      // "problemMatcher": [
+      //   {
+      //     "owner": "typescript",
+      //     "fileLocation": "relative",
+      //     "background": {
+      //       "activeOnStart": true,
+      //       "beginsPattern": "Build start",
+      //       "endsPattern": "Build success"
+      //     }
+      //   }
+      // ]
     }
   ]
 }

eslint.config.mjs

@@ -1,3 +1,5 @@
 import { defineEslintConfig } from '@subframe7536/eslint-config'
 
-export default defineEslintConfig()
+export default defineEslintConfig({
+  type: 'app',
+})

package.json

@@ -1,11 +1,11 @@
 {
   "publisher": "[email protected]",
   "name": "custom-ui-style",
-  "displayName": "custom-ui-style",
+  "displayName": "Custom UI Style",
   "version": "0.0.0",
   "private": true,
   "packageManager": "[email protected]",
-  "description": "",
+  "description": "Custom ui css style in both editor and webview, unify global font family, setup background image",
   "author": "subframe7536 <[email protected]>",
   "license": "MIT",
   "homepage": "https://github.com/subframe7536/custom-ui-style#readme",
@@ -32,31 +32,122 @@
   "activationEvents": [
     "onStartupFinished"
   ],
+  "extensionKind": [
+    "ui",
+    "workspace"
+  ],
   "contributes": {
-    "commands": [],
+    "commands": [
+      {
+        "command": "custom-ui-style.reload",
+        "title": "Custom UI Style: Load custom style"
+      },
+      {
+        "command": "custom-ui-style.rollback",
+        "title": "Custom UI Style: Rollback"
+      }
+    ],
     "configuration": {
       "type": "object",
-      "title": "custom-ui-style",
-      "properties": {}
+      "title": "Custom UI Style",
+      "properties": {
+        "custom-ui-style.monospace": {
+          "type": "string",
+          "title": "Custom global monospace font family"
+        },
+        "custom-ui-style.sansSerif": {
+          "type": "string",
+          "title": "Custom global sans-serif font family"
+        },
+        "custom-ui-style.backgroundUrl": {
+          "type": "string",
+          "pattern": "^(https://|file://|data:)",
+          "patternErrorMessage": "Only allow https: file:// data:",
+          "title": "Custom background image url"
+        },
+        "custom-ui-style.backgroundUrlWin32": {
+          "type": "string",
+          "pattern": "^(https://|file://|data:)",
+          "patternErrorMessage": "Only allow https: file:// data:",
+          "title": "Custom background image url (For Windows)"
+        },
+        "custom-ui-style.backgroundUrlDarWin": {
+          "type": "string",
+          "pattern": "^(https://|file://|data:)",
+          "patternErrorMessage": "Only allow https: file:// data:",
+          "title": "Custom background image url (For MacOS)"
+        },
+        "custom-ui-style.backgroundUrlLinux": {
+          "type": "string",
+          "pattern": "^(https://|file://|data:)",
+          "patternErrorMessage": "Only allow https: file:// data:",
+          "title": "Custom background image url (For Linux)"
+        },
+        "custom-ui-style.backgroundOpacity": {
+          "type": "number",
+          "title": "Custom background image opacity",
+          "default": 0.9
+        },
+        "custom-ui-style.backgroundSize": {
+          "type": "string",
+          "enum": [
+            "cover",
+            "contain"
+          ],
+          "title": "Custom background image size",
+          "default": "cover"
+        },
+        "custom-ui-style.backgroundPosition": {
+          "type": "string",
+          "title": "Custom background image size",
+          "default": "center"
+        },
+        "custom-ui-style.stylesheet": {
+          "type": "object",
+          "title": "Custom css",
+          "description": "support nest selectors"
+        },
+        "custom-ui-style.webviewMonospaceSelector": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "title": "Custom monospace selector in webview"
+        },
+        "custom-ui-style.webviewSansSerifSelector": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "title": "Custom sans-serif selector in webview"
+        },
+        "custom-ui-style.webviewStylesheet": {
+          "type": "object",
+          "title": "Custom css",
+          "description": "support nest selectors"
+        }
+      }
     }
   },
   "scripts": {
-    "build": "tsup src/index.ts --external vscode",
-    "dev": "pnpm run build --watch",
+    "build": "tsup --treeshake",
+    "dev": "tsup --watch",
     "prepare": "pnpm run update",
     "update": "vscode-ext-gen --output src/generated/meta.ts",
     "format": "eslint . --fix",
     "vscode:prepublish": "pnpm run build",
     "publish": "vsce publish --no-dependencies",
     "pack": "vsce package --no-dependencies",
     "typecheck": "tsc --noEmit",
-    "release": "bumpp && pnpm publish"
+    "release": "bumpp && pnpm run publish"
   },
   "devDependencies": {
     "@subframe7536/eslint-config": "^0.9.4",
+    "@subframe7536/type-utils": "^0.1.6",
     "@types/node": "^20.16.11",
     "@types/vscode": "^1.94.0",
     "@vscode/vsce": "^3.1.1",
+    "atomically": "^2.0.3",
     "bumpp": "^9.7.1",
     "eslint": "^9.12.0",
     "reactive-vscode": "^0.2.5",

src/config.ts

@@ -5,3 +5,13 @@ export const config = defineConfigObject<Meta.ScopedConfigKeyTypeMap>(
   Meta.scopedConfigs.scope,
   Meta.scopedConfigs.defaults,
 )
+
+export const editorConfig = defineConfigObject('editor', {
+  fontFamily: String,
+})
+
+export function getFamilies() {
+  let { monospace, sansSerif } = config
+  monospace ||= editorConfig.fontFamily
+  return { monospace, sansSerif }
+}

src/index.ts

@@ -1,8 +1,25 @@
-import { defineExtension } from 'reactive-vscode'
-import { window } from 'vscode'
+import { defineExtension, useCommand, watch } from 'reactive-vscode'
+import { config, editorConfig } from './config'
+import * as Meta from './generated/meta'
+import { createFileManagers } from './manager'
 
 const { activate, deactivate } = defineExtension(() => {
-  window.showInformationMessage('Hello')
+  const { reload, rollback } = createFileManagers()
+  useCommand(Meta.commands.reload, () => {
+    reload('UI style changed')
+  })
+  useCommand(Meta.commands.rollback, () => {
+    rollback('UI style rollback')
+  })
+
+  watch(
+    () => editorConfig.fontFamily,
+    () => !config.monospace && reload('Configuration changed, reload'),
+  )
+  watch(
+    config,
+    () => reload('Configuration changed, reload'),
+  )
 })
 
 export { activate, deactivate }