@plumeria/compiler 3.0.1 → 4.0.0

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+interface CompilerOptions {
+    include: string;
+    exclude: string[];
+    cwd?: string;
+}
+export declare function compileCSS(options: CompilerOptions): string;
+export {};

package/dist/index.js

@@ -3,14 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileCSS = compileCSS;
 const core_1 = require("@swc/core");
 const zss_engine_1 = require("zss-engine");
-const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
 const utils_1 = require("@plumeria/utils");
-const optimizer_1 = require("./optimizer");
-async function compile(options) {
-    const { pattern, output, cwd = process.cwd() } = options;
+function compileCSS(options) {
+    const { include, exclude, cwd = process.cwd() } = options;
     let staticTable = null;
     let keyframesData = null;
     let viewTransitionData = null;
@@ -77,56 +76,63 @@ async function compile(options) {
                     utils_1.t.isIdentifier(callee.object, { name: 'css' }) &&
                     utils_1.t.isIdentifier(callee.property)) {
                     const args = node.arguments;
-                    if (callee.property.value === 'props') {
-                        const merged = {};
-                        let allStatic = true;
-                        args.forEach((arg) => {
-                            const expr = arg.expression;
-                            if (utils_1.t.isObjectExpression(expr)) {
-                                const obj = (0, utils_1.objectExpressionToObject)(expr, utils_1.tables.staticTable, utils_1.tables.keyframesHashTable, utils_1.tables.viewTransitionHashTable, utils_1.tables.themeTable);
-                                if (obj) {
-                                    Object.assign(merged, obj);
-                                }
-                                else {
-                                    allStatic = false;
-                                }
-                            }
-                            else if (utils_1.t.isMemberExpression(expr)) {
-                                if (utils_1.t.isIdentifier(expr.object) &&
-                                    utils_1.t.isIdentifier(expr.property)) {
-                                    const varName = expr.object.value;
-                                    const propName = expr.property.value;
-                                    const styleSet = localCreateStyles[varName];
-                                    if (styleSet && styleSet[propName]) {
-                                        Object.assign(merged, styleSet[propName]);
-                                    }
-                                    else {
-                                        allStatic = false;
-                                    }
-                                }
-                                else {
-                                    allStatic = false;
+                    const extractStylesFromExpression = (expr) => {
+                        const results = [];
+                        if (utils_1.t.isObjectExpression(expr)) {
+                            const obj = (0, utils_1.objectExpressionToObject)(expr, utils_1.tables.staticTable, utils_1.tables.keyframesHashTable, utils_1.tables.viewTransitionHashTable, utils_1.tables.themeTable);
+                            if (obj)
+                                results.push(obj);
+                        }
+                        else if (utils_1.t.isMemberExpression(expr)) {
+                            if (utils_1.t.isIdentifier(expr.object) &&
+                                utils_1.t.isIdentifier(expr.property)) {
+                                const varName = expr.object.value;
+                                const propName = expr.property.value;
+                                const styleSet = localCreateStyles[varName];
+                                if (styleSet && styleSet[propName]) {
+                                    results.push(styleSet[propName]);
                                 }
                             }
-                            else if (utils_1.t.isIdentifier(expr)) {
-                                const obj = localCreateStyles[expr.value];
-                                if (obj) {
-                                    Object.assign(merged, obj);
-                                }
-                                else {
-                                    allStatic = false;
+                            else if (utils_1.t.isIdentifier(expr.object) &&
+                                expr.property.type === 'Computed') {
+                                const varName = expr.object.value;
+                                const styleSet = localCreateStyles[varName];
+                                if (styleSet) {
+                                    Object.values(styleSet).forEach((s) => results.push(s));
                                 }
                             }
-                            else {
-                                allStatic = false;
+                        }
+                        else if (utils_1.t.isIdentifier(expr)) {
+                            const obj = localCreateStyles[expr.value];
+                            if (obj) {
+                                results.push(obj);
                             }
-                        });
-                        if (allStatic && Object.keys(merged).length > 0) {
-                            (0, utils_1.extractOndemandStyles)(merged, extractedSheets);
-                            const hash = (0, zss_engine_1.genBase36Hash)(merged, 1, 8);
-                            const records = (0, utils_1.getStyleRecords)(hash, merged, 1);
-                            records.forEach((r) => extractedSheets.push(r.sheet));
                         }
+                        else if (utils_1.t.isConditionalExpression(expr)) {
+                            results.push(...extractStylesFromExpression(expr.consequent));
+                            results.push(...extractStylesFromExpression(expr.alternate));
+                        }
+                        else if (utils_1.t.isBinaryExpression(expr) &&
+                            (expr.operator === '&&' ||
+                                expr.operator === '||' ||
+                                expr.operator === '??')) {
+                            results.push(...extractStylesFromExpression(expr.left));
+                            results.push(...extractStylesFromExpression(expr.right));
+                        }
+                        return results;
+                    };
+                    const processStyle = (style) => {
+                        (0, utils_1.extractOndemandStyles)(style, extractedSheets);
+                        const hash = (0, zss_engine_1.genBase36Hash)(style, 1, 8);
+                        const records = (0, utils_1.getStyleRecords)(hash, style, 1);
+                        records.forEach((r) => extractedSheets.push(r.sheet));
+                    };
+                    if (callee.property.value === 'props') {
+                        args.forEach((arg) => {
+                            const expr = arg.expression;
+                            const styles = extractStylesFromExpression(expr);
+                            styles.forEach((s) => processStyle(s));
+                        });
                     }
                     else if (callee.property.value === 'keyframes' &&
                         args.length > 0 &&
@@ -141,6 +147,8 @@ async function compile(options) {
                         const obj = (0, utils_1.objectExpressionToObject)(args[0].expression, utils_1.tables.staticTable, utils_1.tables.keyframesHashTable, utils_1.tables.viewTransitionHashTable, utils_1.tables.themeTable);
                         const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                         utils_1.tables.viewTransitionObjectTable[hash] = obj;
+                        (0, utils_1.extractOndemandStyles)(obj, extractedSheets);
+                        (0, utils_1.extractOndemandStyles)({ vt: `vt-${hash}` }, extractedSheets);
                     }
                     else if (callee.property.value === 'createTheme' &&
                         args.length > 0 &&
@@ -154,27 +162,15 @@ async function compile(options) {
         });
         return extractedSheets;
     };
-    const files = fs_1.default.globSync(pattern, {
+    const files = fs_1.default.globSync(include, {
         cwd,
-        exclude: ['**/node_modules/**', '**/dist/**', '**/.next/**'],
+        exclude: exclude,
     });
-    files.forEach((file) => {
+    for (const file of files) {
         const sheets = processFile(file);
-        sheets.forEach((sheet) => allSheets.add(sheet));
-    });
-    const outputPath = path_1.default.resolve(cwd, output);
-    const css = Array.from(allSheets).join('\n');
-    const outputDir = path_1.default.dirname(outputPath);
-    if (!fs_1.default.existsSync(outputDir)) {
-        fs_1.default.mkdirSync(outputDir, { recursive: true });
+        for (const sheet of sheets) {
+            allSheets.add(sheet);
+        }
     }
-    const optCSS = await (0, optimizer_1.optimizeCSS)(css);
-    fs_1.default.writeFileSync(outputPath, optCSS);
-}
-async function main() {
-    const coreFilePath = require.resolve('@plumeria/core/stylesheet.css');
-    await compile({ pattern: '**/*.{js,jsx,ts,tsx}', output: coreFilePath });
+    return Array.from(allSheets).join('\n');
 }
-main().catch((err) => {
-    console.error(err);
-});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plumeria/compiler",
-  "version": "3.0.1",
-  "description": "Plumeria swc based compiler",
+  "version": "4.0.0",
+  "description": "Plumeria swc based compiler for statically extracting css",
   "author": "Refirst 11",
   "license": "MIT",
   "funding": "https://github.com/sponsors/refirst11",
@@ -15,30 +15,24 @@
     "url": "https://github.com/zss-in-js/plumeria/issues"
   },
   "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
-    "bin/",
     "dist/"
   ],
-  "bin": {
-    "css": "./bin/css.js"
-  },
   "dependencies": {
-    "rscute": "^1.1.5",
-    "lightningcss": "^1.30.2",
-    "postcss": "^8.5.6",
-    "postcss-combine-media-query": "^2.1.0",
-    "@plumeria/utils": "^3.0.1"
+    "@plumeria/utils": "^4.0.0"
   },
   "devDependencies": {
     "@swc/core": "1.15.2",
-    "zss-engine": "2.1.2",
-    "@plumeria/core": "^3.0.1"
+    "zss-engine": "2.1.2"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
   "scripts": {
-    "build": "rimraf dist && tsc"
+    "build": "rimraf dist && pnpm cjs",
+    "cjs": "tsc --project tsconfig.cjs.json"
   }
 }

package/bin/css.js

@@ -1,4 +0,0 @@
-#!/usr/bin/env node
-const path = require('path');
-require('rscute/register').register();
-require(path.resolve(__dirname, '../dist/index.js'));

package/dist/optimizer.js

@@ -1,26 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.optimizeCSS = optimizeCSS;
-const postcss_1 = __importDefault(require("postcss"));
-const postcss_combine_media_query_1 = __importDefault(require("postcss-combine-media-query"));
-const lightningcss_1 = require("lightningcss");
-async function optimizeCSS(cssCode) {
-    const merged = await (0, postcss_1.default)([(0, postcss_combine_media_query_1.default)()]).process(cssCode, {
-        from: undefined,
-    });
-    const light = (0, lightningcss_1.transform)({
-        filename: 'stylesheet.css',
-        code: Buffer.from(merged.css),
-        minify: process.env.NODE_ENV === 'production',
-        targets: {
-            safari: 16,
-            edge: 110,
-            firefox: 110,
-            chrome: 110,
-        },
-    });
-    return Buffer.from(light.code).toString('utf-8');
-}