@plumeria/turbopack-loader 16.4.2 → 17.0.0

package/dist/index.d.ts

@@ -1,3 +1,8 @@
+export interface LoaderOptions {
+    include?: string[];
+    exclude?: string[];
+    styleProp?: string;
+}
 interface LoaderContext {
     resourcePath: string;
     context: string;
@@ -5,6 +10,8 @@ interface LoaderContext {
     async: () => (err: Error | null, content?: string) => void;
     addDependency: (path: string) => void;
     clearDependencies: () => void;
+    getOptions?: () => LoaderOptions | undefined;
+    query?: LoaderOptions | string;
 }
 export default function loader(this: LoaderContext, source: string): Promise<void>;
 export {};

package/dist/index.js

@@ -39,22 +39,55 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const zss_engine_1 = require("zss-engine");
 const utils_1 = require("@plumeria/utils");
+const compiler_1 = require("@plumeria/compiler");
 const split_css_rules_1 = require("./split-css-rules");
 const file_lock_1 = require("./file-lock");
-let lastValidCss = '';
-async function loader(source) {
-    const callback = this.async();
-    const resourcePath = this.resourcePath;
-    const isProduction = process.env.NODE_ENV === 'production';
-    const VIRTUAL_FILE_PATH = path.resolve(__dirname, '..', 'zero-virtual.css');
-    let isThemeCSS = false;
-    if (!lastValidCss && !isProduction) {
+const GENERATED_MARKER = '/* plumeria: generated */';
+const DEFAULT_INCLUDE = ['**/*.{js,jsx,ts,tsx}'];
+const DEFAULT_EXCLUDE = ['**/node_modules/**', '**/dist/**', '**/.next/**'];
+let productionCss = null;
+async function generateProductionCss(virtualFilePath, options) {
+    const lockDir = virtualFilePath + '.lock';
+    await (0, file_lock_1.acquireLock)(lockDir);
+    try {
+        let current = '';
         try {
-            lastValidCss = fs.readFileSync(VIRTUAL_FILE_PATH, 'utf-8');
+            current = fs.readFileSync(virtualFilePath, 'utf-8');
         }
         catch (e) {
         }
+        if (current.startsWith(GENERATED_MARKER))
+            return;
+        const css = (0, compiler_1.compileCSS)({
+            include: options.include ?? DEFAULT_INCLUDE,
+            exclude: options.exclude ?? DEFAULT_EXCLUDE,
+            cwd: process.cwd(),
+            styleProp: options.styleProp ?? utils_1.DEFAULT_STYLE_PROP,
+        });
+        const optimized = await (0, utils_1.optimizer)(css);
+        const tempPath = `${virtualFilePath}.${process.pid}.tmp`;
+        fs.writeFileSync(tempPath, `${GENERATED_MARKER}\n${optimized}`, 'utf-8');
+        fs.renameSync(tempPath, virtualFilePath);
+    }
+    finally {
+        (0, file_lock_1.releaseLockSync)(lockDir);
     }
+}
+const ensureProductionCss = (virtualFilePath, options) => {
+    if (!productionCss) {
+        productionCss = generateProductionCss(virtualFilePath, options);
+    }
+    return productionCss;
+};
+async function loader(source) {
+    const callback = this.async();
+    const loaderOptions = this.getOptions?.() ??
+        (typeof this.query === 'object' ? this.query : undefined) ??
+        {};
+    const styleProp = loaderOptions.styleProp ?? utils_1.DEFAULT_STYLE_PROP;
+    const resourcePath = this.resourcePath;
+    const isProduction = process.env.NODE_ENV === 'production';
+    const VIRTUAL_FILE_PATH = path.resolve(__dirname, '..', 'zero-virtual.css');
     if (resourcePath.includes('node_modules') ||
         !source.includes('@plumeria/core')) {
         return callback(null, source);
@@ -335,17 +368,7 @@ async function loader(source) {
         const processedDecls = new Set();
         const idSpans = new Set();
         const excludedSpans = new Set();
-        const checkVariantAssignment = (decl) => {
-            const init = decl.init;
-            if (init && utils_1.t.isCallExpression(init) && utils_1.t.isIdentifier(init.callee)) {
-                const varName = init.callee.value;
-                if ((localCreateStyles[varName] &&
-                    localCreateStyles[varName].type === 'variant') ||
-                    mergedVariantsTable[varName]) {
-                    throwCompilationError(`Plumeria: Assigning the return value of css.variants() to a variable is not supported.\nPlease pass the variant function directly to styleName or css.use(). Found assignment to: ${utils_1.t.isIdentifier(decl.id) ? decl.id.value : 'unknown'}`, init);
-                }
-            }
-        };
+        const referenceIdents = (0, utils_1.collectReferenceIdentifiers)(ast);
         const registerStyle = (node, declSpan, isExported) => {
             let propName;
             const init = node.init;
@@ -449,7 +472,6 @@ async function loader(source) {
                 else if (propName === 'createTheme' &&
                     init.arguments.length >= 2 &&
                     utils_1.t.isObjectExpression(init.arguments[1].expression)) {
-                    isThemeCSS = true;
                     if (utils_1.t.isIdentifier(node.id)) {
                         idSpans.add(node.id.span.start);
                     }
@@ -570,7 +592,6 @@ async function loader(source) {
                 if (utils_1.t.isVariableDeclaration(node.declaration)) {
                     processedDecls.add(node.declaration);
                     node.declaration.declarations.forEach((decl) => {
-                        checkVariantAssignment(decl);
                         registerStyle(decl, node.span, true);
                         checkStyleAliasAssignment(decl);
                     });
@@ -580,7 +601,6 @@ async function loader(source) {
                 if (processedDecls.has(node))
                     return;
                 node.declarations.forEach((decl) => {
-                    checkVariantAssignment(decl);
                     registerStyle(decl, node.span, false);
                     checkStyleAliasAssignment(decl);
                 });
@@ -635,7 +655,6 @@ async function loader(source) {
                     else if (propName === 'createTheme' &&
                         args.length >= 2 &&
                         utils_1.t.isObjectExpression(args[1].expression)) {
-                        isThemeCSS = true;
                         let selector = '';
                         const selectorExpr = args[0].expression;
                         if (utils_1.t.isStringLiteral(selectorExpr)) {
@@ -717,10 +736,17 @@ async function loader(source) {
             else if (utils_1.t.isMemberExpression(expr) &&
                 utils_1.t.isIdentifier(expr.object) &&
                 (utils_1.t.isIdentifier(expr.property) || expr.property.type === 'Computed')) {
-                if (expr.property.type === 'Computed')
-                    return null;
                 const varName = expr.object.value;
-                const propName = expr.property.value;
+                let propName;
+                if (expr.property.type === 'Computed') {
+                    const keyExpr = expr.property.expression;
+                    if (!utils_1.t.isStringLiteral(keyExpr))
+                        return null;
+                    propName = keyExpr.value;
+                }
+                else {
+                    propName = expr.property.value;
+                }
                 const styleInfo = localCreateStyles[varName];
                 if (styleInfo?.obj[propName]) {
                     const style = styleInfo.obj[propName];
@@ -829,6 +855,14 @@ async function loader(source) {
                 else if (node.type === 'ParenthesisExpression') {
                     return collectConditions(node.expression, currentTestStrings);
                 }
+                if (currentTestStrings.length > 0 &&
+                    utils_1.t.isMemberExpression(node) &&
+                    utils_1.t.isIdentifier(node.object) &&
+                    node.property.type === 'Computed' &&
+                    resolveCreateObject(node.object.value)) {
+                    const varName = node.object.value;
+                    throwCompilationError(`Plumeria: "${getSource(node)}" cannot be used inside a condition, because its bracket key is not a literal.\nMove the condition into the brackets instead, e.g. ${varName}[cond ? 'a' : 'b'].`, node);
+                }
                 assertResolvable(node);
                 return false;
             };
@@ -1306,17 +1340,6 @@ async function loader(source) {
                             return;
                         }
                     }
-                    if (localStyle && localStyle.type === 'variant') {
-                        const variantMap = localStyle.hashMap[propName];
-                        if (variantMap) {
-                            replacements.push({
-                                start: node.span.start - baseByteOffset,
-                                end: node.span.end - baseByteOffset,
-                                content: `(${JSON.stringify(variantMap)})`,
-                            });
-                            return;
-                        }
-                    }
                     let hash = scannedTables.createHashTable[uniqueKey];
                     if (!hash) {
                         hash = mergedCreateTable[varName];
@@ -1377,13 +1400,21 @@ async function loader(source) {
                     return;
                 if (idSpans.has(node.span.start))
                     return;
-                const styleInfo = localCreateStyles[node.value];
-                if (styleInfo) {
+                if (!referenceIdents.references.has(node.span.start))
+                    return;
+                const prefix = referenceIdents.shorthands.has(node.span.start)
+                    ? `${node.value}: `
+                    : '';
+                const pushReplacement = (content) => {
                     replacements.push({
                         start: node.span.start - baseByteOffset,
                         end: node.span.end - baseByteOffset,
-                        content: `(${JSON.stringify(styleInfo.hashMap)})`,
+                        content: `${prefix}${content}`,
                     });
+                };
+                const styleInfo = localCreateStyles[node.value];
+                if (styleInfo) {
+                    pushReplacement(`(${JSON.stringify(styleInfo.hashMap)})`);
                     return;
                 }
                 const varName = node.value;
@@ -1402,11 +1433,7 @@ async function loader(source) {
                                 hashMap[key] = atomicMap[key];
                             }
                         });
-                        replacements.push({
-                            start: node.span.start - baseByteOffset,
-                            end: node.span.end - baseByteOffset,
-                            content: `(${JSON.stringify(hashMap)})`,
-                        });
+                        pushReplacement(`(${JSON.stringify(hashMap)})`);
                     }
                 }
                 let themeHash = mergedCreateThemeHashTable[varName];
@@ -1416,11 +1443,7 @@ async function loader(source) {
                 if (themeHash) {
                     const atomicMap = scannedTables.createAtomicMapTable[themeHash];
                     if (atomicMap) {
-                        replacements.push({
-                            start: node.span.start - baseByteOffset,
-                            end: node.span.end - baseByteOffset,
-                            content: `(${JSON.stringify(atomicMap)})`,
-                        });
+                        pushReplacement(`(${JSON.stringify(atomicMap)})`);
                         return;
                     }
                 }
@@ -1431,11 +1454,7 @@ async function loader(source) {
                 if (staticHash) {
                     const staticObj = scannedTables.createStaticObjectTable[staticHash];
                     if (staticObj) {
-                        replacements.push({
-                            start: node.span.start - baseByteOffset,
-                            end: node.span.end - baseByteOffset,
-                            content: `(${JSON.stringify(staticObj)})`,
-                        });
+                        pushReplacement(`(${JSON.stringify(staticObj)})`);
                     }
                 }
             },
@@ -1443,7 +1462,7 @@ async function loader(source) {
                 if (node.name.type !== 'Identifier')
                     return;
                 const attrName = node.name.value;
-                if (attrName !== 'styleName') {
+                if (attrName !== styleProp) {
                     let parentTagName = '';
                     for (const [, val] of jsxOpeningElementMap) {
                         const found = val.attributes
@@ -1728,12 +1747,27 @@ async function loader(source) {
                 }
             },
         });
+        const buildExportedInit = (info) => {
+            const keys = Object.keys(info.obj);
+            if (isProduction || keys.length === 0) {
+                return JSON.stringify('');
+            }
+            const head = JSON.stringify(`Plumeria: "${info.name}.`);
+            const tail = JSON.stringify(`" was read at runtime. The file that read it was not compiled ` +
+                `because it does not reference "@plumeria/core" — add ` +
+                `import '@plumeria/core'; to it (see the stack below). Defined in ` +
+                `${path.relative(process.cwd(), resourcePath)}.`);
+            return (`(()=>{const k=new Set(${JSON.stringify(keys)});` +
+                `return new Proxy({},{get(t,p){` +
+                `if(typeof p==="string"&&k.has(p))throw new Error(${head}+p+${tail});` +
+                `return t[p];}});})()`);
+        };
         Object.values(localCreateStyles).forEach((info) => {
             if (info.isExported) {
                 replacements.push({
                     start: info.initSpan.start,
                     end: info.initSpan.end,
-                    content: JSON.stringify(''),
+                    content: buildExportedInit(info),
                 });
             }
             else {
@@ -1764,16 +1798,16 @@ async function loader(source) {
         if (!relativeImportPath.startsWith('.')) {
             relativeImportPath = './' + relativeImportPath;
         }
-        const hash = (0, zss_engine_1.genBase36Hash)(optInCSS, 1, 8);
-        const postfix = `\nimport "${relativeImportPath}?v=${hash}";`;
-        if (process.env.NODE_ENV === 'production') {
-            return callback(null, transformedSource);
+        const postfix = `\nimport "${relativeImportPath}";`;
+        if (isProduction) {
+            await ensureProductionCss(VIRTUAL_FILE_PATH, loaderOptions);
+            return callback(null, transformedSource + postfix);
         }
         if (extractedSheets.length > 0 && process.env.NODE_ENV === 'development') {
             const LOCK_DIR_PATH = VIRTUAL_FILE_PATH + '.lock';
             await (0, file_lock_1.acquireLock)(LOCK_DIR_PATH);
+            let currentCss = '';
             try {
-                let currentCss = '';
                 try {
                     currentCss = fs.readFileSync(VIRTUAL_FILE_PATH, 'utf-8');
                 }
@@ -1789,18 +1823,14 @@ async function loader(source) {
                         hasNewRule = true;
                     }
                 }
-                if (hasNewRule || isThemeCSS) {
+                if (hasNewRule) {
                     const nextCss = (0, utils_1.orderMediaLast)(Array.from(ruleSet)).join('\n\n') + '\n';
                     fs.writeFileSync(VIRTUAL_FILE_PATH, nextCss, 'utf-8');
-                    lastValidCss = nextCss;
-                }
-                else {
-                    lastValidCss = currentCss;
                 }
             }
             catch (innerError) {
                 try {
-                    fs.writeFileSync(VIRTUAL_FILE_PATH, lastValidCss, 'utf-8');
+                    fs.writeFileSync(VIRTUAL_FILE_PATH, currentCss, 'utf-8');
                 }
                 catch (e) {
                 }
@@ -1810,13 +1840,6 @@ async function loader(source) {
                 (0, file_lock_1.releaseLockSync)(LOCK_DIR_PATH);
             }
         }
-        else if (!isProduction) {
-            try {
-                lastValidCss = fs.readFileSync(VIRTUAL_FILE_PATH, 'utf-8');
-            }
-            catch (e) {
-            }
-        }
         return callback(null, transformedSource + postfix);
     }
     catch (error) {

package/dist/split-css-rules.js

@@ -7,6 +7,14 @@ function splitCssRules(css) {
     let depth = 0;
     let inComment = false;
     let inString = null;
+    let hasContent = false;
+    const flush = () => {
+        const trimmed = currentRule.trim();
+        if (trimmed)
+            rules.push(trimmed);
+        currentRule = '';
+        hasContent = false;
+    };
     for (let i = 0; i < css.length; i++) {
         const char = css[i];
         const nextChar = css[i + 1];
@@ -16,6 +24,8 @@ function splitCssRules(css) {
                 currentRule += '/';
                 i++;
                 inComment = false;
+                if (depth === 0 && !hasContent)
+                    flush();
             }
             continue;
         }
@@ -41,26 +51,22 @@ function splitCssRules(css) {
         if (char === '"' || char === "'") {
             currentRule += char;
             inString = char;
+            hasContent = true;
             continue;
         }
         currentRule += char;
+        if (char.trim())
+            hasContent = true;
         if (char === '{') {
             depth++;
         }
         else if (char === '}') {
             depth--;
-            if (depth === 0) {
-                const trimmed = currentRule.trim();
-                if (trimmed)
-                    rules.push(trimmed);
-                currentRule = '';
-            }
+            if (depth === 0)
+                flush();
         }
         else if (char === ';' && depth === 0) {
-            const trimmed = currentRule.trim();
-            if (trimmed)
-                rules.push(trimmed);
-            currentRule = '';
+            flush();
         }
     }
     const trimmed = currentRule.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/turbopack-loader",
-  "version": "16.4.2",
+  "version": "17.0.0",
   "description": "Plumeria Turbopack-loader",
   "author": "Refirst 11",
   "license": "MIT",
@@ -22,7 +22,8 @@
     "zero-virtual.css"
   ],
   "dependencies": {
-    "@plumeria/utils": "^16.4.2"
+    "@plumeria/compiler": "^17.0.0",
+    "@plumeria/utils": "^17.0.0"
   },
   "devDependencies": {
     "@swc/core": "1.15.43",