@plumeria/unplugin 16.5.0 → 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 = [];
@@ -1485,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

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, collectReferenceIdentifiers, 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 = [];
@@ -1449,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/unplugin",
-  "version": "16.5.0",
+  "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.5.0"
+    "@plumeria/utils": "^17.0.0"
   },
   "devDependencies": {
     "@swc/core": "1.15.43",