@plumeria/unplugin 16.4.2 → 17.0.0

package/README.md

@@ -146,8 +146,52 @@ plumeria.vite({
   include: ['**/*.{ts,tsx}'],
   exclude: ['**/node_modules/**'],
   devEmitToDisk: false,
+  styleProp: 'sx',
 });
 ```
+
+| Option | Default | Description |
+| :-- | :-- | :-- |
+| `include` | `ts/tsx/js/jsx` | Files to transform. |
+| `exclude` | — | Files to skip. |
+| `devEmitToDisk` | `false` | Write CSS to disk in development so the bundler's watcher drives HMR. |
+| `styleProp` | `'styleName'` | The JSX prop that carries styles. |
+
+### styleProp
+
+Renaming the prop takes two steps, and they have to agree. Tell the plugin:
+
+```js
+plumeria.vite({ styleProp: 'sx' });
+```
+
+and declare the same name for TypeScript. `@plumeria/core` ships no prop declaration of its own, so add one file to your project:
+
+```ts
+// plumeria.d.ts
+import type { Style } from '@plumeria/core';
+
+declare global {
+  namespace React {
+    interface HTMLAttributes<T> {
+      sx?: Style
+    }
+    interface SVGAttributes<T> {
+      sx?: Style
+    }
+  }
+}
+```
+
+For the default name, reference the declaration that ships with the package instead:
+
+```ts
+// plumeria.d.ts
+/// <reference types="@plumeria/core/style-name" />
+```
+
+If the two disagree, the prop type-checks but is never compiled away. [`@plumeria/eslint-plugin`](https://www.npmjs.com/package/@plumeria/eslint-plugin) reads the same name from `settings.plumeria.styleProp`.
+
 ## Development Mode and HMR (Hot Module Replacement)
 
 `@plumeria/unplugin` provides HMR optimized for each bundler in development mode (dev server).

package/dist/core.d.ts

@@ -3,6 +3,7 @@ export interface PluginOptions {
     include?: string | RegExp | Array<string | RegExp>;
     exclude?: string | RegExp | Array<string | RegExp>;
     devEmitToDisk?: boolean;
+    styleProp?: string;
 }
 export declare const TARGET_EXTENSIONS: string[];
 export declare const EXTENSION_PATTERN: RegExp;

package/dist/core.js

@@ -43,6 +43,7 @@ exports.TARGET_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx'];
 exports.EXTENSION_PATTERN = /\.(ts|tsx|js|jsx)$/;
 const unpluginFactory = (options = {}, unpluginMeta) => {
     const filter = (0, pluginutils_1.createFilter)(options.include, options.exclude);
+    const styleProp = options.styleProp ?? utils_1.DEFAULT_STYLE_PROP;
     const cssLookup = new Map();
     const cssFileLookup = new Map();
     const targets = [];
@@ -382,17 +383,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
             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;
@@ -618,7 +609,6 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     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);
                         });
@@ -628,7 +618,6 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     if (processedDecls.has(node))
                         return;
                     node.declarations.forEach((decl) => {
-                        checkVariantAssignment(decl);
                         registerStyle(decl, node.span, false);
                         checkStyleAliasAssignment(decl);
                     });
@@ -764,10 +753,17 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 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];
@@ -877,6 +873,14 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     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;
                 };
@@ -1360,17 +1364,6 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                                 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];
@@ -1431,13 +1424,21 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                         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;
@@ -1456,11 +1457,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                                     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];
@@ -1470,11 +1467,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     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;
                         }
                     }
@@ -1485,11 +1478,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     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)})`);
                         }
                     }
                 },
@@ -1497,7 +1486,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     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
@@ -1782,12 +1771,27 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     }
                 },
             });
+            const buildExportedInit = (info) => {
+                const keys = Object.keys(info.obj);
+                if (!isDev || 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(viteRoot, baseId)}.`);
+                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 {

package/dist/core.mjs

@@ -2,11 +2,12 @@ import { createFilter } from '@rollup/pluginutils';
 import { parseSync } from '@swc/core';
 import * as path from 'path';
 import { applyCssValue, genBase36Hash, exceptionCamelCase, camelToKebabCase, isAtRule, } from 'zss-engine';
-import { traverse, getStyleRecords, collectLocalConsts, objectExpressionToObject, t, getRootIdentifier, extractOndemandStyles, deepMerge, scanAll, resolveImportPath, getLeadingCommentLength, optimizer, getFileDependencies, resolveExport, } from '@plumeria/utils';
+import { traverse, collectReferenceIdentifiers, getStyleRecords, collectLocalConsts, objectExpressionToObject, t, getRootIdentifier, extractOndemandStyles, deepMerge, scanAll, resolveImportPath, getLeadingCommentLength, optimizer, getFileDependencies, resolveExport, DEFAULT_STYLE_PROP, } from '@plumeria/utils';
 export const TARGET_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx'];
 export const EXTENSION_PATTERN = /\.(ts|tsx|js|jsx)$/;
 export const unpluginFactory = (options = {}, unpluginMeta) => {
     const filter = createFilter(options.include, options.exclude);
+    const styleProp = options.styleProp ?? DEFAULT_STYLE_PROP;
     const cssLookup = new Map();
     const cssFileLookup = new Map();
     const targets = [];
@@ -346,17 +347,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
             const processedDecls = new Set();
             const idSpans = new Set();
             const excludedSpans = new Set();
-            const checkVariantAssignment = (decl) => {
-                const init = decl.init;
-                if (init && t.isCallExpression(init) && 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: ${t.isIdentifier(decl.id) ? decl.id.value : 'unknown'}`, init);
-                    }
-                }
-            };
+            const referenceIdents = collectReferenceIdentifiers(ast);
             const registerStyle = (node, declSpan, isExported) => {
                 let propName;
                 const init = node.init;
@@ -582,7 +573,6 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     if (t.isVariableDeclaration(node.declaration)) {
                         processedDecls.add(node.declaration);
                         node.declaration.declarations.forEach((decl) => {
-                            checkVariantAssignment(decl);
                             registerStyle(decl, node.span, true);
                             checkStyleAliasAssignment(decl);
                         });
@@ -592,7 +582,6 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     if (processedDecls.has(node))
                         return;
                     node.declarations.forEach((decl) => {
-                        checkVariantAssignment(decl);
                         registerStyle(decl, node.span, false);
                         checkStyleAliasAssignment(decl);
                     });
@@ -728,10 +717,17 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 else if (t.isMemberExpression(expr) &&
                     t.isIdentifier(expr.object) &&
                     (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 (!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];
@@ -841,6 +837,14 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     else if (node.type === 'ParenthesisExpression') {
                         return collectConditions(node.expression, currentTestStrings);
                     }
+                    if (currentTestStrings.length > 0 &&
+                        t.isMemberExpression(node) &&
+                        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;
                 };
@@ -1324,17 +1328,6 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                                 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];
@@ -1395,13 +1388,21 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                         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;
@@ -1420,11 +1421,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                                     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];
@@ -1434,11 +1431,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     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;
                         }
                     }
@@ -1449,11 +1442,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     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)})`);
                         }
                     }
                 },
@@ -1461,7 +1450,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     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
@@ -1746,12 +1735,27 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     }
                 },
             });
+            const buildExportedInit = (info) => {
+                const keys = Object.keys(info.obj);
+                if (!isDev || 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(viteRoot, baseId)}.`);
+                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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/unplugin",
-  "version": "16.4.2",
+  "version": "17.0.0",
   "description": "Universal Plumeria plugin for various build tools",
   "author": "Refirst 11",
   "license": "MIT",
@@ -89,7 +89,7 @@
   "dependencies": {
     "@rollup/pluginutils": "^5.4.0",
     "unplugin": "^3.0.0",
-    "@plumeria/utils": "^16.4.2"
+    "@plumeria/utils": "^17.0.0"
   },
   "devDependencies": {
     "@swc/core": "1.15.43",