@plumeria/codemod 18.2.17 → 18.2.19

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

@@ -0,0 +1,45 @@
+export interface PlumeriaReport {
+    line: number;
+    column: number;
+    kind: string;
+    hint: string;
+}
+export interface PlumeriaModule {
+    binding: string;
+    css: string;
+    globalCss: string;
+    keys: string[];
+    functions: Record<string, {
+        params: string[];
+        variables: string[];
+    }>;
+    aliases: Record<string, Record<string, string>>;
+    definitionOnly: boolean;
+    reports: PlumeriaReport[];
+}
+export interface ThemeExtraction {
+    bindings: Record<string, Record<string, string>>;
+    globalCss: string;
+    reports: PlumeriaReport[];
+}
+export interface StaticExtraction {
+    bindings: Record<string, Record<string, unknown>>;
+    reports: PlumeriaReport[];
+}
+export interface AnimationExtraction {
+    bindings: Record<string, string>;
+    keyframes: string[];
+    viewTransitions: string[];
+    globalCss: string;
+    reports: PlumeriaReport[];
+}
+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

@@ -0,0 +1,555 @@
+"use strict";
+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;
+    if (node.type === 'Identifier')
+        return node.name;
+    return node.type === 'Literal' ? String(node.value) : undefined;
+};
+const memberPath = (node) => {
+    if (node?.type === 'Identifier')
+        return [node.name];
+    if (node?.type !== 'MemberExpression')
+        return undefined;
+    const parent = memberPath(node.object);
+    const key = node.computed
+        ? propertyKey(node.property)
+        : node.property?.type === 'Identifier'
+            ? node.property.name
+            : undefined;
+    return parent && key !== undefined ? [...parent, key] : undefined;
+};
+const lookup = (path, values) => {
+    let value = values.get(path[0]);
+    for (const key of path.slice(1)) {
+        if (!value || typeof value !== 'object')
+            return undefined;
+        value = value[key];
+    }
+    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')
+        return values.get(node.name);
+    if (node.type === 'MemberExpression') {
+        const path = memberPath(node);
+        return path ? lookup(path, values) : undefined;
+    }
+    if (node.type === 'TemplateLiteral') {
+        let result = '';
+        for (let index = 0; index < node.quasis.length; index++) {
+            result += node.quasis[index].value.cooked;
+            if (index < node.expressions.length) {
+                const value = evaluate(node.expressions[index], values);
+                if (value === undefined || typeof value === 'object')
+                    return undefined;
+                result += String(value);
+            }
+        }
+        return result;
+    }
+    if (node.type === 'ObjectExpression') {
+        const result = {};
+        for (const property of node.properties) {
+            if (property.type !== 'Property' || property.kind !== 'init')
+                return undefined;
+            const key = property.computed
+                ? evaluate(property.key, values)
+                : propertyKey(property.key);
+            if (typeof key !== 'string')
+                return undefined;
+            const value = evaluate(property.value, values);
+            if (value === undefined)
+                return undefined;
+            result[key] = value;
+        }
+        return result;
+    }
+    return undefined;
+};
+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;
+    const path = memberPath(node.callee);
+    return path?.length === 2 && path[1] === method;
+};
+const declarationOf = (statement) => statement.type === 'ExportNamedDeclaration'
+    ? statement.declaration
+    : statement;
+const readThemes = (ast) => {
+    const values = new Map();
+    const reports = [];
+    const globalRules = [];
+    const report = (node, kind, hint) => {
+        reports.push({
+            line: node.loc.start.line,
+            column: node.loc.start.column + 1,
+            kind,
+            hint,
+        });
+    };
+    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, 'createTheme'))
+                continue;
+            const selector = evaluate(declaration.init.arguments[0], new Map());
+            const theme = evaluate(declaration.init.arguments[1], new Map());
+            if (typeof selector !== 'string' || !theme || typeof theme !== 'object') {
+                report(declaration.init, 'dynamic-create-theme', '`createTheme` needs a static selector and static token values.');
+                continue;
+            }
+            const rootDeclarations = [];
+            const themeDeclarations = [];
+            const references = {};
+            let valid = true;
+            for (const [key, rawPair] of Object.entries(theme)) {
+                if (!rawPair || typeof rawPair !== 'object') {
+                    valid = false;
+                    break;
+                }
+                const pair = rawPair;
+                if ((typeof pair.default !== 'string' &&
+                    typeof pair.default !== 'number') ||
+                    (typeof pair.theme !== 'string' && typeof pair.theme !== 'number')) {
+                    valid = false;
+                    break;
+                }
+                const hash = (0, zss_engine_1.genBase36Hash)({ [key]: pair }, 1, 8);
+                const variable = `--${hash}-${(0, zss_engine_1.camelToKebabCase)(key)}`;
+                rootDeclarations.push(`  ${variable}: ${String(pair.default)};`);
+                themeDeclarations.push(`  ${variable}: ${String(pair.theme)};`);
+                references[key] = `var(${variable})`;
+            }
+            if (!valid) {
+                report(declaration.init, 'dynamic-create-theme', 'Every theme token needs static `default` and `theme` values.');
+                continue;
+            }
+            values.set(declaration.id.name, references);
+            globalRules.push(`:where(:root) {\n${rootDeclarations.join('\n')}\n}`);
+            const target = selector.startsWith('@') ||
+                selector.startsWith('.') ||
+                selector.startsWith('#') ||
+                selector.startsWith(':') ||
+                selector.startsWith('[')
+                ? selector
+                : `.${selector}`;
+            if ((0, zss_engine_1.isAtRule)(target)) {
+                globalRules.push(`${target} {\n  :where(:root) {\n${themeDeclarations
+                    .map((line) => `  ${line}`)
+                    .join('\n')}\n  }\n}`);
+            }
+            else {
+                globalRules.push(`${target} {\n${themeDeclarations.join('\n')}\n}`);
+            }
+        }
+    }
+    return {
+        bindings: Object.fromEntries(values),
+        globalCss: globalRules.length > 0 ? `${globalRules.join('\n\n')}\n` : '',
+        reports,
+    };
+};
+function extractPlumeriaThemes(source) {
+    const ast = (0, parser_1.parse)(source, {
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+        loc: true,
+        range: true,
+    });
+    return readThemes(ast);
+}
+const emitGlobalObject = (selector, object) => {
+    const declarations = [];
+    const children = [];
+    for (const [key, value] of Object.entries(object)) {
+        if (value && typeof value === 'object') {
+            children.push(emitGlobalObject(key, value)
+                .split('\n')
+                .map((line) => `  ${line}`)
+                .join('\n'));
+        }
+        else if (typeof value === 'string' || typeof value === 'number') {
+            const property = (0, zss_engine_1.camelToKebabCase)(key);
+            declarations.push(`  ${property}: ${(0, zss_engine_1.applyCssValue)(value, property)};`);
+        }
+    }
+    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',
+        ecmaFeatures: { jsx: true },
+        loc: true,
+        range: true,
+    });
+    const values = new Map(Object.entries(externalValues));
+    const bindings = {};
+    const reports = [];
+    const rules = [];
+    const keyframes = [];
+    const viewTransitions = [];
+    const report = (node, kind, hint) => {
+        reports.push({
+            line: node.loc.start.line,
+            column: node.loc.start.column + 1,
+            kind,
+            hint,
+        });
+    };
+    const declarations = ast.body.flatMap((raw) => {
+        const statement = declarationOf(raw);
+        return statement?.type === 'VariableDeclaration'
+            ? statement.declarations
+            : [];
+    });
+    for (const declaration of declarations) {
+        if (declaration.id.type !== 'Identifier' ||
+            !isCall(declaration.init, 'keyframes'))
+            continue;
+        const object = evaluate(declaration.init.arguments[0], values);
+        if (!object || typeof object !== 'object') {
+            report(declaration.init, 'dynamic-keyframes', '`keyframes` needs a statically resolvable object.');
+            continue;
+        }
+        const hash = (0, zss_engine_1.genBase36Hash)(object, 1, 8);
+        const name = `kf-${hash}`;
+        values.set(declaration.id.name, name);
+        bindings[declaration.id.name] = name;
+        keyframes.push(declaration.id.name);
+        rules.push(emitGlobalObject(`@keyframes ${name}`, object));
+    }
+    for (const declaration of declarations) {
+        if (declaration.id.type !== 'Identifier' ||
+            !isCall(declaration.init, 'viewTransition'))
+            continue;
+        const object = evaluate(declaration.init.arguments[0], values);
+        if (!object || typeof object !== 'object') {
+            report(declaration.init, 'dynamic-view-transition', '`viewTransition` needs a statically resolvable object.');
+            continue;
+        }
+        const hash = (0, zss_engine_1.genBase36Hash)(object, 1, 8);
+        const name = `vt-${hash}`;
+        values.set(declaration.id.name, name);
+        bindings[declaration.id.name] = name;
+        viewTransitions.push(declaration.id.name);
+        for (const part of ['group', 'imagePair', 'old', 'new']) {
+            const style = object[part];
+            if (style && typeof style === 'object') {
+                const pseudoPart = part === 'imagePair' ? 'image-pair' : part;
+                rules.push(emitGlobalObject(`::view-transition-${pseudoPart}(${name})`, style));
+            }
+        }
+    }
+    return {
+        bindings,
+        keyframes,
+        viewTransitions,
+        globalCss: rules.length > 0 ? `${rules.join('\n\n')}\n` : '',
+        reports,
+    };
+}
+function convertPlumeriaModule(source, externalValues = {}) {
+    const ast = (0, parser_1.parse)(source, {
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+        loc: true,
+        range: true,
+    });
+    const themes = readThemes(ast);
+    const animations = extractPlumeriaAnimations(source, {
+        ...externalValues,
+        ...themes.bindings,
+    });
+    const values = new Map([
+        ...Object.entries(externalValues),
+        ...Object.entries(themes.bindings),
+        ...Object.entries(animations.bindings),
+    ]);
+    const reports = [...themes.reports, ...animations.reports];
+    const creates = [];
+    const report = (node, kind, hint) => {
+        reports.push({
+            line: node.loc.start.line,
+            column: node.loc.start.column + 1,
+            kind,
+            hint,
+        });
+    };
+    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')
+                continue;
+            if (isCall(declaration.init, 'createStatic')) {
+                const value = evaluate(declaration.init.arguments[0], values);
+                if (value && typeof value === 'object') {
+                    values.set(declaration.id.name, value);
+                }
+                else {
+                    report(declaration.init, 'dynamic-create-static', '`createStatic` must contain values that can be written into CSS.');
+                }
+            }
+            if (isCall(declaration.init, 'create')) {
+                const object = declaration.init.arguments[0];
+                if (object?.type === 'ObjectExpression') {
+                    creates.push({ binding: declaration.id.name, object, declaration });
+                }
+                else {
+                    report(declaration.init, 'dynamic-create', '`css.create` must receive an object literal.');
+                }
+            }
+        }
+    }
+    if (creates.length === 0)
+        return null;
+    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.');
+            return;
+        }
+        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;
+            }
+            const rawKey = property.computed
+                ? evaluate(property.key, scope)
+                : propertyKey(property.key);
+            if (typeof rawKey !== 'string') {
+                report(property.key, 'dynamic-key', 'Selector and property keys must be statically known.');
+                continue;
+            }
+            if (rawKey.startsWith(':') ||
+                rawKey.startsWith('[') ||
+                rawKey.startsWith('@')) {
+                nested.push({ key: rawKey, value: property.value });
+                continue;
+            }
+            const value = evaluate(property.value, scope);
+            if (typeof value !== 'string' && typeof value !== 'number') {
+                report(property.value, 'dynamic-value', `The value of \`${rawKey}\` cannot be represented statically.`);
+                continue;
+            }
+            const cssProperty = (0, zss_engine_1.camelToKebabCase)(rawKey);
+            declarations.push(`  ${cssProperty}: ${(0, zss_engine_1.applyCssValue)(value, cssProperty)};`);
+        }
+        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')
+                    .map((line) => `  ${line}`)
+                    .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('@')) {
+                emit(child.value, selector, [...wrappers, child.key], scope);
+            }
+            else {
+                emit(child.value, `${selector}${child.key}`, wrappers, scope);
+            }
+        }
+    };
+    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;
+            }
+            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;
+            }
+            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;
+            }
+            keys.push(className);
+            emit(property.value, `.${className}`);
+        }
+        if (owner !== binding)
+            aliases[owner] = alias;
+    }
+    return {
+        binding,
+        css: rules.length > 0 ? `${rules.join('\n\n')}\n` : '',
+        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

@@ -0,0 +1,26 @@
+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[];
+    }>;
+}
+export interface ReleaseStylesOptions {
+    modules: Record<string, ReleaseModule>;
+    themes?: Record<string, string[]>;
+    animations?: Record<string, string[]>;
+    statics?: Record<string, string[]>;
+    styleProp?: string;
+    active?: boolean;
+}
+export declare const __private: {
+    memberPath: (node: any) => string[] | undefined;
+    isCreate: (node: any) => boolean;
+    needsFilter: (node: any) => boolean;
+};
+export declare const releaseStyles: Rule.RuleModule;