@plumeria/compiler 0.13.0 → 0.14.7

package/dist/extract.js

@@ -0,0 +1,262 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = require('fs');
+const path = require('path');
+const originalCodeMap = new Map();
+const generatedTsMap = new Map();
+function isInComment(code, position) {
+    const beforePosition = code.substring(0, position);
+    const lines = beforePosition.split('\n');
+    const currentLine = lines[lines.length - 1];
+    const singleLineCommentIndex = currentLine.indexOf('//');
+    if (singleLineCommentIndex !== -1) {
+        return true;
+    }
+    let inMultiLineComment = false;
+    let i = 0;
+    while (i < position) {
+        if (code.substring(i, i + 2) === '/*') {
+            inMultiLineComment = true;
+            i += 2;
+        }
+        else if (code.substring(i, i + 2) === '*/') {
+            inMultiLineComment = false;
+            i += 2;
+        }
+        else {
+            i++;
+        }
+    }
+    return inMultiLineComment;
+}
+function isInString(code, position) {
+    let inSingleQuote = false;
+    let inDoubleQuote = false;
+    let inBacktick = false;
+    let escape = false;
+    for (let i = 0; i < position; i++) {
+        const char = code[i];
+        if (escape) {
+            escape = false;
+            continue;
+        }
+        if (char === '\\') {
+            escape = true;
+            continue;
+        }
+        if (!inSingleQuote && !inDoubleQuote && !inBacktick) {
+            if (char === "'") {
+                inSingleQuote = true;
+            }
+            else if (char === '"') {
+                inDoubleQuote = true;
+            }
+            else if (char === '`') {
+                inBacktick = true;
+            }
+        }
+        else {
+            if (inSingleQuote && char === "'") {
+                inSingleQuote = false;
+            }
+            else if (inDoubleQuote && char === '"') {
+                inDoubleQuote = false;
+            }
+            else if (inBacktick && char === '`') {
+                inBacktick = false;
+            }
+        }
+    }
+    return inSingleQuote || inDoubleQuote || inBacktick;
+}
+function isInHtmlText(code, position) {
+    let lastOpenTag = -1;
+    let lastCloseTag = -1;
+    for (let i = position - 1; i >= 0; i--) {
+        if (code[i] === '>' && lastCloseTag === -1) {
+            lastCloseTag = i;
+        }
+        if (code[i] === '<') {
+            lastOpenTag = i;
+            break;
+        }
+    }
+    let nextOpenTag = -1;
+    for (let i = position; i < code.length; i++) {
+        if (code[i] === '<') {
+            nextOpenTag = i;
+            break;
+        }
+    }
+    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--;
+            }
+            if (parenCount > 0 || char !== ')') {
+                args += char;
+            }
+            currentIndex++;
+        }
+        if (parenCount === 0) {
+            const normalizedArgs = args.replace(/\s+/g, ' ').trim();
+            const cleanArgs = parseCssPropsArguments(normalizedArgs);
+            if (cleanArgs.length > 0) {
+                propsMatches.push(`css.props(${cleanArgs.join(', ')})`);
+            }
+        }
+    }
+    return propsMatches;
+}
+function extractCssCreate(code) {
+    const cssCreateMatches = [];
+    const regex = /(?:(?:\s*const\s+[a-zA-Z0-9_$]+\s*=\s*css\.create\([\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]);
+    }
+    return cssCreateMatches.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());
+    }
+    return results;
+}
+async function extractVueAndSvelte(filePath) {
+    const ext = path.extname(filePath);
+    if (!(ext === '.svelte' || ext === '.vue'))
+        return filePath;
+    const code = fs.readFileSync(filePath, 'utf8');
+    originalCodeMap.set(filePath, code);
+    const lines = code.split(/\r?\n/);
+    let inScript = false;
+    const contentLines = [];
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (!inScript && /^<script\b/.test(trimmed)) {
+            inScript = true;
+            continue;
+        }
+        if (inScript && /^<\/script>/.test(trimmed)) {
+            inScript = false;
+            continue;
+        }
+        if (inScript) {
+            contentLines.push(line);
+        }
+    }
+    const tsCode = contentLines.join('\n');
+    const propsMatches = [...extractCssProps(tsCode), ...extractCssProps(code)];
+    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 stylesSection = extractCssCreate(tsCode);
+    let finalCode = '';
+    if (importSection) {
+        finalCode += importSection + '\n';
+    }
+    if (stylesSection) {
+        finalCode += stylesSection + '\n';
+    }
+    if (calls) {
+        finalCode += calls + '\n';
+    }
+    const tsPath = filePath.replace(ext, '.ts');
+    fs.writeFileSync(tsPath, finalCode, 'utf8');
+    generatedTsMap.set(filePath, tsPath);
+    return tsPath;
+}
+async function extractAndInjectStyleProps(filePath) {
+    const original = fs.readFileSync(filePath, 'utf8');
+    originalCodeMap.set(filePath, original);
+    const importRegex = /^(?:\s*import\s[^;]+;\s*)+/m;
+    const importMatch = original.match(importRegex);
+    const importSection = importMatch ? importMatch[0] : '';
+    const cssCreateSection = extractCssCreate(original);
+    const propsMatches = extractCssProps(original);
+    const calls = propsMatches
+        .filter(Boolean)
+        .map((call) => `${call};`)
+        .join('\n');
+    let finalCode = '';
+    if (importSection)
+        finalCode += importSection + '\n';
+    if (cssCreateSection)
+        finalCode += cssCreateSection + '\n';
+    finalCode += calls;
+    fs.writeFileSync(filePath, finalCode, 'utf8');
+}
+async function restoreAllOriginals() {
+    for (const [originalPath, genPath] of generatedTsMap.entries()) {
+        if (genPath !== originalPath && fs.existsSync(genPath)) {
+            fs.unlinkSync(genPath);
+        }
+    }
+    generatedTsMap.clear();
+    for (const [filePath, backup] of originalCodeMap.entries()) {
+        fs.writeFileSync(filePath, backup, 'utf8');
+    }
+    originalCodeMap.clear();
+}
+process.on('uncaughtException', async (error) => {
+    console.error('Uncaught Exception:', error);
+    await restoreAllOriginals();
+    process.exit(1);
+});
+process.on('unhandledRejection', async (reason, promise) => {
+    console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+    await restoreAllOriginals();
+    process.exit(1);
+});
+module.exports = {
+    extractAndInjectStyleProps,
+    restoreAllOriginals,
+    extractVueAndSvelte,
+    originalCodeMap,
+};

package/dist/index.js

@@ -1,6 +1,7 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 const path = require('path');
-const { unlinkSync, existsSync, readFileSync } = require('fs');
+const { unlinkSync, existsSync, readFileSync, statSync } = require('fs');
 const { readFile, writeFile } = require('fs/promises');
 const { glob } = require('@rust-gear/glob');
 const postcss = require('postcss');
@@ -9,7 +10,8 @@ const combineMediaQuery = require('postcss-combine-media-query');
 const { execute } = require('rscute/execute');
 const { transform } = require('lightningcss');
 const { parseSync } = require('@swc/core');
-const { buildGlobal, buildCreate } = require('@plumeria/core/processors');
+const { buildGlobal, buildProps } = require('@plumeria/core/processors');
+const { extractAndInjectStyleProps, restoreAllOriginals, extractVueAndSvelte, } = require('./extract');
 const projectRoot = process.cwd().split('node_modules')[0];
 const directPath = path.join(projectRoot, 'node_modules/@plumeria/core');
 const coreFilePath = path.join(directPath, 'stylesheet.css');
@@ -25,7 +27,10 @@ const cleanUp = async () => {
         console.error('An error occurred:', err);
     }
 };
-function isCSS(filePath) {
+function isCSS(filePath, target) {
+    if (statSync(filePath).isDirectory()) {
+        return false;
+    }
     const code = readFileSync(filePath, 'utf8');
     const ast = parseSync(code, {
         syntax: 'typescript',
@@ -37,7 +42,12 @@ function isCSS(filePath) {
     function visit(node) {
         if (node.type === 'MemberExpression' && node.property?.value) {
             if (node.object?.type === 'Identifier' && node.object.value === 'css') {
-                if (node.property.value === 'create' ||
+                if (target === 'props') {
+                    if (node.property.value === 'props') {
+                        found = true;
+                    }
+                }
+                else if (node.property.value === 'props' ||
                     node.property.value === 'global') {
                     found = true;
                 }
@@ -85,7 +95,7 @@ async function optimizeCSS() {
 }
 (async () => {
     await cleanUp();
-    const files = await glob(path.join(projectRoot, '**/*.{js,jsx,ts,tsx}'), {
+    const files = await glob(path.join(projectRoot, '**/*.{js,jsx,ts,tsx,vue,svelte}'), {
         exclude: [
             '**/node_modules/**',
             '**/dist/**',
@@ -94,17 +104,41 @@ async function optimizeCSS() {
         ],
         cwd: projectRoot,
     });
-    const styleFiles = files.filter(isCSS).sort();
+    const projectName = path.basename(projectRoot);
+    const filesSupportExtensions = [];
+    for (const file of files) {
+        const tsFile = await extractVueAndSvelte(file);
+        filesSupportExtensions.push(tsFile);
+    }
+    const styleFiles = filesSupportExtensions
+        .filter((file) => isCSS(file, ''))
+        .sort();
+    const cssPropsFiles = styleFiles.filter((file) => {
+        if (file.endsWith('.ts')) {
+            const vueFile = file.replace('.ts', '.vue');
+            const svelteFile = file.replace('.ts', '.svelte');
+            const isGeneratedFromVue = existsSync(vueFile);
+            const isGeneratedFromSvelte = existsSync(svelteFile);
+            if (isGeneratedFromVue || isGeneratedFromSvelte) {
+                return false;
+            }
+        }
+        return isCSS(file, 'props');
+    });
+    for (let i = 0; i < cssPropsFiles.length; i++) {
+        await extractAndInjectStyleProps(path.resolve(cssPropsFiles[i]));
+    }
     for (let i = 0; i < styleFiles.length; i++) {
         await execute(path.resolve(styleFiles[i]));
         if (process.argv.includes('--paths'))
-            console.log(path.relative(projectRoot, styleFiles[i]));
+            console.log(`✅: ${projectName}/${path.relative(projectRoot, styleFiles[i])}`);
     }
     for (let i = 0; i < styleFiles.length; i++) {
         await buildGlobal(coreFilePath);
     }
     for (let i = 0; i < styleFiles.length; i++) {
-        await buildCreate(coreFilePath);
+        await buildProps(coreFilePath);
     }
     await optimizeCSS();
+    await restoreAllOriginals();
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/compiler",
-  "version": "0.13.0",
+  "version": "0.14.7",
   "description": "A faster compiler for Plumeria",
   "keywords": [
     "css",