@plumeria/compiler 0.24.5 → 0.25.1

package/dist/extract.js

@@ -7,6 +7,7 @@ exports.generatedTsMap = void 0;
 exports.extractTSFile = extractTSFile;
 exports.restoreAllOriginals = restoreAllOriginals;
 exports.extractVueAndSvelte = extractVueAndSvelte;
+const core_1 = require("@swc/core");
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const generatedTsMap = new Map();
@@ -115,171 +116,267 @@ function isInHtmlText(code, position) {
     }
     return lastCloseTag > lastOpenTag && nextOpenTag > position;
 }
-function extractCssProps(code) {
-    const propsMatches = [];
-    const regex = /css\.props\s*\(/g;
-    let match;
-    while ((match = regex.exec(code))) {
-        if (isInComment(code, match.index) ||
-            isInString(code, match.index) ||
-            isInHtmlText(code, match.index)) {
-            continue;
-        }
-        const startIndex = match.index + match[0].length;
-        let parenCount = 1;
-        let currentIndex = startIndex;
-        let args = '';
-        while (parenCount > 0 && currentIndex < code.length) {
-            const char = code[currentIndex];
-            if (char === '(') {
-                parenCount++;
-            }
-            else if (char === ')') {
-                parenCount--;
+function expressionToString(expr) {
+    switch (expr.type) {
+        case 'Identifier':
+            return expr.value;
+        case 'MemberExpression': {
+            const obj = expressionToString(expr.object);
+            if (obj && expr.property.type === 'Identifier') {
+                return `${obj}.${expr.property.value}`;
             }
-            if (parenCount > 0 || char !== ')') {
-                args += char;
+            break;
+        }
+        case 'CallExpression': {
+            if (expr.callee.type !== 'Super' && expr.callee.type !== 'Import') {
+                const callee = expressionToString(expr.callee);
+                if (callee) {
+                    const args = expr.arguments
+                        .map((arg) => expressionToString(arg.expression))
+                        .join(', ');
+                    return `${callee}(${args})`;
+                }
             }
-            currentIndex++;
+            break;
         }
-        if (parenCount === 0) {
-            const originalArgs = args.split(/\s*,\s*(?![^(]*\))/);
-            const staticArgs = [];
-            const conditionalStyleObjects = [];
-            for (const arg of originalArgs) {
-                const trimmedArg = arg.trim();
-                if (trimmedArg) {
-                    if (trimmedArg.includes('&&') || trimmedArg.includes('?')) {
-                        const styles = parseCssPropsArguments(trimmedArg);
-                        conditionalStyleObjects.push(...styles);
+        case 'ObjectExpression': {
+            const properties = expr.properties
+                .map((prop) => {
+                if ('key' in prop && prop.key && prop.key.type === 'Identifier') {
+                    const key = prop.key.value;
+                    const value = expressionToString(prop.value);
+                    return `${key}: ${value}`;
+                }
+                return '[complex property]';
+            })
+                .join(', ');
+            console.warn(`css.props: Argument unsupported ${expr.type}: { ${properties} } Use css.create instead.`);
+            return '';
+        }
+        case 'StringLiteral':
+            return String(expr.value);
+    }
+    console.warn(`css.props: Argument unsupported ${expr.type}: Use css.create instead.`);
+    return '';
+}
+function extractCssProps(ast) {
+    const propsMatches = [];
+    try {
+        visit(ast, {
+            CallExpression: (node) => {
+                if (node.callee.type === 'MemberExpression' &&
+                    node.callee.object.type === 'Identifier' &&
+                    node.callee.object.value === 'css' &&
+                    node.callee.property.type === 'Identifier' &&
+                    node.callee.property.value === 'props') {
+                    const staticArgs = [];
+                    const conditionalStyleObjects = [];
+                    for (const arg of node.arguments) {
+                        if (arg.expression) {
+                            if (arg.expression.type === 'ConditionalExpression' ||
+                                (arg.expression.type === 'BinaryExpression' &&
+                                    arg.expression.operator === '&&')) {
+                                const styles = extractStyleObjectsFromExpression(arg.expression);
+                                conditionalStyleObjects.push(...styles);
+                            }
+                            else {
+                                const argStr = expressionToString(arg.expression);
+                                if (argStr) {
+                                    staticArgs.push(argStr);
+                                }
+                            }
+                        }
+                    }
+                    if (staticArgs.length > 0) {
+                        propsMatches.push(`css.props(${staticArgs.join(', ')})`);
                     }
-                    else {
-                        staticArgs.push(trimmedArg);
+                    for (const styleObj of conditionalStyleObjects) {
+                        if (styleObj &&
+                            styleObj !== 'false' &&
+                            styleObj !== 'null' &&
+                            styleObj !== 'undefined') {
+                            propsMatches.push(`css.props(${styleObj})`);
+                        }
                     }
                 }
+            },
+        });
+    }
+    catch (e) {
+        console.error(`Failed to parse code to extract css.props: ${e}`);
+    }
+    return propsMatches;
+}
+function extractStyleObjectsFromExpression(expression) {
+    switch (expression.type) {
+        case 'BinaryExpression':
+            if (expression.operator === '&&') {
+                return extractStyleObjectsFromExpression(expression.right);
             }
-            if (staticArgs.length > 0) {
-                propsMatches.push(`css.props(${staticArgs.join(', ')})`);
-            }
-            for (const styleObj of conditionalStyleObjects) {
-                if (styleObj &&
-                    styleObj !== 'false' &&
-                    styleObj !== 'null' &&
-                    styleObj !== 'undefined') {
-                    propsMatches.push(`css.props(${styleObj})`);
-                }
+            break;
+        case 'ConditionalExpression':
+            return [
+                ...extractStyleObjectsFromExpression(expression.consequent),
+                ...extractStyleObjectsFromExpression(expression.alternate),
+            ];
+        case 'BooleanLiteral':
+        case 'NullLiteral':
+            return [];
+        case 'Identifier':
+            if (expression.value === 'undefined') {
+                return [];
             }
+        case 'ObjectExpression': {
+            const str = expressionToString(expression);
+            return str ? [str] : [];
         }
     }
-    return propsMatches;
+    const str = expressionToString(expression);
+    if (str) {
+        return [str];
+    }
+    return [];
 }
-function extractStaticStringLiteralVariable(code) {
+function extractStaticStringLiteralVariable(ast) {
     const matches = [];
-    const regex = /\b(?:var|let|const)\s+[a-zA-Z_$][\w$]*\s*=\s*(['"])(.*?)\1\s*;?/gm;
-    let match;
-    while ((match = regex.exec(code))) {
-        const index = match.index;
-        if (isInComment(code, index) ||
-            isInString(code, index) ||
-            isInHtmlText(code, index)) {
-            continue;
-        }
-        matches.push(match[0]);
+    try {
+        visit(ast, {
+            VariableDeclaration: (node) => {
+                const allStringLiterals = node.declarations.length > 0 &&
+                    node.declarations.every((decl) => decl.init && decl.init.type === 'StringLiteral');
+                if (allStringLiterals) {
+                    const { code: extractedCode } = (0, core_1.printSync)({
+                        type: 'Module',
+                        body: [node],
+                        span: { start: 0, end: 0, ctxt: 0 },
+                    });
+                    matches.push(extractedCode.trim());
+                }
+            },
+        });
+    }
+    catch (e) {
+        console.error(`Failed to parse code to extract static string literal variables: ${e}`);
     }
     return matches.join('\n');
 }
-function extractCssCreate(code) {
-    const cssCreateMatches = [];
-    const regex = /(?:(?:\s*const\s+[a-zA-Z0-9_$]+\s*=\s*css\.create\([\s\S]*?\);\s*))/g;
+function extractCssPropsFromTemplate(code) {
+    const matches = [];
+    const regex = /css\.props\(([^)]*)\)/g;
     let match;
-    while ((match = regex.exec(code))) {
-        if (isInComment(code, match.index) ||
-            isInString(code, match.index) ||
-            isInHtmlText(code, match.index)) {
+    while ((match = regex.exec(code)) !== null) {
+        const matchStart = match.index;
+        if (isInComment(code, matchStart) ||
+            isInString(code, matchStart) ||
+            isInHtmlText(code, matchStart)) {
             continue;
         }
-        cssCreateMatches.push(match[0]);
-    }
-    return cssCreateMatches.join('\n');
-}
-function extractCssKeyframes(code) {
-    const cssCreateMatches = [];
-    const regex = /(?:(?:\s*const\s+[a-zA-Z0-9_$]+\s*=\s*css\.keyframes\([\s\S]*?\);\s*))/g;
-    let match;
-    while ((match = regex.exec(code))) {
-        if (isInComment(code, match.index) ||
-            isInString(code, match.index) ||
-            isInHtmlText(code, match.index)) {
+        const scriptStartIndex = code.indexOf('<script');
+        const scriptEndIndex = code.indexOf('</script>');
+        if (scriptStartIndex !== -1 &&
+            scriptEndIndex !== -1 &&
+            match.index > scriptStartIndex &&
+            match.index < scriptEndIndex) {
             continue;
         }
-        cssCreateMatches.push(match[0]);
+        const args = match[1];
+        if (args && !args.includes('{') && !args.includes('(')) {
+            matches.push(`css.props(${args})`);
+        }
     }
-    return cssCreateMatches.join('\n');
+    return matches;
 }
-function extractCssViewTransition(code) {
-    const cssCreateMatches = [];
-    const regex = /(?:(?:\s*const\s+[a-zA-Z0-9_$]+\s*=\s*css\.viewTransition\([\s\S]*?\);\s*))/g;
-    let match;
-    while ((match = regex.exec(code))) {
-        if (isInComment(code, match.index) ||
-            isInString(code, match.index) ||
-            isInHtmlText(code, match.index)) {
-            continue;
+function visit(node, visitor) {
+    if (!node)
+        return;
+    const visitorFunc = visitor[node.type];
+    if (visitorFunc) {
+        visitorFunc(node);
+    }
+    for (const key in node) {
+        if (typeof node[key] === 'object' && node[key] !== null) {
+            if (Array.isArray(node[key])) {
+                for (const child of node[key]) {
+                    visit(child, visitor);
+                }
+            }
+            else {
+                visit(node[key], visitor);
+            }
         }
-        cssCreateMatches.push(match[0]);
     }
-    return cssCreateMatches.join('\n');
 }
-function extractCssDefineConsts(code) {
-    const cssCreateMatches = [];
-    const regex = /(?:(?:\s*const\s+[a-zA-Z0-9_$]+\s*=\s*css\.defineConsts\([\s\S]*?\);\s*))/g;
-    let match;
-    while ((match = regex.exec(code))) {
-        if (isInComment(code, match.index) ||
-            isInString(code, match.index) ||
-            isInHtmlText(code, match.index)) {
-            continue;
-        }
-        cssCreateMatches.push(match[0]);
+function importDeclarationToString(node) {
+    const source = node.source.value;
+    const defaultImport = node.specifiers.find((s) => s.type === 'ImportDefaultSpecifier');
+    const namespaceImport = node.specifiers.find((s) => s.type === 'ImportNamespaceSpecifier');
+    const namedImports = node.specifiers.filter((s) => s.type === 'ImportSpecifier');
+    let importClause = '';
+    if (defaultImport) {
+        importClause += defaultImport.local.value;
     }
-    return cssCreateMatches.join('\n');
+    if (namespaceImport) {
+        if (importClause)
+            importClause += ', ';
+        importClause += `* as ${namespaceImport.local.value}`;
+    }
+    if (namedImports.length > 0) {
+        if (importClause)
+            importClause += ', ';
+        const namedParts = namedImports.map((spec) => {
+            if (spec.imported && spec.imported.value !== spec.local.value) {
+                return `${spec.imported.value} as ${spec.local.value}`;
+            }
+            return spec.local.value;
+        });
+        importClause += `{ ${namedParts.join(', ')} }`;
+    }
+    if (importClause) {
+        return `import ${importClause} from '${source}';`;
+    }
+    return `import '${source}';`;
 }
-function extractCssDefineTokens(code) {
-    const cssCreateMatches = [];
-    const regex = /(?:(?:\s*const\s+[a-zA-Z0-9_$]+\s*=\s*css\.defineTokens\([\s\S]*?\);\s*))/g;
-    let match;
-    while ((match = regex.exec(code))) {
-        if (isInComment(code, match.index) ||
-            isInString(code, match.index) ||
-            isInHtmlText(code, match.index)) {
-            continue;
-        }
-        cssCreateMatches.push(match[0]);
+function extractImportDeclarations(ast) {
+    const importDeclarations = [];
+    try {
+        visit(ast, {
+            ImportDeclaration: (node) => {
+                importDeclarations.push(importDeclarationToString(node));
+            },
+        });
+    }
+    catch (e) {
+        console.error(`Failed to parse code to extract import declarations: ${e}`);
     }
-    return cssCreateMatches.join('\n');
+    return importDeclarations.join('\n');
 }
-function parseCssPropsArguments(args) {
-    const results = [];
-    const splitArgs = args.split(/\s*,\s*(?![^(]*\))/);
-    for (const arg of splitArgs) {
-        if (arg.includes('&&')) {
-            const match = arg.match(/&&\s*([^\s,]+)/);
-            if (match) {
-                results.push(match[1]);
-                continue;
-            }
-        }
-        if (arg.includes('?')) {
-            const match = arg.match(/([^?]+)\?([^:]+):(.+)$/);
-            if (match) {
-                results.push(match[2].trim());
-                results.push(match[3].trim());
-                continue;
-            }
-        }
-        results.push(arg.trim());
+function extractCssMethod(ast, methodName) {
+    const matches = [];
+    try {
+        visit(ast, {
+            VariableDeclaration: (node) => {
+                const containsCssMethod = node.declarations.some((decl) => decl.init &&
+                    decl.init.type === 'CallExpression' &&
+                    decl.init.callee.type === 'MemberExpression' &&
+                    decl.init.callee.object.type === 'Identifier' &&
+                    decl.init.callee.object.value === 'css' &&
+                    decl.init.callee.property.type === 'Identifier' &&
+                    decl.init.callee.property.value === methodName);
+                if (containsCssMethod && node.span) {
+                    const { code: extractedCode } = (0, core_1.printSync)({
+                        type: 'Module',
+                        body: [node],
+                        span: { start: 0, end: 0, ctxt: 0 },
+                    });
+                    matches.push(extractedCode.trim());
+                }
+            },
+        });
     }
-    return results;
+    catch (e) {
+        console.error(`Failed to parse code to extract css.${methodName}: ${e}`);
+    }
+    return matches.join('\n');
 }
 async function extractVueAndSvelte(filePath) {
     const ext = path_1.default.extname(filePath);
@@ -304,45 +401,47 @@ async function extractVueAndSvelte(filePath) {
         }
     }
     const tsCode = contentLines.join('\n');
-    const propsMatches = [...extractCssProps(tsCode), ...extractCssProps(code)];
+    if (!tsCode.trim()) {
+        const tsPath = filePath.replace(ext, '.ts');
+        fs_1.default.writeFileSync(tsPath, '', 'utf8');
+        generatedTsMap.set(filePath, tsPath);
+        return tsPath;
+    }
+    const ast = (0, core_1.parseSync)(tsCode, {
+        syntax: 'typescript',
+        tsx: true,
+    });
+    const propsFromScript = extractCssProps(ast);
+    const propsFromTemplate = extractCssPropsFromTemplate(code);
+    const propsMatches = [...new Set([...propsFromScript, ...propsFromTemplate])];
     const calls = propsMatches
         .filter(Boolean)
         .map((call) => `${call};`)
         .join('\n');
-    const importRegex = /^(\s*import\s[^;]+;\s*)+/m;
-    const importMatch = tsCode.match(importRegex);
-    const importSection = importMatch ? importMatch[0] : '';
-    const staticVariableSection = extractStaticStringLiteralVariable(tsCode);
-    const cssCreateSection = extractCssCreate(tsCode);
-    const cssKeyframesSection = extractCssKeyframes(tsCode);
-    const cssViewTransitionSection = extractCssViewTransition(tsCode);
-    const cssDefineConstsSection = extractCssDefineConsts(tsCode);
-    const cssDefineTokensSection = extractCssDefineTokens(tsCode);
+    const importSection = extractImportDeclarations(ast);
+    const staticVariableSection = extractStaticStringLiteralVariable(ast);
+    const cssCreateSection = extractCssMethod(ast, 'create');
+    const cssKeyframesSection = extractCssMethod(ast, 'keyframes');
+    const cssViewTransitionSection = extractCssMethod(ast, 'viewTransition');
+    const cssDefineConstsSection = extractCssMethod(ast, 'defineConsts');
+    const cssDefineTokensSection = extractCssMethod(ast, 'defineTokens');
     let finalCode = '';
-    if (importSection) {
+    if (importSection)
         finalCode += importSection + '\n';
-    }
-    if (staticVariableSection) {
+    if (staticVariableSection)
         finalCode += staticVariableSection + '\n';
-    }
-    if (cssKeyframesSection) {
+    if (cssKeyframesSection)
         finalCode += cssKeyframesSection + '\n';
-    }
-    if (cssViewTransitionSection) {
+    if (cssViewTransitionSection)
         finalCode += cssViewTransitionSection + '\n';
-    }
-    if (cssDefineConstsSection) {
+    if (cssDefineConstsSection)
         finalCode += cssDefineConstsSection + '\n';
-    }
-    if (cssDefineTokensSection) {
+    if (cssDefineTokensSection)
         finalCode += cssDefineTokensSection + '\n';
-    }
-    if (cssCreateSection) {
+    if (cssCreateSection)
         finalCode += cssCreateSection + '\n';
-    }
-    if (calls) {
+    if (calls)
         finalCode += calls + '\n';
-    }
     const tsPath = filePath.replace(ext, '.ts');
     fs_1.default.writeFileSync(tsPath, finalCode, 'utf8');
     generatedTsMap.set(filePath, tsPath);
@@ -350,16 +449,18 @@ async function extractVueAndSvelte(filePath) {
 }
 async function extractTSFile(filePath) {
     const code = fs_1.default.readFileSync(filePath, 'utf8');
-    const importRegex = /^(?:\s*import\s[^;]+;\s*)+/m;
-    const importMatch = code.match(importRegex);
-    const importSection = importMatch ? importMatch[0] : '';
-    const staticVariableSection = extractStaticStringLiteralVariable(code);
-    const cssCreateSection = extractCssCreate(code);
-    const cssKeyframesSection = extractCssKeyframes(code);
-    const cssViewTransitionSection = extractCssViewTransition(code);
-    const cssDefineConstsSection = extractCssDefineConsts(code);
-    const cssDefineTokensSection = extractCssDefineTokens(code);
-    const propsMatches = extractCssProps(code);
+    const ast = (0, core_1.parseSync)(code, {
+        syntax: 'typescript',
+        tsx: true,
+    });
+    const importSection = extractImportDeclarations(ast);
+    const staticVariableSection = extractStaticStringLiteralVariable(ast);
+    const cssCreateSection = extractCssMethod(ast, 'create');
+    const cssKeyframesSection = extractCssMethod(ast, 'keyframes');
+    const cssViewTransitionSection = extractCssMethod(ast, 'viewTransition');
+    const cssDefineConstsSection = extractCssMethod(ast, 'defineConsts');
+    const cssDefineTokensSection = extractCssMethod(ast, 'defineTokens');
+    const propsMatches = extractCssProps(ast);
     const calls = propsMatches
         .filter(Boolean)
         .map((call) => `${call};`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/compiler",
-  "version": "0.24.5",
+  "version": "0.25.1",
   "description": "Plumeria Rust-based compiler",
   "repository": {
     "type": "git",
@@ -16,12 +16,12 @@
     "css": "./bin/css.js"
   },
   "dependencies": {
-    "@swc/core": "1.14.0",
-    "find-up": "^7.0.0",
-    "lightningcss": "^1.29.3",
-    "postcss": "^8.5.3",
-    "postcss-combine-media-query": "^2.0.0",
-    "rscute": "^0.2.12"
+    "@swc/core": "1.15.0",
+    "find-up": "^8.0.0",
+    "lightningcss": "^1.30.2",
+    "postcss": "^8.5.6",
+    "postcss-combine-media-query": "^2.1.0",
+    "rscute": "^1.0.0"
   },
   "publishConfig": {
     "access": "public"