@plumeria/vite-plugin 0.29.0 → 1.0.1

package/dist/index.d.ts

@@ -1,2 +1,6 @@
-import type { PluginOption } from 'vite';
-export default function plumeria(): PluginOption;
+import type { Plugin, FilterPattern } from 'vite';
+export interface PluginOptions {
+    include?: FilterPattern;
+    exclude?: FilterPattern;
+}
+export declare function plumeria(options?: PluginOptions): Plugin;

package/dist/index.js

@@ -1,6 +1,22 @@
-export default function plumeria() {
+import { createFilter } from 'vite';
+import { parseSync } from '@swc/core';
+import path from 'path';
+import { transpile } from 'zss-engine';
+import { createCSS, createTokens, collectLocalConsts, objectExpressionToObject, scanForDefineConsts, scanForDefineTokens, scanForKeyframes, scanForViewTransition, t, tables, traverse, } from '@plumeria/utils';
+const TARGET_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx', 'vue', 'svelte'];
+const EXTENSION_PATTERN = /\.(ts|tsx|js|jsx|vue|svelte)$/;
+export function plumeria(options = {}) {
+    const { include, exclude } = options;
+    const filter = createFilter(include, exclude);
+    const cssLookup = new Map();
+    const cssFileLookup = new Map();
+    const targets = [];
+    let config;
+    let devServer;
     return {
         name: '@plumeria/vite-plugin',
+        apply: 'serve',
+        enforce: 'pre',
         config: ({ build = {} }) => ({
             build: {
                 ...build,
@@ -13,5 +29,184 @@ export default function plumeria() {
                 },
             },
         }),
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
+        configureServer(_server) {
+            devServer = _server;
+        },
+        resolveId(importeeUrl) {
+            const [id] = importeeUrl.split('?', 1);
+            if (cssLookup.has(id)) {
+                return id;
+            }
+            return cssFileLookup.get(id);
+        },
+        load(url) {
+            const [id] = url.split('?', 1);
+            return cssLookup.get(id);
+        },
+        handleHotUpdate(ctx) {
+            if (ctx.modules.length) {
+                return ctx.modules;
+            }
+            const affected = targets.filter((target) => target.dependencies.some((dep) => dep === ctx.file));
+            return affected
+                .map((target) => devServer.moduleGraph.getModuleById(target.id))
+                .filter((m) => !!m)
+                .concat(ctx.modules);
+        },
+        transform(source, url) {
+            const [id] = url.split('?', 1);
+            if (id.includes('node_modules')) {
+                return null;
+            }
+            if (url.includes('?')) {
+                return null;
+            }
+            const ext = path.extname(id).slice(1);
+            if (!TARGET_EXTENSIONS.includes(ext)) {
+                return null;
+            }
+            if (!filter(id)) {
+                return null;
+            }
+            const dependencies = [];
+            const addDependency = (depPath) => {
+                dependencies.push(depPath);
+                this.addWatchFile(depPath);
+            };
+            tables.constTable = scanForDefineConsts(addDependency);
+            const { keyframesHashTableLocal, keyframesObjectTableLocal } = scanForKeyframes(addDependency);
+            tables.keyframesHashTable = keyframesHashTableLocal;
+            tables.keyframesObjectTable = keyframesObjectTableLocal;
+            const { viewTransitionHashTableLocal, viewTransitionObjectTableLocal } = scanForViewTransition(addDependency);
+            tables.viewTransitionHashTable = viewTransitionHashTableLocal;
+            tables.viewTransitionObjectTable = viewTransitionObjectTableLocal;
+            const { tokensTableLocal, defineTokensObjectTableLocal } = scanForDefineTokens(addDependency);
+            tables.tokensTable = tokensTableLocal;
+            tables.defineTokensObjectTable = defineTokensObjectTableLocal;
+            const extractedObjects = [];
+            let ast;
+            const scriptContents = getScriptContents(source, id);
+            for (const content of scriptContents) {
+                if (!content.trim()) {
+                    continue;
+                }
+                try {
+                    ast = parseSync(content, {
+                        syntax: 'typescript',
+                        tsx: true,
+                        target: 'es2022',
+                    });
+                }
+                catch (err) {
+                    console.warn(`Zero Styled: Parse error in ${id}`, err);
+                    continue;
+                }
+                const localConsts = collectLocalConsts(ast);
+                Object.assign(tables.constTable, localConsts);
+                traverse(ast, {
+                    CallExpression({ node }) {
+                        const callee = node.callee;
+                        if (t.isMemberExpression(callee) &&
+                            t.isIdentifier(callee.object, { name: 'css' }) &&
+                            t.isIdentifier(callee.property)) {
+                            const args = node.arguments;
+                            if (callee.property.value === 'create' &&
+                                args.length === 1 &&
+                                t.isObjectExpression(args[0].expression)) {
+                                const obj = objectExpressionToObject(args[0].expression, tables.constTable, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.tokensTable);
+                                if (obj) {
+                                    extractedObjects.push(obj);
+                                }
+                            }
+                        }
+                    },
+                });
+            }
+            const fileStyles = {};
+            if (extractedObjects.length > 0) {
+                const combinedStyles = extractedObjects.reduce((acc, obj) => Object.assign(acc, obj), {});
+                const base = createCSS(combinedStyles);
+                if (base)
+                    fileStyles.baseStyles = base;
+            }
+            if (Object.keys(tables.keyframesObjectTable).length > 0) {
+                fileStyles.keyframeStyles = Object.entries(tables.keyframesObjectTable)
+                    .map(([hash, obj]) => transpile({ [`@keyframes kf-${hash}`]: obj }, undefined, '--global').styleSheet)
+                    .join('\n');
+            }
+            if (Object.keys(tables.viewTransitionObjectTable).length > 0) {
+                fileStyles.viewTransitionStyles = Object.entries(tables.viewTransitionObjectTable)
+                    .map(([hash, obj]) => transpile({
+                    [`::view-transition-group(vt-${hash})`]: obj.group,
+                    [`::view-transition-image-pair(vt-${hash})`]: obj.imagePair,
+                    [`::view-transition-old(vt-${hash})`]: obj.old,
+                    [`::view-transition-new(vt-${hash})`]: obj.new,
+                }, undefined, '--global').styleSheet)
+                    .join('\n');
+            }
+            if (Object.keys(tables.defineTokensObjectTable).length > 0) {
+                fileStyles.tokenStyles = Object.values(tables.defineTokensObjectTable)
+                    .map((obj) => transpile(createTokens(obj), undefined, '--global').styleSheet)
+                    .join('\n');
+            }
+            const sections = [];
+            if (fileStyles.keyframeStyles?.trim())
+                sections.push(fileStyles.keyframeStyles);
+            if (fileStyles.viewTransitionStyles?.trim())
+                sections.push(fileStyles.viewTransitionStyles);
+            if (fileStyles.tokenStyles?.trim())
+                sections.push(fileStyles.tokenStyles);
+            if (fileStyles.baseStyles?.trim())
+                sections.push(fileStyles.baseStyles);
+            const generatedCSS = sections.join('\n');
+            if (!generatedCSS) {
+                return null;
+            }
+            const cssFilename = path
+                .normalize(`${id.replace(EXTENSION_PATTERN, '')}.zero.css`)
+                .replace(/\\/g, path.posix.sep);
+            const cssRelativePath = path
+                .relative(config.root, cssFilename)
+                .replace(/\\/g, path.posix.sep);
+            const cssId = `/${cssRelativePath}`;
+            cssLookup.set(cssFilename, generatedCSS);
+            cssFileLookup.set(cssId, cssFilename);
+            const targetIndex = targets.findIndex((t) => t.id === id);
+            if (targetIndex !== -1) {
+                targets[targetIndex].dependencies = dependencies;
+            }
+            else {
+                targets.push({ id, dependencies });
+            }
+            if (devServer?.moduleGraph) {
+                const cssModule = devServer.moduleGraph.getModuleById(cssFilename);
+                if (cssModule) {
+                    devServer.reloadModule(cssModule);
+                }
+            }
+            return {
+                code: injectImport(source, id, cssFilename),
+                map: null,
+            };
+        },
     };
 }
+function getScriptContents(code, id) {
+    if (id.endsWith('.vue') || id.endsWith('.svelte')) {
+        const matches = code.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/g);
+        return Array.from(matches).map((match) => match[1]);
+    }
+    return [code];
+}
+function injectImport(code, id, importPath) {
+    const importStmt = `\nimport ${JSON.stringify(importPath)};`;
+    if (id.endsWith('.vue') || id.endsWith('.svelte')) {
+        return code.replace(/(<script[^>]*>)([\s\S]*?)(<\/script>)/, (_match, open, content, close) => {
+            return `${open}${content}${importStmt}\n${close}`;
+        });
+    }
+    return `${code}${importStmt}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/vite-plugin",
-  "version": "0.29.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "Plumeria Vite plugin",
   "repository": {
@@ -14,8 +14,13 @@
   "files": [
     "dist/"
   ],
+  "dependencies": {
+    "@plumeria/utils": "^1.0.1"
+  },
   "devDependencies": {
-    "vite": "^7.1.1"
+    "@swc/core": "1.15.2",
+    "vite": "^7.1.1",
+    "zss-engine": "1.0.0"
   },
   "publishConfig": {
     "access": "public",