feat(npm): customization API (#334)

nix/yarn-project.nix

@@ -55,7 +55,7 @@ let
       rm $out/.gitignore
     '';
     outputHashMode = "recursive";
-    outputHash = "sha512-DQfyyyYwGGUApuDW868/dfk5DUsMj/LdkDNoxJTqy/gLAKqIKwl9LBOt31cbEWmPqWNcgX/z8b2GTJM8nAvUsQ==";
+    outputHash = "sha512-1nPLkC50PWtZZsp9eVO1T5iipwLrM74RqubgYEGUOrWe1v7zxmRs/EZli/U63gG59k10NmnkECP/p+LYOjrdTw==";
   };
 
   # Main project derivation.

packages/catppuccin-vscode/.gitignore

@@ -1 +1 @@
-themes/
+dist/

packages/catppuccin-vscode/README.md

@@ -15,19 +15,48 @@ Simple NPM package containing all compiled themes of [Catppuccin for VSCode](htt
 
 ### Usage
 
+You can use these definitions with libraries like [Shiki](https://github.com/shikijs/shiki) and [Shikiji](https://github.com/antfu/shikiji).
+
 Import in Node:
 
 ```ts
-import ctpMocha from "@catppuccin/vscode/themes/mocha.json" with { type: "json" };
+// the themes with default options
+import { latte, frappe, macchiato, mocha } from "@catppuccin/vscode";
+
+// the compile function to customize your theme
+import { compile } from "@catppuccin/vscode";
 ```
 
 Import via a CDN, e.g. in Deno:
 
 ```ts
-import ctpLatte from "https://esm.sh/@catppuccin/vscode/themes/latte.json" with { type: "json" };
+// the themes with default options
+import {
+  latte,
+  frappe,
+  macchiato,
+  mocha,
+} from "https://esm.sh/@catppuccin/vscode";
+
+// the compile function to customize your theme
+import { compile } from "https://esm.sh/@catppuccin/vscode";
 ```
 
-You can use these JSON files with libraries like [Shiki](https://github.com/shikijs/shiki) and [Shikiji](https://github.com/antfu/shikiji).
+### API
+
+To customize the theme, you can use the `compile()` function, optionally passing in [options that the VSCode theme supports](https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc#catppuccin-settings).
+
+```ts
+const myMocha = compile("mocha", {
+  colorOverrides: {
+    mocha: {
+      base: "#000000",
+      mantle: "#010101",
+      crust: "#020202",
+    },
+  },
+});
+```
 
  
 

packages/catppuccin-vscode/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@catppuccin/vscode",
   "version": "3.11.2",
-  "description": "🦌 Soothing pastel theme for VSCode, precompiled JSON version",
+  "description": "🦌 Soothing pastel theme for VSCode, NPM version",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -15,13 +15,31 @@
     "directory": "packages/catppuccin-vscode"
   },
   "files": [
+    "dist/*",
     "themes/*"
   ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@catppuccin/palette": "^1.1.0"
+  },
   "devDependencies": {
-    "catppuccin-vsc": "workspace:*"
+    "@tsconfig/node20": "^20.1.2",
+    "@types/node": "^20.11.20",
+    "catppuccin-vsc": "workspace:*",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3"
   },
   "scripts": {
+    "build": "yarn tsup",
     "compiled:pack": "npm pack",
-    "prepack": "yarn core:build && yarn node ./build.js"
+    "prepack": "yarn core:build && yarn build"
   }
 }

packages/catppuccin-vscode/src/compile.ts

@@ -0,0 +1,11 @@
+import { ThemeOptions } from "catppuccin-vsc/src/types";
+import { FlavorName } from "@catppuccin/palette";
+import { compileTheme, defaultOptions } from "catppuccin-vsc/src/theme";
+
+export const compile = (
+  flavor: FlavorName,
+  overrides: Partial<ThemeOptions> = {},
+) => {
+  const options = { ...defaultOptions, ...overrides };
+  return compileTheme(flavor, options);
+};

packages/catppuccin-vscode/src/index.ts

@@ -0,0 +1,6 @@
+export { default as latte } from "catppuccin-vsc/themes/latte.json" with { type: "json" };
+export { default as frappe } from "catppuccin-vsc/themes/frappe.json" with { type: "json" };
+export { default as macchiato } from "catppuccin-vsc/themes/macchiato.json" with { type: "json" };
+export { default as mocha } from "catppuccin-vsc/themes/mocha.json" with { type: "json" };
+
+export { compile } from "./compile.js";

packages/catppuccin-vscode/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "Node",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["../catppuccin-vsc/src/*"]
+    },
+    "resolveJsonModule": true
+  }
+}

packages/catppuccin-vscode/tsup.config.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://cdn.jsdelivr.net/npm/tsup/schema.json",
+  "clean": true,
+  "entryPoints": ["src/index.ts", "src/compile.ts"],
+  "format": ["esm", "cjs"],
+  "dts": {
+    "resolve": true
+  },
+  "minify": false,
+  "sourcemap": false,
+  "target": "node16"
+}

yarn.lock

@@ -1577,7 +1577,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@catppuccin/vscode@workspace:packages/catppuccin-vscode"
   dependencies:
+    "@catppuccin/palette": "npm:^1.1.0"
+    "@tsconfig/node20": "npm:^20.1.2"
+    "@types/node": "npm:^20.11.20"
     catppuccin-vsc: "workspace:*"
+    tsup: "npm:^8.0.2"
+    typescript: "npm:^5.3.3"
   languageName: unknown
   linkType: soft
 
@@ -3858,6 +3863,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tsconfig/node20@npm:^20.1.2":
+  version: 20.1.2
+  resolution: "@tsconfig/node20@npm:20.1.2"
+  checksum: 10c0/e438fa9b93f0e6ea667affbbd3217692bf3f92db1b3dcbfba1dd141a7dbcd647c19ed87ce76871c723bed398759ec4a5590685f3e669b600c9371f143a19e0c1
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.18.0":
   version: 7.20.3
   resolution: "@types/babel__core@npm:7.20.3"
@@ -7095,7 +7107,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function-bind@npm:^1.1.1, function-bind@npm:^1.1.2":
+"function-bind@npm:^1.1.2":
   version: 1.1.2
   resolution: "function-bind@npm:1.1.2"
   checksum: 10c0/d8680ee1e5fcd4c197e4ac33b2b4dce03c71f4d91717292785703db200f5c21f977c568d28061226f9b5900cbcd2c84463646134fd5337e7925e0942bc3f46d5
@@ -7452,15 +7464,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has@npm:1.0.3"
-  dependencies:
-    function-bind: "npm:^1.1.1"
-  checksum: 10c0/e1da0d2bd109f116b632f27782cf23182b42f14972ca9540e4c5aa7e52647407a0a4a76937334fddcb56befe94a3494825ec22b19b51f5e5507c3153fd1a5e1b
-  languageName: node
-  linkType: hard
-
 "hasown@npm:^2.0.0":
   version: 2.0.0
   resolution: "hasown@npm:2.0.0"
@@ -7750,11 +7753,11 @@ __metadata:
   linkType: hard
 
 "is-core-module@npm:^2.13.0":
-  version: 2.13.0
-  resolution: "is-core-module@npm:2.13.0"
+  version: 2.13.1
+  resolution: "is-core-module@npm:2.13.1"
   dependencies:
-    has: "npm:^1.0.3"
-  checksum: 10c0/a8e7f46f8cefd7c9f6f5d54f3dbf1c40bf79467b6612d6023421ec6ea7e8e4c22593b3963ff7a3f770db07bc19fccbe7987a550a8bc1a4d6ec4115db5e4c5dca
+    hasown: "npm:^2.0.0"
+  checksum: 10c0/2cba9903aaa52718f11c4896dabc189bab980870aae86a62dc0d5cedb546896770ee946fb14c84b7adf0735f5eaea4277243f1b95f5cefa90054f92fbcac2518
   languageName: node
   linkType: hard