@plumeria/codemod 18.2.18 → 18.2.19

package/dist/cli.js

@@ -331,7 +331,7 @@ async function migrateFromCssModules(options) {
         console.log(line);
     return 1;
 }
-function releaseConfig(modules, themes, animations) {
+function releaseConfig(modules, themes, animations, statics) {
     return [
         { ignores: IGNORES },
         {
@@ -345,7 +345,10 @@ function releaseConfig(modules, themes, animations) {
             },
             plugins: { codemod: { rules: { 'release-styles': release_styles_1.releaseStyles } } },
             rules: {
-                'codemod/release-styles': ['error', { modules, themes, animations }],
+                'codemod/release-styles': [
+                    'error',
+                    { modules, themes, animations, statics },
+                ],
             },
         },
     ];
@@ -369,7 +372,7 @@ async function migrateFromPlumeria(options) {
     }
     const config = {
         overrideConfigFile: true,
-        overrideConfig: releaseConfig(planned.modules, planned.themes, planned.animations),
+        overrideConfig: releaseConfig(planned.modules, planned.themes, planned.animations, planned.statics),
         errorOnUnmatchedPattern: false,
     };
     const preview = await new eslint_1.ESLint(config).lintFiles(targets);

package/dist/release.d.ts

@@ -11,6 +11,7 @@ export interface ReleasePlan {
     modules: Record<string, ReleaseModule>;
     themes: Record<string, string[]>;
     animations: Record<string, string[]>;
+    statics: Record<string, string[]>;
     global?: {
         target: string;
         css: string;

package/dist/release.js

@@ -40,6 +40,7 @@ exports.formatReleaseReports = formatReleaseReports;
 const fs = __importStar(require("node:fs"));
 const path = __importStar(require("node:path"));
 const parser_1 = require("@typescript-eslint/parser");
+const resolve_1 = require("./resolve");
 const from_plumeria_1 = require("./transforms/from-plumeria");
 const EXTENSION = /\.(?:[cm]?[jt]sx?)$/;
 const IGNORED = new Set([
@@ -74,7 +75,7 @@ const findSources = (targets) => {
     }
     return found.sort();
 };
-const releasedPath = (source) => source.replace(/\.[^.]+$/, '.module.css');
+const releasedPath = (source) => source.replace(/(?:\.styles)?\.[^.]+$/, '.module.css');
 exports.releasedPath = releasedPath;
 const globalPath = (targets) => {
     const first = path.resolve(targets[0]);
@@ -93,11 +94,22 @@ function planRelease(targets) {
     const modules = {};
     const themes = {};
     const animations = {};
+    const statics = {};
     const globalRules = [];
     const sources = findSources(targets);
     const sourceText = new Map(sources.map((source) => [source, fs.readFileSync(source, 'utf8')]));
     const themeValues = new Map();
     const animationValues = new Map();
+    const staticValues = new Map();
+    for (const source of sources) {
+        try {
+            const extracted = (0, from_plumeria_1.extractPlumeriaStatics)(sourceText.get(source));
+            if (Object.keys(extracted.bindings).length > 0)
+                staticValues.set(source, extracted.bindings);
+        }
+        catch {
+        }
+    }
     for (const source of sources) {
         try {
             const extracted = (0, from_plumeria_1.extractPlumeriaThemes)(sourceText.get(source));
@@ -121,11 +133,6 @@ function planRelease(targets) {
         catch {
         }
     }
-    const sourceForImport = (owner, specifier, candidates) => {
-        const resolved = path.resolve(path.dirname(owner), specifier);
-        const stem = resolved.replace(/\.[^.]+$/, '');
-        return [...candidates].find((candidate) => candidate.replace(/\.[^.]+$/, '') === stem);
-    };
     const importedValues = (source, availableBySource) => {
         const result = {};
         const ast = (0, parser_1.parse)(sourceText.get(source), {
@@ -134,13 +141,14 @@ function planRelease(targets) {
         });
         for (const node of ast.body) {
             if (node.type !== 'ImportDeclaration' ||
-                typeof node.source.value !== 'string' ||
-                !node.source.value.startsWith('.'))
+                typeof node.source.value !== 'string')
                 continue;
-            const target = sourceForImport(source, node.source.value, availableBySource.keys());
+            const target = (0, resolve_1.resolveSourcePath)(node.source.value, source);
             if (!target)
                 continue;
             const available = availableBySource.get(target);
+            if (!available)
+                continue;
             for (const specifier of node.specifiers) {
                 if (specifier.type === 'ImportSpecifier') {
                     const imported = specifier.imported.name ?? specifier.imported.value;
@@ -154,22 +162,33 @@ function planRelease(targets) {
         }
         return result;
     };
-    const importedThemes = (source) => importedValues(source, themeValues);
-    const importedAnimations = (source) => importedValues(source, animationValues);
     const importedPlumeriaValues = (source) => {
-        const merged = { ...importedThemes(source) };
-        for (const [key, value] of Object.entries(importedAnimations(source))) {
-            const previous = merged[key];
-            merged[key] =
-                previous &&
-                    typeof previous === 'object' &&
-                    value &&
-                    typeof value === 'object'
-                    ? { ...previous, ...value }
-                    : value;
+        const merged = {};
+        for (const table of [staticValues, themeValues, animationValues]) {
+            for (const [key, value] of Object.entries(importedValues(source, table))) {
+                const previous = merged[key];
+                merged[key] =
+                    previous &&
+                        typeof previous === 'object' &&
+                        value &&
+                        typeof value === 'object'
+                        ? { ...previous, ...value }
+                        : value;
+            }
         }
         return merged;
     };
+    for (const source of sources) {
+        try {
+            const extracted = (0, from_plumeria_1.extractPlumeriaStatics)(sourceText.get(source), importedPlumeriaValues(source));
+            if (Object.keys(extracted.bindings).length === 0)
+                continue;
+            staticValues.set(source, extracted.bindings);
+            statics[source] = Object.keys(extracted.bindings);
+        }
+        catch {
+        }
+    }
     for (const source of sources) {
         try {
             const extracted = (0, from_plumeria_1.extractPlumeriaAnimations)(sourceText.get(source), {
@@ -218,7 +237,12 @@ function planRelease(targets) {
         if (reports.length === 0) {
             modules[source] = {
                 source: specifier,
+                target,
                 binding: converted.binding,
+                ...(converted.definitionOnly ? { definitionOnly: true } : {}),
+                ...(Object.keys(converted.aliases).length > 0
+                    ? { aliases: converted.aliases }
+                    : {}),
                 ...(Object.keys(converted.functions).length > 0
                     ? { functions: converted.functions }
                     : {}),
@@ -230,6 +254,7 @@ function planRelease(targets) {
         modules,
         themes,
         animations,
+        statics,
         global: globalRules.length > 0
             ? {
                 target: globalPath(targets),

package/dist/resolve.d.ts

@@ -0,0 +1,2 @@
+export declare const resetTsconfigCache: () => void;
+export declare function resolveSourcePath(specifier: string, importer: string): string | null;

package/dist/resolve.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetTsconfigCache = void 0;
+exports.resolveSourcePath = resolveSourcePath;
+const fs = __importStar(require("node:fs"));
+const path = __importStar(require("node:path"));
+const get_tsconfig_1 = require("get-tsconfig");
+const EXTENSIONS = [
+    '.ts',
+    '.tsx',
+    '.mts',
+    '.cts',
+    '.js',
+    '.jsx',
+    '.mjs',
+    '.cjs',
+];
+const CANDIDATES = [
+    ...EXTENSIONS,
+    ...EXTENSIONS.map((extension) => `${path.sep}index${extension}`),
+];
+const REWRITTEN = {
+    '.js': ['.ts', '.tsx'],
+    '.jsx': ['.tsx'],
+    '.mjs': ['.mts'],
+    '.cjs': ['.cts'],
+};
+let cachedMatcher;
+const pathsMatcher = () => {
+    if (cachedMatcher === undefined) {
+        const tsconfig = (0, get_tsconfig_1.getTsconfig)(process.cwd());
+        cachedMatcher = tsconfig ? (0, get_tsconfig_1.createPathsMatcher)(tsconfig) : null;
+    }
+    return cachedMatcher;
+};
+const resetTsconfigCache = () => {
+    cachedMatcher = undefined;
+};
+exports.resetTsconfigCache = resetTsconfigCache;
+const isFile = (candidate) => fs.statSync(candidate, { throwIfNoEntry: false })?.isFile() ?? false;
+const resolveFile = (base) => {
+    if (isFile(base))
+        return base;
+    const extension = path.extname(base);
+    for (const rewritten of REWRITTEN[extension] ?? []) {
+        const candidate = `${base.slice(0, -extension.length)}${rewritten}`;
+        if (isFile(candidate))
+            return candidate;
+    }
+    for (const candidate of CANDIDATES) {
+        if (isFile(base + candidate))
+            return base + candidate;
+    }
+    return null;
+};
+function resolveSourcePath(specifier, importer) {
+    if (specifier === '@plumeria/core')
+        return null;
+    if (specifier.startsWith('.')) {
+        return resolveFile(path.resolve(path.dirname(importer), specifier));
+    }
+    const matcher = pathsMatcher();
+    if (!matcher)
+        return null;
+    for (const candidate of matcher(specifier)) {
+        const resolved = resolveFile(candidate);
+        if (resolved)
+            return resolved;
+    }
+    return null;
+}

package/dist/transforms/from-plumeria.d.ts

@@ -13,6 +13,8 @@ export interface PlumeriaModule {
         params: string[];
         variables: string[];
     }>;
+    aliases: Record<string, Record<string, string>>;
+    definitionOnly: boolean;
     reports: PlumeriaReport[];
 }
 export interface ThemeExtraction {
@@ -20,6 +22,10 @@ export interface ThemeExtraction {
     globalCss: string;
     reports: PlumeriaReport[];
 }
+export interface StaticExtraction {
+    bindings: Record<string, Record<string, unknown>>;
+    reports: PlumeriaReport[];
+}
 export interface AnimationExtraction {
     bindings: Record<string, string>;
     keyframes: string[];
@@ -31,7 +37,9 @@ export declare const __private: {
     propertyKey: (node: any) => string | undefined;
     memberPath: (node: any) => string[] | undefined;
     evaluate: (node: any, values: Map<string, unknown>) => unknown;
+    bindsElsewhere: (ast: any, name: string, declared: any) => boolean;
 };
 export declare function extractPlumeriaThemes(source: string): ThemeExtraction;
+export declare function extractPlumeriaStatics(source: string, externalValues?: Record<string, unknown>): StaticExtraction;
 export declare function extractPlumeriaAnimations(source: string, externalValues?: Record<string, unknown>): AnimationExtraction;
 export declare function convertPlumeriaModule(source: string, externalValues?: Record<string, unknown>): PlumeriaModule | null;

package/dist/transforms/from-plumeria.js

@@ -2,10 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.__private = void 0;
 exports.extractPlumeriaThemes = extractPlumeriaThemes;
+exports.extractPlumeriaStatics = extractPlumeriaStatics;
 exports.extractPlumeriaAnimations = extractPlumeriaAnimations;
 exports.convertPlumeriaModule = convertPlumeriaModule;
 const parser_1 = require("@typescript-eslint/parser");
 const zss_engine_1 = require("zss-engine");
+const toIdent = (value) => value.replace(/[^A-Za-z0-9-]/g, '');
+const markerVariable = (id, pseudo) => {
+    const hash = (0, zss_engine_1.genBase36Hash)({ [id]: pseudo }, 1, 8);
+    return `--${hash}-${toIdent(id)}-${toIdent(pseudo.split('(')[0])}`;
+};
 const propertyKey = (node) => {
     if (!node)
         return undefined;
@@ -35,9 +41,27 @@ const lookup = (path, values) => {
     }
     return value;
 };
+const markerArguments = (node, method, values) => {
+    if (node?.type !== 'CallExpression')
+        return undefined;
+    const path = memberPath(node.callee);
+    if (path?.length !== 2 || path[1] !== method)
+        return undefined;
+    const id = evaluate(node.arguments[0], values);
+    const pseudo = evaluate(node.arguments[1], values);
+    return typeof id === 'string' && typeof pseudo === 'string'
+        ? { id, pseudo }
+        : undefined;
+};
 const evaluate = (node, values) => {
     if (!node)
         return undefined;
+    if (node.type === 'CallExpression') {
+        const extended = markerArguments(node, 'extended', values);
+        return extended
+            ? `@container style(${markerVariable(extended.id, extended.pseudo)}: 1)`
+            : undefined;
+    }
     if (node.type === 'Literal')
         return node.value;
     if (node.type === 'Identifier')
@@ -78,7 +102,29 @@ const evaluate = (node, values) => {
     }
     return undefined;
 };
-exports.__private = { propertyKey, memberPath, evaluate };
+const bindsElsewhere = (ast, name, declared) => {
+    const skipped = new Set(['loc', 'range', 'parent']);
+    const visit = (node, parent) => {
+        if (!node || typeof node !== 'object' || node === declared)
+            return false;
+        if (Array.isArray(node))
+            return node.some((child) => visit(child, parent));
+        if (typeof node.type !== 'string')
+            return false;
+        if (node.type === 'Identifier' && node.name === name) {
+            if (parent?.type === 'ExportSpecifier')
+                return false;
+            if (parent?.type === 'MemberExpression' && parent.property === node)
+                return !!parent.computed;
+            if (parent?.type === 'Property' && parent.key === node)
+                return !!parent.computed;
+            return true;
+        }
+        return Object.keys(node).some((key) => !skipped.has(key) && visit(node[key], node));
+    };
+    return visit(ast, undefined);
+};
+exports.__private = { propertyKey, memberPath, evaluate, bindsElsewhere };
 const isCall = (node, method) => {
     if (node?.type !== 'CallExpression')
         return false;
@@ -192,6 +238,41 @@ const emitGlobalObject = (selector, object) => {
     const content = [...declarations, ...children].join('\n');
     return `${selector} {\n${content}\n}`;
 };
+function extractPlumeriaStatics(source, externalValues = {}) {
+    const ast = (0, parser_1.parse)(source, {
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+        loc: true,
+        range: true,
+    });
+    const values = new Map(Object.entries(externalValues));
+    const bindings = {};
+    const reports = [];
+    for (const raw of ast.body) {
+        const statement = declarationOf(raw);
+        if (statement?.type !== 'VariableDeclaration')
+            continue;
+        for (const declaration of statement.declarations) {
+            if (declaration.id.type !== 'Identifier' ||
+                !isCall(declaration.init, 'createStatic'))
+                continue;
+            const value = evaluate(declaration.init.arguments[0], values);
+            if (value && typeof value === 'object') {
+                values.set(declaration.id.name, value);
+                bindings[declaration.id.name] = value;
+            }
+            else {
+                reports.push({
+                    line: declaration.init.loc.start.line,
+                    column: declaration.init.loc.start.column + 1,
+                    kind: 'dynamic-create-static',
+                    hint: '`createStatic` must contain values that can be written into CSS.',
+                });
+            }
+        }
+    }
+    return { bindings, reports };
+}
 function extractPlumeriaAnimations(source, externalValues = {}) {
     const ast = (0, parser_1.parse)(source, {
         sourceType: 'module',
@@ -311,7 +392,7 @@ function convertPlumeriaModule(source, externalValues = {}) {
             if (isCall(declaration.init, 'create')) {
                 const object = declaration.init.arguments[0];
                 if (object?.type === 'ObjectExpression') {
-                    creates.push({ binding: declaration.id.name, object });
+                    creates.push({ binding: declaration.id.name, object, declaration });
                 }
                 else {
                     report(declaration.init, 'dynamic-create', '`css.create` must receive an object literal.');
@@ -321,13 +402,22 @@ function convertPlumeriaModule(source, externalValues = {}) {
     }
     if (creates.length === 0)
         return null;
-    if (creates.length > 1) {
-        report(creates[1].object, 'multiple-create', 'Move each `css.create` call to its own module before exporting to CSS Modules.');
-    }
-    const { binding, object } = creates[0];
+    const { binding } = creates[0];
     const rules = [];
     const keys = [];
+    const aliases = {};
+    const taken = new Set();
     const functions = {};
+    const classNameFor = (owner, key) => {
+        if (!taken.has(key))
+            return key;
+        const namespaced = `${owner}-${key}`;
+        let candidate = namespaced;
+        let suffix = 2;
+        while (taken.has(candidate))
+            candidate = `${namespaced}-${suffix++}`;
+        return candidate;
+    };
     const emit = (style, selector, wrappers = [], scope = values) => {
         if (style?.type !== 'ObjectExpression') {
             report(style, 'dynamic-style', 'Only static style objects are exported.');
@@ -335,7 +425,18 @@ function convertPlumeriaModule(source, externalValues = {}) {
         }
         const declarations = [];
         const nested = [];
+        const markers = [];
         for (const property of style.properties) {
+            if (property.type === 'SpreadElement') {
+                const marker = markerArguments(property.argument, 'marker', scope);
+                if (marker) {
+                    markers.push({
+                        pseudo: marker.pseudo,
+                        variable: markerVariable(marker.id, marker.pseudo),
+                    });
+                    continue;
+                }
+            }
             if (property.type !== 'Property' || property.kind !== 'init') {
                 report(property, 'spread-style', 'Spread styles must be expanded before exporting to CSS Modules.');
                 continue;
@@ -361,8 +462,10 @@ function convertPlumeriaModule(source, externalValues = {}) {
             const cssProperty = (0, zss_engine_1.camelToKebabCase)(rawKey);
             declarations.push(`  ${cssProperty}: ${(0, zss_engine_1.applyCssValue)(value, cssProperty)};`);
         }
-        if (declarations.length > 0) {
-            let rule = `${selector} {\n${declarations.join('\n')}\n}`;
+        const pushRule = (target, lines) => {
+            if (lines.length === 0)
+                return;
+            let rule = `${target} {\n${lines.join('\n')}\n}`;
             for (const wrapper of [...wrappers].reverse()) {
                 rule = `${wrapper} {\n${rule
                     .split('\n')
@@ -370,6 +473,10 @@ function convertPlumeriaModule(source, externalValues = {}) {
                     .join('\n')}\n}`;
             }
             rules.push(rule);
+        };
+        pushRule(selector, declarations);
+        for (const marker of markers) {
+            pushRule(`${selector}${marker.pseudo}`, [`  ${marker.variable}: 1;`]);
         }
         for (const child of nested) {
             if (child.key.startsWith('@')) {
@@ -380,50 +487,60 @@ function convertPlumeriaModule(source, externalValues = {}) {
             }
         }
     };
-    for (const property of object.properties) {
-        if (property.type !== 'Property' || property.kind !== 'init') {
-            report(property, 'spread-create', 'Top-level spreads cannot name a CSS Module class.');
-            continue;
-        }
-        const key = property.computed
-            ? evaluate(property.key, values)
-            : propertyKey(property.key);
-        if (typeof key !== 'string') {
-            report(property.key, 'dynamic-style-key', 'Style names must be statically known.');
-            continue;
-        }
-        if (property.value.type === 'ArrowFunctionExpression' ||
-            property.value.type === 'FunctionExpression') {
-            const params = [];
-            let valid = true;
-            for (const parameter of property.value.params) {
-                if (parameter.type !== 'Identifier') {
-                    valid = false;
-                    break;
-                }
-                params.push(parameter.name);
+    for (const create of creates) {
+        const owner = create.binding;
+        const alias = {};
+        for (const property of create.object.properties) {
+            if (property.type !== 'Property' || property.kind !== 'init') {
+                report(property, 'spread-create', 'Top-level spreads cannot name a CSS Module class.');
+                continue;
             }
-            let body = property.value.body;
-            if (body.type === 'BlockStatement') {
-                const returned = body.body.find((statement) => statement.type === 'ReturnStatement');
-                body = returned?.argument;
+            const key = property.computed
+                ? evaluate(property.key, values)
+                : propertyKey(property.key);
+            if (typeof key !== 'string') {
+                report(property.key, 'dynamic-style-key', 'Style names must be statically known.');
+                continue;
             }
-            if (!valid || body?.type !== 'ObjectExpression') {
-                report(property.value, 'function-style', 'Function style keys need identifier parameters and an object return value.');
+            const className = classNameFor(owner, key);
+            taken.add(className);
+            if (owner !== binding)
+                alias[key] = className;
+            if (property.value.type === 'ArrowFunctionExpression' ||
+                property.value.type === 'FunctionExpression') {
+                const params = [];
+                let valid = true;
+                for (const parameter of property.value.params) {
+                    if (parameter.type !== 'Identifier') {
+                        valid = false;
+                        break;
+                    }
+                    params.push(parameter.name);
+                }
+                let body = property.value.body;
+                if (body.type === 'BlockStatement') {
+                    const returned = body.body.find((statement) => statement.type === 'ReturnStatement');
+                    body = returned?.argument;
+                }
+                if (!valid || body?.type !== 'ObjectExpression') {
+                    report(property.value, 'function-style', 'Function style keys need identifier parameters and an object return value.');
+                    continue;
+                }
+                const variables = params.map((parameter) => `--${(0, zss_engine_1.camelToKebabCase)(owner)}-${(0, zss_engine_1.camelToKebabCase)(key)}-${(0, zss_engine_1.camelToKebabCase)(parameter)}`);
+                const scope = new Map(values);
+                params.forEach((parameter, index) => {
+                    scope.set(parameter, `var(${variables[index]})`);
+                });
+                functions[className] = { params, variables };
+                keys.push(className);
+                emit(body, `.${className}`, [], scope);
                 continue;
             }
-            const variables = params.map((parameter) => `--${(0, zss_engine_1.camelToKebabCase)(binding)}-${(0, zss_engine_1.camelToKebabCase)(key)}-${(0, zss_engine_1.camelToKebabCase)(parameter)}`);
-            const scope = new Map(values);
-            params.forEach((parameter, index) => {
-                scope.set(parameter, `var(${variables[index]})`);
-            });
-            functions[key] = { params, variables };
-            keys.push(key);
-            emit(body, `.${key}`, [], scope);
-            continue;
+            keys.push(className);
+            emit(property.value, `.${className}`);
         }
-        keys.push(key);
-        emit(property.value, `.${key}`);
+        if (owner !== binding)
+            aliases[owner] = alias;
     }
     return {
         binding,
@@ -431,6 +548,8 @@ function convertPlumeriaModule(source, externalValues = {}) {
         globalCss: `${themes.globalCss}${animations.globalCss}`,
         keys,
         functions,
+        aliases,
+        definitionOnly: creates.every((create) => !bindsElsewhere(ast, create.binding, create.declaration.id)),
         reports,
     };
 }

package/dist/transforms/release-styles.d.ts

@@ -1,7 +1,10 @@
 import type { Rule } from 'eslint';
 export interface ReleaseModule {
     source: string;
+    target?: string;
     binding: string;
+    definitionOnly?: boolean;
+    aliases?: Record<string, Record<string, string>>;
     functions?: Record<string, {
         params: string[];
         variables: string[];
@@ -11,6 +14,7 @@ export interface ReleaseStylesOptions {
     modules: Record<string, ReleaseModule>;
     themes?: Record<string, string[]>;
     animations?: Record<string, string[]>;
+    statics?: Record<string, string[]>;
     styleProp?: string;
     active?: boolean;
 }

package/dist/transforms/release-styles.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.releaseStyles = exports.__private = void 0;
 const path = __importStar(require("node:path"));
+const resolve_1 = require("../resolve");
 const memberPath = (node) => {
     if (node?.type === 'Identifier')
         return [node.name];
@@ -54,6 +55,7 @@ const isCreate = (node) => {
     const path = memberPath(node.callee);
     return path?.length === 2 && path[1] === 'create';
 };
+const IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
 const needsFilter = (node) => node.type === 'LogicalExpression' ||
     node.type === 'ConditionalExpression' ||
     node.type === 'SpreadElement';
@@ -72,6 +74,8 @@ exports.releaseStyles = {
             themeImport: 'Remove the createTheme import after inlining its CSS variables.',
             animation: '`keyframes` or `viewTransition` was written globally.',
             animationImport: 'Remove the animation import after replacing it with its generated name.',
+            staticImport: 'Remove the createStatic import after inlining its values into the CSS.',
+            alias: 'Read this style from the CSS Module the whole file was exported to.',
             core: 'Remove the Plumeria import after exporting the styles.',
             prop: 'Use className after exporting this style to CSS Modules.',
             composition: 'Join the composed CSS Module class names.',
@@ -85,6 +89,7 @@ exports.releaseStyles = {
                     modules: { type: 'object' },
                     themes: { type: 'object' },
                     animations: { type: 'object' },
+                    statics: { type: 'object' },
                     styleProp: { type: 'string' },
                     active: { type: 'boolean' },
                 },
@@ -94,43 +99,80 @@ exports.releaseStyles = {
     },
     create(context) {
         const raw = (context.options[0] ?? {});
-        const entry = raw.modules?.[context.filename];
+        const declared = raw.modules?.[context.filename];
+        const entry = declared?.definitionOnly ? undefined : declared;
         const themeBindings = raw.themes?.[context.filename] ?? [];
         const animationBindings = raw.animations?.[context.filename] ?? [];
         const styleProp = raw.styleProp ?? 'classStyle';
         const sourceCode = context.sourceCode;
         let active = Boolean(entry || raw.active);
         let activeModule = entry;
-        const importedReleasedModule = (specifier) => {
-            if (!specifier.startsWith('.'))
-                return undefined;
-            const resolved = path.resolve(path.dirname(context.filename), specifier);
-            const withoutExtension = resolved.replace(/\.[^.]+$/, '');
-            const source = Object.keys(raw.modules ?? {}).find((candidate) => candidate.replace(/\.[^.]+$/, '') === withoutExtension);
-            return source ? raw.modules?.[source] : undefined;
+        const specifierFor = (module) => {
+            if (!module.target)
+                return module.source;
+            const relative = path
+                .relative(path.dirname(context.filename), module.target)
+                .split(path.sep)
+                .join('/');
+            return relative.startsWith('.') ? relative : `./${relative}`;
         };
-        const importedThemeBindings = (specifier) => {
-            if (!specifier.startsWith('.'))
-                return undefined;
-            const resolved = path.resolve(path.dirname(context.filename), specifier);
-            const withoutExtension = resolved.replace(/\.[^.]+$/, '');
-            const source = Object.keys(raw.themes ?? {}).find((candidate) => candidate.replace(/\.[^.]+$/, '') === withoutExtension);
-            return source ? raw.themes?.[source] : undefined;
+        const importOf = (specifiers, source) => {
+            const defaultImport = specifiers.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
+            const namedImports = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
+            const clauses = [];
+            if (defaultImport)
+                clauses.push(sourceCode.getText(defaultImport));
+            if (namedImports.length > 0) {
+                clauses.push(`{ ${namedImports
+                    .map((specifier) => sourceCode.getText(specifier))
+                    .join(', ')} }`);
+            }
+            return `import ${clauses.join(', ')} from ${sourceCode.getText(source)};`;
         };
-        const importedAnimationBindings = (specifier) => {
-            if (!specifier.startsWith('.'))
+        const importedFrom = (specifier, table) => {
+            const resolved = (0, resolve_1.resolveSourcePath)(specifier, context.filename);
+            return resolved ? table?.[resolved] : undefined;
+        };
+        const importedReleasedModule = (specifier) => importedFrom(specifier, raw.modules);
+        const importedThemeBindings = (specifier) => importedFrom(specifier, raw.themes);
+        const importedAnimationBindings = (specifier) => importedFrom(specifier, raw.animations);
+        const importedStaticBindings = (specifier) => importedFrom(specifier, raw.statics);
+        const releasedRange = () => {
+            if (!entry)
                 return undefined;
-            const resolved = path.resolve(path.dirname(context.filename), specifier);
-            const withoutExtension = resolved.replace(/\.[^.]+$/, '');
-            const source = Object.keys(raw.animations ?? {}).find((candidate) => candidate.replace(/\.[^.]+$/, '') === withoutExtension);
-            return source ? raw.animations?.[source] : undefined;
+            for (const statement of sourceCode.ast.body) {
+                const declaration = statement.type === 'ExportNamedDeclaration'
+                    ? statement.declaration
+                    : statement;
+                if (declaration?.type !== 'VariableDeclaration')
+                    continue;
+                for (const candidate of declaration.declarations) {
+                    if (candidate.id.type === 'Identifier' &&
+                        candidate.id.name === entry.binding &&
+                        isCreate(candidate.init))
+                        return statement.range;
+                }
+            }
+            return undefined;
         };
-        const removeImportedBindings = (node, bindings, messageId) => {
+        const onlyUsedByReleasedStyles = (local) => {
+            const range = releasedRange();
+            if (!range)
+                return false;
+            const scope = sourceCode.getScope(sourceCode.ast);
+            const moduleScope = scope.type === 'global' ? (scope.childScopes[0] ?? scope) : scope;
+            const variable = moduleScope.variables.find((candidate) => candidate.name === local);
+            if (!variable || variable.references.length === 0)
+                return false;
+            return variable.references.every((reference) => reference.identifier.range[0] >= range[0] &&
+                reference.identifier.range[1] <= range[1]);
+        };
+        const removeImportedBindings = (node, bindings, messageId, dead) => {
             const removed = node.specifiers.filter((specifier) => {
                 if (specifier.type !== 'ImportSpecifier')
                     return false;
                 const name = specifier.imported.name ?? specifier.imported.value;
-                return bindings.includes(name);
+                return bindings.includes(name) && (!dead || dead(specifier));
             });
             if (removed.length === 0)
                 return false;
@@ -138,21 +180,9 @@ exports.releaseStyles = {
             context.report({
                 node,
                 messageId,
-                fix: (fixer) => {
-                    if (retained.length === 0)
-                        return fixer.remove(node);
-                    const defaultImport = retained.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
-                    const namedImports = retained.filter((specifier) => specifier.type === 'ImportSpecifier');
-                    const clauses = [];
-                    if (defaultImport)
-                        clauses.push(sourceCode.getText(defaultImport));
-                    if (namedImports.length > 0) {
-                        clauses.push(`{ ${namedImports
-                            .map((specifier) => sourceCode.getText(specifier))
-                            .join(', ')} }`);
-                    }
-                    return fixer.replaceText(node, `import ${clauses.join(', ')} from ${sourceCode.getText(node.source)};`);
-                },
+                fix: (fixer) => retained.length === 0
+                    ? fixer.remove(node)
+                    : fixer.replaceText(node, importOf(retained, node.source)),
             });
             return true;
         };
@@ -177,16 +207,30 @@ exports.releaseStyles = {
                     if (removeImportedBindings(node, importedThemes, 'themeImport'))
                         return;
                 }
+                const importedStatics = importedStaticBindings(String(node.source.value));
+                if (importedStatics) {
+                    if (removeImportedBindings(node, importedStatics, 'staticImport', (specifier) => onlyUsedByReleasedStyles(specifier.local.name)))
+                        return;
+                }
                 const importedModule = importedReleasedModule(String(node.source.value));
                 if (importedModule) {
                     active = true;
                     const importedBinding = node.specifiers.find((specifier) => specifier.type === 'ImportSpecifier' &&
                         (specifier.imported.name ?? specifier.imported.value) ===
                             importedModule.binding);
-                    activeModule = {
-                        ...importedModule,
-                        binding: importedBinding?.local.name ?? importedModule.binding,
-                    };
+                    const local = importedBinding?.local.name ?? importedModule.binding;
+                    activeModule = { ...importedModule, binding: local };
+                    if (importedModule.definitionOnly && importedBinding) {
+                        const retained = node.specifiers.filter((specifier) => specifier !== importedBinding);
+                        const released = `import ${local} from '${specifierFor(importedModule)}';`;
+                        context.report({
+                            node,
+                            messageId: 'definition',
+                            fix: (fixer) => fixer.replaceText(node, retained.length === 0
+                                ? released
+                                : `${released}\n${importOf(retained, node.source)}`),
+                        });
+                    }
                 }
             },
             VariableDeclaration(node) {
@@ -218,8 +262,18 @@ exports.releaseStyles = {
                 }
                 if (!entry)
                     return;
-                if (declaration.id.name !== entry.binding ||
-                    !isCreate(declaration.init))
+                if (!isCreate(declaration.init))
+                    return;
+                if (entry.aliases?.[declaration.id.name]) {
+                    const aliased = node.parent?.type === 'ExportNamedDeclaration' ? node.parent : node;
+                    context.report({
+                        node: aliased,
+                        messageId: 'definition',
+                        fix: (fixer) => fixer.remove(aliased),
+                    });
+                    return;
+                }
+                if (declaration.id.name !== entry.binding)
                     return;
                 const exported = node.parent?.type === 'ExportNamedDeclaration';
                 const target = exported ? node.parent : node;
@@ -233,6 +287,29 @@ exports.releaseStyles = {
                     fix: (fixer) => fixer.replaceText(target, replacement),
                 });
             },
+            MemberExpression(node) {
+                if (!entry?.aliases || node.object.type !== 'Identifier')
+                    return;
+                const alias = entry.aliases[node.object.name];
+                if (!alias)
+                    return;
+                const key = node.computed
+                    ? node.property.type === 'Literal'
+                        ? String(node.property.value)
+                        : undefined
+                    : node.property.name;
+                const className = key ? alias[key] : undefined;
+                if (!className)
+                    return;
+                const access = IDENTIFIER.test(className)
+                    ? `.${className}`
+                    : `['${className}']`;
+                context.report({
+                    node,
+                    messageId: 'alias',
+                    fix: (fixer) => fixer.replaceText(node, `${entry.binding}${access}`),
+                });
+            },
             JSXAttribute(node) {
                 if (!active)
                     return;
@@ -242,23 +319,34 @@ exports.releaseStyles = {
                     ? node.value.expression
                     : undefined;
                 const moduleInfo = activeModule;
-                const functionStyle = (value) => {
-                    if (!moduleInfo ||
-                        value?.type !== 'CallExpression' ||
-                        value.callee.type !== 'MemberExpression' ||
-                        value.callee.object.type !== 'Identifier' ||
-                        value.callee.object.name !== moduleInfo.binding)
+                const readsModule = (callee) => Boolean(moduleInfo &&
+                    callee?.type === 'MemberExpression' &&
+                    callee.object.type === 'Identifier' &&
+                    (callee.object.name === moduleInfo.binding ||
+                        moduleInfo.aliases?.[callee.object.name]));
+                const styleKey = (callee) => {
+                    if (!readsModule(callee))
                         return undefined;
-                    const key = value.callee.computed
-                        ? value.callee.property.type === 'Literal'
-                            ? String(value.callee.property.value)
+                    const raw = callee.computed
+                        ? callee.property.type === 'Literal'
+                            ? String(callee.property.value)
                             : undefined
-                        : value.callee.property.name;
+                        : callee.property.name;
+                    if (raw === undefined)
+                        return undefined;
+                    const alias = moduleInfo.aliases?.[callee.object.name];
+                    return alias ? alias[raw] : raw;
+                };
+                const functionStyle = (value) => {
+                    if (!moduleInfo || value?.type !== 'CallExpression')
+                        return undefined;
+                    const key = styleKey(value.callee);
                     const func = key ? moduleInfo.functions?.[key] : undefined;
                     if (!key || !func || func.variables.length !== value.arguments.length)
                         return undefined;
+                    const access = IDENTIFIER.test(key) ? `.${key}` : `['${key}']`;
                     return {
-                        className: `${moduleInfo.binding}.${key}`,
+                        className: `${moduleInfo.binding}${access}`,
                         declarations: func.variables.map((variable, index) => {
                             const argument = sourceCode.getText(value.arguments[index]);
                             return `'${variable}': ${argument}`;
@@ -299,9 +387,7 @@ exports.releaseStyles = {
                     return;
                 }
                 if (expression?.type === 'CallExpression' &&
-                    expression.callee.type === 'MemberExpression' &&
-                    expression.callee.object.type === 'Identifier' &&
-                    expression.callee.object.name === moduleInfo?.binding) {
+                    readsModule(expression.callee)) {
                     context.report({
                         node,
                         messageId: 'unsupportedFunctionStyle',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/codemod",
-  "version": "18.2.18",
+  "version": "18.2.19",
   "description": "Codemods for migrating Plumeria APIs",
   "author": "Refirst 11",
   "license": "MIT",
@@ -34,6 +34,7 @@
   "dependencies": {
     "@typescript-eslint/parser": "^8.60.0",
     "eslint": "^10.4.1",
+    "get-tsconfig": "^4.14.2",
     "postcss": "8.5.25",
     "postcss-selector-parser": "^7.1.1",
     "zss-engine": "2.6.0"