@plumeria/compiler 0.26.0 → 0.27.0

package/dist/extract.js

@@ -158,7 +158,42 @@ function expressionToString(expr) {
     console.warn(`css.props: Argument unsupported ${expr.type}: Use css.create instead.`);
     return '';
 }
-async function extractCssProps(ast, code) {
+async function extractCreatedStyleKeys(ast) {
+    const createdStylesMap = new Map();
+    await visit(ast, {
+        VariableDeclarator: (node) => {
+            if (node.id.type === 'Identifier' &&
+                node.init &&
+                node.init.type === 'CallExpression' &&
+                node.init.callee.type === 'MemberExpression' &&
+                node.init.callee.object.type === 'Identifier' &&
+                node.init.callee.object.value === 'css' &&
+                node.init.callee.property.type === 'Identifier' &&
+                node.init.callee.property.value === 'create' &&
+                node.init.arguments.length > 0) {
+                const variableName = node.id.value;
+                const createArg = node.init.arguments[0].expression;
+                if (createArg && createArg.type === 'ObjectExpression') {
+                    const keys = [];
+                    for (const prop of createArg.properties) {
+                        if (prop.type === 'KeyValueProperty' &&
+                            prop.key.type === 'Identifier') {
+                            keys.push(prop.key.value);
+                        }
+                        else if (prop.type === 'Identifier') {
+                            keys.push(prop.value);
+                        }
+                    }
+                    if (keys.length > 0) {
+                        createdStylesMap.set(variableName, keys);
+                    }
+                }
+            }
+        },
+    });
+    return createdStylesMap;
+}
+async function extractCssProps(ast, code, createdStylesMap) {
     const propsMatches = [];
     if (code && !code.includes('css.props')) {
         return propsMatches;
@@ -178,9 +213,18 @@ async function extractCssProps(ast, code) {
                             if (arg.expression.type === 'ConditionalExpression' ||
                                 (arg.expression.type === 'BinaryExpression' &&
                                     arg.expression.operator === '&&')) {
-                                const styles = await extractStyleObjectsFromExpression(arg.expression);
+                                const styles = extractStyleObjectsFromExpression(arg.expression);
                                 conditionalStyleObjects.push(...styles);
                             }
+                            else if (arg.expression.type === 'MemberExpression' &&
+                                arg.expression.property.type === 'Computed' &&
+                                arg.expression.object.type === 'Identifier') {
+                                const styleVarName = arg.expression.object.value;
+                                const styleKeys = createdStylesMap.get(styleVarName);
+                                if (styleKeys) {
+                                    propsMatches.push(...styleKeys.map((key) => `css.props(${styleVarName}.${key})`));
+                                }
+                            }
                             else {
                                 const argStr = expressionToString(arg.expression);
                                 if (argStr) {
@@ -207,7 +251,7 @@ async function extractCssProps(ast, code) {
     catch (e) {
         console.error(`Failed to parse code to extract css.props: ${e}`);
     }
-    return propsMatches;
+    return [...new Set(propsMatches)];
 }
 function extractStyleObjectsFromExpression(expression) {
     switch (expression.type) {
@@ -415,7 +459,8 @@ async function extractVueAndSvelte(filePath) {
         syntax: 'typescript',
         tsx: true,
     });
-    const propsFromScript = await extractCssProps(ast, code);
+    const createdStylesMap = await extractCreatedStyleKeys(ast);
+    const propsFromScript = await extractCssProps(ast, code, createdStylesMap);
     const propsFromTemplate = extractCssPropsFromTemplate(code);
     const propsMatches = [...new Set([...propsFromScript, ...propsFromTemplate])];
     const calls = propsMatches
@@ -455,6 +500,7 @@ async function extractTSFile(filePath) {
         syntax: 'typescript',
         tsx: true,
     });
+    const createdStylesMap = await extractCreatedStyleKeys(ast);
     const importSection = await extractImportDeclarations(ast);
     const staticVariableSection = await extractStaticStringLiteralVariable(ast);
     const cssCreateSection = await extractCssMethod(ast, 'create', code);
@@ -462,7 +508,7 @@ async function extractTSFile(filePath) {
     const cssViewTransitionSection = await extractCssMethod(ast, 'viewTransition', code);
     const cssDefineConstsSection = await extractCssMethod(ast, 'defineConsts', code);
     const cssDefineTokensSection = await extractCssMethod(ast, 'defineTokens', code);
-    const propsMatches = await extractCssProps(ast, code);
+    const propsMatches = await extractCssProps(ast, code, createdStylesMap);
     const calls = propsMatches
         .filter(Boolean)
         .map((call) => `${call};`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/compiler",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Plumeria Rust-based compiler",
   "repository": {
     "type": "git",