chore: support @tempad-dev/plugin

.eslintignore

@@ -1,4 +1,5 @@
 dist
 node_modules
 public
-extension
+extension
+plugin/lib

core/index.ts

@@ -0,0 +1,52 @@
+import { toTailwindcss } from 'transform-to-tailwindcss-core'
+import { toUnocssClass } from 'transform-to-unocss-core'
+
+export const transformToAtomic = (
+  style: Record<string, string>,
+  options: { engine: 'unocss' | 'tailwind'; isRem: boolean; prefix: string },
+) => {
+  const { engine = 'unocss', isRem = false, prefix = '' } = options
+  const raw = Object.entries(style)
+
+  const cssCode = raw.map(([key, value]) => `${key}: ${value.replace(/\/\*.*\*\//g, '').trim()};`).join('\n')
+
+  const uno = raw
+    .map(
+      ([key, value]) =>
+        `${key}: ${value
+          .replace(/\/\*.*\*\//g, '')
+          .replace(/var\(--[\w-]*,\s*(.*)\)/g, (_, $1) => $1)
+          .trim()}`,
+    )
+    .map((i) => (engine === 'unocss' ? toUnocssClass(i, isRem)[0] : toTailwindcss(i, isRem)))
+    .map((i) => `${prefix}${i}`)
+    .join(' ')
+    .replace(/border-(\d+\.\d+|\d+)/g, (_, $1) => `border-${Number($1) * 4}`)
+    .replace(/(border-[xylrtb]-)(\d+\.\d+|\d+)/g, (_, $1, $2) => `${$1}${Number($2) * 4}`)
+    .replace(/(p[xylrtb])-(\d+\.\d+|\d+)px/g, (_, $1, $2) => `${$1}-${$2 / 4}`)
+
+  const unoMini = raw
+    .filter(([key]) =>
+      ['font-feature-settings', 'font-family', 'text-transform'].every((item) => !key?.startsWith(item)),
+    )
+    .map(
+      ([key, value]) =>
+        `${key}: ${value
+          .replace(/\/\*.*\*\//g, '')
+          .replace(/var\(--[\w-]*,\s*(.*)\)/g, (_, $1) => $1)
+          .trim()}`,
+    )
+    .map((i) => (engine === 'unocss' ? toUnocssClass(i, isRem)[0] : toTailwindcss(i, isRem)))
+    .filter((i) => ['lh-normal', 'font-not-italic', 'bg-[url(]'].every((item) => !i?.startsWith(item)))
+    .map((i) => `${prefix}${i}`)
+    .join(' ')
+    .replace(/border-(\d+\.\d+|\d+)/g, (_, $1) => `border-${Number($1) * 4}`)
+    .replace(/(border-[xylrtb]-)(\d+\.\d+|\d+)/g, (_, $1, $2) => `${$1}${Number($2) * 4}`)
+    .replace(/(p[xylrtb])-(\d+\.\d+|\d+)px/g, (_, $1, $2) => `${$1}-${$2 / 4}`)
+
+  return {
+    cssCode,
+    uno,
+    unoMini,
+  }
+}

entrypoints/figma.ts

@@ -0,0 +1,35 @@
+export default defineUnlistedScript(async () => {
+  const markers = ['delete window.figma', '.createAPI()']
+
+  const current = document.currentScript as HTMLScriptElement
+  const src = current.src
+
+  function replaceScript(src: string) {
+    const script = document.createElement('script')
+    script.src = src
+    script.defer = true
+    current.replaceWith(script)
+  }
+
+  function matchFile(content: string) {
+    return markers.every((marker) => content.includes(marker))
+  }
+
+  try {
+    let content = await (await fetch(src)).text()
+
+    if (matchFile(content)) {
+      content = content.replace(/if\(!([a-zA-Z\d]+)\.userID\|\|/, 'if(true){}else if(!$1.userID||')
+    }
+
+    // document.currentScript will be `null` if we run with `new Function()`
+    content = content.replaceAll('document.currentScript.src', `"${src}"`)
+
+    // delete window.figma may throw Error in strict mode
+    content = content.replaceAll('delete window.figma', 'window.figma = undefined')
+
+    new Function(content)()
+  } catch (_) {
+    replaceScript(`${src}?fallback`)
+  }
+})

entrypoints/injected/components/Code.tsx

@@ -1,11 +1,10 @@
-import { ChevronDownIcon, DividerHorizontalIcon } from '@radix-ui/react-icons'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
 import { useAtom, useAtomValue } from 'jotai'
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Clipboard } from 'react-feather'
-import { toTailwindcss } from 'transform-to-tailwindcss-core'
-import { toUnocssClass } from 'transform-to-unocss-core'
 import { useCopyToClipboard } from 'usehooks-ts'
 
+import { transformToAtomic } from '@/core'
 import {
   cssEngine,
   cssUnit,
@@ -36,43 +35,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
     const cssObj = await node?.getCSSAsync?.()
     if (cssObj === undefined) return
 
-    const raw = Object.entries(cssObj)
-
-    const cssCode = raw.map(([key, value]) => `${key}: ${value.replace(/\/\*.*\*\//g, '').trim()};`).join('\n')
-
-    const uno = raw
-      .map(
-        ([key, value]) =>
-          `${key}: ${value
-            .replace(/\/\*.*\*\//g, '')
-            .replace(/var\(--[\w-]*,\s*(.*)\)/g, (_, $1) => $1)
-            .trim()}`,
-      )
-      .map((i) => (engine === 'unocss' ? toUnocssClass(i, isRem)[0] : toTailwindcss(i, isRem)))
-      .map((i) => `${prefix}${i}`)
-      .join(' ')
-      .replace(/border-(\d+\.\d+|\d+)/g, (_, $1) => `border-${Number($1) * 4}`)
-      .replace(/(border-[xylrtb]-)(\d+\.\d+|\d+)/g, (_, $1, $2) => `${$1}${Number($2) * 4}`)
-      .replace(/(p[xylrtb])-(\d+\.\d+|\d+)px/g, (_, $1, $2) => `${$1}-${$2 / 4}`)
-
-    const unoMini = raw
-      .filter(([key]) =>
-        ['font-feature-settings', 'font-family', 'text-transform'].every((item) => !key?.startsWith(item)),
-      )
-      .map(
-        ([key, value]) =>
-          `${key}: ${value
-            .replace(/\/\*.*\*\//g, '')
-            .replace(/var\(--[\w-]*,\s*(.*)\)/g, (_, $1) => $1)
-            .trim()}`,
-      )
-      .map((i) => (engine === 'unocss' ? toUnocssClass(i, isRem)[0] : toTailwindcss(i, isRem)))
-      .filter((i) => ['lh-normal', 'font-not-italic', 'bg-[url(]'].every((item) => !i?.startsWith(item)))
-      .map((i) => `${prefix}${i}`)
-      .join(' ')
-      .replace(/border-(\d+\.\d+|\d+)/g, (_, $1) => `border-${Number($1) * 4}`)
-      .replace(/(border-[xylrtb]-)(\d+\.\d+|\d+)/g, (_, $1, $2) => `${$1}${Number($2) * 4}`)
-      .replace(/(p[xylrtb])-(\d+\.\d+|\d+)px/g, (_, $1, $2) => `${$1}-${$2 / 4}`)
+    const { cssCode, uno, unoMini } = transformToAtomic(cssObj, { engine, isRem, prefix })
 
     setUnoResult([
       {

package.json

@@ -10,7 +10,8 @@
     "build:firefox": "wxt build --browser firefox",
     "zip": "wxt zip",
     "zip:firefox": "wxt zip --browser firefox",
-    "postinstall": "wxt prepare"
+    "postinstall": "wxt prepare",
+    "build:plugin": "rolldown -c rolldown.config.mjs"
   },
   "keywords": [],
   "author": "",
@@ -20,6 +21,7 @@
     "@iconify-json/fe": "^1.1.10",
     "@iconify-json/logos": "^1.1.42",
     "@iconify-json/mdi": "^1.1.68",
+    "@tempad-dev/plugins": "^0.1.0",
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/parser": "^7.0.2",
@@ -31,6 +33,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "prettier": "^3.2.5",
+    "rolldown": "0.14.0-snapshot-a07909e-20241111003354",
     "typescript": "^5.3.3",
     "unocss-preset-animations": "^1.0.1",
     "unocss-preset-shadcn": "^0.2.3",

plugin/index.ts

@@ -0,0 +1,17 @@
+import { definePlugin } from '@tempad-dev/plugins'
+
+import { transformToAtomic } from '../core/index'
+
+export default definePlugin({
+  name: 'core',
+  code: {
+    css: {
+      title: 'unocss',
+      lang: 'rust' as 'css',
+      transform({ style }) {
+        return transformToAtomic(style, { engine: 'unocss', isRem: true, prefix: '' }).uno
+      },
+    },
+    js: false,
+  },
+})