@plumeria/codemod 18.2.17 → 18.2.18

package/dist/transforms/from-plumeria.js

@@ -0,0 +1,436 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.__private = void 0;
+exports.extractPlumeriaThemes = extractPlumeriaThemes;
+exports.extractPlumeriaAnimations = extractPlumeriaAnimations;
+exports.convertPlumeriaModule = convertPlumeriaModule;
+const parser_1 = require("@typescript-eslint/parser");
+const zss_engine_1 = require("zss-engine");
+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 evaluate = (node, values) => {
+    if (!node)
+        return 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;
+};
+exports.__private = { propertyKey, memberPath, evaluate };
+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 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 });
+                }
+                else {
+                    report(declaration.init, 'dynamic-create', '`css.create` must receive an object literal.');
+                }
+            }
+        }
+    }
+    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 rules = [];
+    const keys = [];
+    const functions = {};
+    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 = [];
+        for (const property of style.properties) {
+            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)};`);
+        }
+        if (declarations.length > 0) {
+            let rule = `${selector} {\n${declarations.join('\n')}\n}`;
+            for (const wrapper of [...wrappers].reverse()) {
+                rule = `${wrapper} {\n${rule
+                    .split('\n')
+                    .map((line) => `  ${line}`)
+                    .join('\n')}\n}`;
+            }
+            rules.push(rule);
+        }
+        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 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);
+            }
+            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)(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(key);
+        emit(property.value, `.${key}`);
+    }
+    return {
+        binding,
+        css: rules.length > 0 ? `${rules.join('\n\n')}\n` : '',
+        globalCss: `${themes.globalCss}${animations.globalCss}`,
+        keys,
+        functions,
+        reports,
+    };
+}

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

@@ -0,0 +1,22 @@
+import type { Rule } from 'eslint';
+export interface ReleaseModule {
+    source: string;
+    binding: string;
+    functions?: Record<string, {
+        params: string[];
+        variables: string[];
+    }>;
+}
+export interface ReleaseStylesOptions {
+    modules: Record<string, ReleaseModule>;
+    themes?: Record<string, string[]>;
+    animations?: 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;