@cube-dev/ui-kit 0.0.0-canary-9e3bcfc → 0.0.0-canary-eaff7d7

package/es/tasty/zero/babel.js

@@ -0,0 +1,385 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
+ * Released under the MIT license.
+ */
+
+/**
+ * Babel plugin for zero-runtime tasty static site generation.
+ *
+ * Transforms:
+ * - `tastyStatic(styles)` → StaticStyle object { className, styles, toString() }
+ * - `tastyStatic(base, styles)` → StaticStyle object with merged styles
+ * - `tastyStatic(selector, styles)` → removed entirely
+ *
+ * Usage:
+ * ```javascript
+ * // babel.config.js
+ * module.exports = {
+ *   plugins: [
+ *     ['@cube-dev/ui-kit/tasty/zero/babel', { output: 'public/tasty.css' }]
+ *   ]
+ * };
+ * ```
+ */
+import { declare } from '@babel/helper-plugin-utils';
+import * as t from '@babel/types';
+import { setGlobalPredefinedStates } from '../states';
+import { mergeStyles } from '../utils/mergeStyles';
+import { CSSWriter } from './css-writer';
+import { extractStylesForSelector, extractStylesWithChunks } from './extractor';
+export default declare((api, options) => {
+    api.assertVersion(7);
+    const outputPath = options.output || 'tasty.css';
+    const config = options.config || {};
+    const devMode = config.devMode ?? false;
+    // Apply global predefined states if configured
+    if (config.states) {
+        setGlobalPredefinedStates(config.states);
+    }
+    const cssWriter = new CSSWriter(outputPath, { devMode });
+    // Global registry for cross-file references (same build)
+    const globalRegistry = {};
+    return {
+        name: 'tasty-zero',
+        pre() {
+            // Initialize per-file registry
+            this.staticStyleRegistry = {};
+            // Extract source filename for devMode comments
+            if (devMode && this.filename) {
+                // Get relative path or just filename
+                this.sourceFile = this.filename.split('/').pop() || this.filename;
+            }
+        },
+        visitor: {
+            // Remove import statements for tasty/static
+            ImportDeclaration(path) {
+                const source = path.node.source.value;
+                if (source === '@cube-dev/ui-kit/tasty/static' ||
+                    source.endsWith('/tasty/static')) {
+                    path.remove();
+                }
+            },
+            // Transform tastyStatic() calls
+            CallExpression(path, state) {
+                const callee = path.node.callee;
+                // Match tastyStatic(...) calls
+                if (!t.isIdentifier(callee, { name: 'tastyStatic' })) {
+                    return;
+                }
+                const args = path.node.arguments;
+                if (args.length === 0) {
+                    throw path.buildCodeFrameError('tastyStatic() requires at least one argument');
+                }
+                const firstArg = args[0];
+                if (t.isStringLiteral(firstArg)) {
+                    // Selector mode: tastyStatic(selector, styles)
+                    handleSelectorMode(path, args, cssWriter, state.sourceFile);
+                }
+                else if (t.isObjectExpression(firstArg)) {
+                    // Styles mode: tastyStatic(styles)
+                    handleStylesMode(path, args, cssWriter, state, globalRegistry);
+                }
+                else if (t.isIdentifier(firstArg)) {
+                    // Extension mode: tastyStatic(base, styles)
+                    handleExtensionMode(path, args, cssWriter, state, globalRegistry);
+                }
+                else {
+                    throw path.buildCodeFrameError('tastyStatic() first argument must be an object (styles), ' +
+                        'identifier (base StaticStyle), or string (selector)');
+                }
+            },
+            // Track variable declarations to register StaticStyle objects
+            VariableDeclarator(path, state) {
+                const init = path.node.init;
+                const id = path.node.id;
+                // Check if this is a StaticStyle object (has className and styles properties)
+                if (t.isIdentifier(id) &&
+                    t.isObjectExpression(init) &&
+                    isStaticStyleObject(init)) {
+                    const variableName = id.name;
+                    const styles = extractStylesFromStaticStyleObject(init, path);
+                    const className = extractClassNameFromStaticStyleObject(init);
+                    if (styles && className) {
+                        state.staticStyleRegistry[variableName] = { styles, className };
+                        globalRegistry[variableName] = { styles, className };
+                    }
+                }
+            },
+        },
+        post() {
+            // Write all collected CSS at the end of the build
+            if (cssWriter.size > 0) {
+                cssWriter.write();
+            }
+        },
+    };
+});
+/**
+ * Check if an object expression looks like a StaticStyle object
+ */
+function isStaticStyleObject(node) {
+    const hasClassName = node.properties.some((p) => t.isObjectProperty(p) && t.isIdentifier(p.key, { name: 'className' }));
+    const hasStyles = node.properties.some((p) => t.isObjectProperty(p) && t.isIdentifier(p.key, { name: 'styles' }));
+    return hasClassName && hasStyles;
+}
+/**
+ * Extract styles object from a StaticStyle object expression
+ */
+function extractStylesFromStaticStyleObject(node, path) {
+    for (const prop of node.properties) {
+        if (t.isObjectProperty(prop) &&
+            t.isIdentifier(prop.key, { name: 'styles' }) &&
+            t.isObjectExpression(prop.value)) {
+            return evaluateObjectExpression(prop.value, path);
+        }
+    }
+    return null;
+}
+/**
+ * Extract className from a StaticStyle object expression
+ */
+function extractClassNameFromStaticStyleObject(node) {
+    for (const prop of node.properties) {
+        if (t.isObjectProperty(prop) &&
+            t.isIdentifier(prop.key, { name: 'className' }) &&
+            t.isStringLiteral(prop.value)) {
+            return prop.value.value;
+        }
+    }
+    return null;
+}
+/**
+ * Handle tastyStatic(styles) - returns StaticStyle object
+ */
+function handleStylesMode(path, args, cssWriter, state, globalRegistry) {
+    const stylesArg = args[0];
+    if (!t.isObjectExpression(stylesArg)) {
+        throw path.buildCodeFrameError('tastyStatic(styles) argument must be a static object literal');
+    }
+    // Evaluate styles object at build time
+    const styles = evaluateObjectExpression(stylesArg, path);
+    // Extract styles with chunking
+    const chunks = extractStylesWithChunks(styles);
+    // Add CSS to writer (with source for devMode)
+    for (const chunk of chunks) {
+        cssWriter.add(chunk.className, chunk.css, state.sourceFile);
+    }
+    // Generate className
+    const className = chunks.length > 0 ? chunks.map((c) => c.className).join(' ') : '';
+    // Replace call with StaticStyle object
+    const staticStyleObject = createStaticStyleAST(className, styles);
+    path.replaceWith(staticStyleObject);
+    // Register if this is being assigned to a variable
+    registerIfVariableDeclaration(path, className, styles, state, globalRegistry);
+}
+/**
+ * Handle tastyStatic(base, styles) - extends base with additional styles
+ */
+function handleExtensionMode(path, args, cssWriter, state, globalRegistry) {
+    if (args.length < 2) {
+        throw path.buildCodeFrameError('tastyStatic(base, styles) requires two arguments');
+    }
+    const baseArg = args[0];
+    const stylesArg = args[1];
+    if (!t.isIdentifier(baseArg)) {
+        throw path.buildCodeFrameError('tastyStatic(base, styles) first argument must be an identifier');
+    }
+    if (!t.isObjectExpression(stylesArg)) {
+        throw path.buildCodeFrameError('tastyStatic(base, styles) second argument must be a static object literal');
+    }
+    const baseName = baseArg.name;
+    // Look up base styles in registry
+    const baseEntry = state.staticStyleRegistry[baseName] || globalRegistry[baseName];
+    if (!baseEntry) {
+        throw path.buildCodeFrameError(`Cannot find base StaticStyle '${baseName}'. ` +
+            'Make sure it is defined before being extended.');
+    }
+    // Evaluate override styles
+    const overrideStyles = evaluateObjectExpression(stylesArg, path);
+    // Merge styles using mergeStyles
+    const mergedStyles = mergeStyles(baseEntry.styles, overrideStyles);
+    // Extract styles with chunking
+    const chunks = extractStylesWithChunks(mergedStyles);
+    // Add CSS to writer (with source for devMode)
+    for (const chunk of chunks) {
+        cssWriter.add(chunk.className, chunk.css, state.sourceFile);
+    }
+    // Generate className
+    const className = chunks.length > 0 ? chunks.map((c) => c.className).join(' ') : '';
+    // Replace call with StaticStyle object
+    const staticStyleObject = createStaticStyleAST(className, mergedStyles);
+    path.replaceWith(staticStyleObject);
+    // Register if this is being assigned to a variable
+    registerIfVariableDeclaration(path, className, mergedStyles, state, globalRegistry);
+}
+/**
+ * Handle tastyStatic(selector, styles) - removes the call entirely
+ */
+function handleSelectorMode(path, args, cssWriter, sourceFile) {
+    if (args.length < 2) {
+        throw path.buildCodeFrameError('tastyStatic(selector, styles) requires two arguments');
+    }
+    const selectorArg = args[0];
+    const stylesArg = args[1];
+    if (!t.isStringLiteral(selectorArg)) {
+        throw path.buildCodeFrameError('tastyStatic(selector, styles) first argument must be a string literal');
+    }
+    if (!t.isObjectExpression(stylesArg)) {
+        throw path.buildCodeFrameError('tastyStatic(selector, styles) second argument must be a static object literal');
+    }
+    const selector = selectorArg.value;
+    const styles = evaluateObjectExpression(stylesArg, path);
+    // Extract styles for selector
+    const result = extractStylesForSelector(selector, styles);
+    // Add CSS to writer (use selector as key for deduplication, with source for devMode)
+    cssWriter.add(selector, result.css, sourceFile);
+    // Remove the entire statement
+    const parent = path.parentPath;
+    if (parent && t.isExpressionStatement(parent.node)) {
+        parent.remove();
+    }
+    else {
+        // If used in an expression context (which would be incorrect usage),
+        // replace with undefined
+        path.replaceWith(t.identifier('undefined'));
+    }
+}
+/**
+ * Create a StaticStyle object AST node
+ */
+function createStaticStyleAST(className, styles) {
+    return t.objectExpression([
+        t.objectProperty(t.identifier('className'), t.stringLiteral(className)),
+        t.objectProperty(t.identifier('styles'), valueToAST(styles)),
+        t.objectMethod('method', t.identifier('toString'), [], t.blockStatement([
+            t.returnStatement(t.memberExpression(t.thisExpression(), t.identifier('className'))),
+        ])),
+    ]);
+}
+/**
+ * Register a StaticStyle in the registry if it's being assigned to a variable
+ */
+function registerIfVariableDeclaration(path, className, styles, state, globalRegistry) {
+    const parent = path.parentPath;
+    if (parent && t.isVariableDeclarator(parent.node)) {
+        const id = parent.node.id;
+        if (t.isIdentifier(id)) {
+            const variableName = id.name;
+            state.staticStyleRegistry[variableName] = { styles, className };
+            globalRegistry[variableName] = { styles, className };
+        }
+    }
+}
+/**
+ * Convert a JavaScript value to an AST node
+ */
+function valueToAST(value) {
+    if (value === null) {
+        return t.nullLiteral();
+    }
+    if (value === undefined) {
+        return t.identifier('undefined');
+    }
+    if (typeof value === 'string') {
+        return t.stringLiteral(value);
+    }
+    if (typeof value === 'number') {
+        return t.numericLiteral(value);
+    }
+    if (typeof value === 'boolean') {
+        return t.booleanLiteral(value);
+    }
+    if (Array.isArray(value)) {
+        return t.arrayExpression(value.map(valueToAST));
+    }
+    if (typeof value === 'object') {
+        const properties = Object.entries(value).map(([key, val]) => t.objectProperty(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)
+            ? t.identifier(key)
+            : t.stringLiteral(key), valueToAST(val)));
+        return t.objectExpression(properties);
+    }
+    // Fallback for unsupported types
+    return t.identifier('undefined');
+}
+/**
+ * Evaluate an ObjectExpression to a plain JavaScript object.
+ * Only supports static values that can be determined at build time.
+ */
+function evaluateObjectExpression(node, path) {
+    const result = {};
+    for (const prop of node.properties) {
+        if (t.isSpreadElement(prop)) {
+            throw path.buildCodeFrameError('Spread elements are not supported in tastyStatic() - styles must be fully static');
+        }
+        if (!t.isObjectProperty(prop)) {
+            throw path.buildCodeFrameError('Only object properties are supported in tastyStatic()');
+        }
+        // Get key
+        let key;
+        if (t.isIdentifier(prop.key)) {
+            key = prop.key.name;
+        }
+        else if (t.isStringLiteral(prop.key)) {
+            key = prop.key.value;
+        }
+        else {
+            throw path.buildCodeFrameError('Dynamic property keys are not supported in tastyStatic()');
+        }
+        // Get value
+        const value = evaluateExpression(prop.value, path);
+        result[key] = value;
+    }
+    return result;
+}
+/**
+ * Evaluate an expression to a JavaScript value.
+ */
+function evaluateExpression(node, path) {
+    if (t.isStringLiteral(node)) {
+        return node.value;
+    }
+    if (t.isNumericLiteral(node)) {
+        return node.value;
+    }
+    if (t.isBooleanLiteral(node)) {
+        return node.value;
+    }
+    if (t.isNullLiteral(node)) {
+        return null;
+    }
+    if (t.isIdentifier(node, { name: 'undefined' })) {
+        return undefined;
+    }
+    if (t.isArrayExpression(node)) {
+        return node.elements.map((el) => {
+            if (el === null)
+                return null;
+            if (t.isSpreadElement(el)) {
+                throw path.buildCodeFrameError('Spread elements are not supported in tastyStatic()');
+            }
+            return evaluateExpression(el, path);
+        });
+    }
+    if (t.isObjectExpression(node)) {
+        return evaluateObjectExpression(node, path);
+    }
+    if (t.isTemplateLiteral(node)) {
+        // Only support template literals without expressions
+        if (node.expressions.length > 0) {
+            throw path.buildCodeFrameError('Template literals with expressions are not supported in tastyStatic()');
+        }
+        return node.quasis.map((q) => q.value.cooked).join('');
+    }
+    if (t.isUnaryExpression(node, { operator: '-' })) {
+        const arg = evaluateExpression(node.argument, path);
+        if (typeof arg === 'number') {
+            return -arg;
+        }
+    }
+    throw path.buildCodeFrameError(`Dynamic expressions are not supported in tastyStatic() - got ${node.type}. ` +
+        'All values must be static literals.');
+}
+
+        

package/es/tasty/zero/css-writer.js

@@ -0,0 +1,94 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
+ * Released under the MIT license.
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+export class CSSWriter {
+    cssBlocks = new Map();
+    outputPath;
+    devMode;
+    constructor(outputPath, options = {}) {
+        this.outputPath = outputPath;
+        this.devMode = options.devMode ?? false;
+    }
+    /**
+     * Add CSS block with deduplication key
+     * @param key - Unique key for deduplication
+     * @param css - CSS content
+     * @param source - Optional source file path (used in devMode)
+     */
+    add(key, css, source) {
+        if (!this.cssBlocks.has(key)) {
+            this.cssBlocks.set(key, { css, source });
+        }
+    }
+    /**
+     * Check if a key already exists
+     */
+    has(key) {
+        return this.cssBlocks.has(key);
+    }
+    /**
+     * Get the number of CSS blocks
+     */
+    get size() {
+        return this.cssBlocks.size;
+    }
+    /**
+     * Write all collected CSS to the output file
+     */
+    write() {
+        const outputDir = path.dirname(this.outputPath);
+        // Ensure directory exists
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+        }
+        // Combine all CSS blocks with optional source comments
+        const cssBlocks = [];
+        for (const block of this.cssBlocks.values()) {
+            if (this.devMode && block.source) {
+                cssBlocks.push(`/* from: ${block.source} */\n${block.css}`);
+            }
+            else {
+                cssBlocks.push(block.css);
+            }
+        }
+        const css = cssBlocks.join('\n\n');
+        // Add header comment
+        const header = `/* Generated by @cube-dev/ui-kit/tasty/zero - DO NOT EDIT */\n\n`;
+        fs.writeFileSync(this.outputPath, header + css);
+    }
+    /**
+     * Get all CSS as string (for testing or in-memory use)
+     */
+    getCSS() {
+        const cssBlocks = [];
+        for (const block of this.cssBlocks.values()) {
+            if (this.devMode && block.source) {
+                cssBlocks.push(`/* from: ${block.source} */\n${block.css}`);
+            }
+            else {
+                cssBlocks.push(block.css);
+            }
+        }
+        return cssBlocks.join('\n\n');
+    }
+    /**
+     * Clear all collected CSS
+     */
+    clear() {
+        this.cssBlocks.clear();
+    }
+    /**
+     * Get the output path
+     */
+    getOutputPath() {
+        return this.outputPath;
+    }
+}
+
+        

package/es/tasty/zero/extractor.js

@@ -0,0 +1,75 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
+ * Released under the MIT license.
+ */
+
+import { createHash } from 'crypto';
+import { categorizeStyleKeys, generateChunkCacheKey, renderStylesForChunk, } from '../chunks';
+import { renderStyles } from '../pipeline';
+/**
+ * Generate a deterministic className from a cache key using content hash.
+ * This ensures the same styles always produce the same className,
+ * regardless of build order or incremental compilation.
+ */
+function generateClassName(cacheKey) {
+    const hash = createHash('md5').update(cacheKey).digest('hex').slice(0, 6);
+    return `ts${hash}`; // 'ts' prefix for "tasty-static" to distinguish from runtime 't' classes
+}
+/**
+ * Extract styles using chunking (for className mode).
+ * Returns multiple classes, one per chunk.
+ */
+export function extractStylesWithChunks(styles) {
+    const chunks = [];
+    // Categorize style keys into chunks
+    const chunkMap = categorizeStyleKeys(styles);
+    for (const [chunkName, chunkStyleKeys] of chunkMap) {
+        if (chunkStyleKeys.length === 0)
+            continue;
+        // Generate cache key for this chunk (used for className hash)
+        const cacheKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys);
+        // Render styles for this chunk
+        const renderResult = renderStylesForChunk(styles, chunkName, chunkStyleKeys);
+        if (renderResult.rules.length === 0)
+            continue;
+        // Generate deterministic className from content hash
+        const className = generateClassName(cacheKey);
+        const selector = `.${className}.${className}`;
+        // Format CSS
+        const css = formatRulesToCSS(renderResult.rules, selector);
+        chunks.push({ className, css });
+    }
+    return chunks;
+}
+/**
+ * Extract styles for a specific selector (for global/selector mode).
+ * Returns a single CSS block.
+ */
+export function extractStylesForSelector(selector, styles) {
+    const rules = renderStyles(styles, selector);
+    const css = formatRulesToCSS(rules, selector);
+    return { selector, css };
+}
+/**
+ * Format StyleResult[] to CSS string
+ */
+function formatRulesToCSS(rules, _baseSelector) {
+    return rules
+        .map((rule) => {
+        let css = `${rule.selector} { ${rule.declarations} }`;
+        // Wrap in at-rules (in reverse order for proper nesting)
+        if (rule.atRules && rule.atRules.length > 0) {
+            for (const atRule of [...rule.atRules].reverse()) {
+                css = `${atRule} {\n  ${css}\n}`;
+            }
+        }
+        return css;
+    })
+        .join('\n\n');
+}
+// Note: With hash-based className generation, counter management functions
+// are no longer needed. ClassNames are deterministic based on content.
+
+        

package/es/tasty/zero/index.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
+ * Released under the MIT license.
+ */
+
+/**
+ * Zero-runtime module for programmatic use.
+ *
+ * For the Babel plugin, import from '@cube-dev/ui-kit/tasty/zero/babel'
+ *
+ * @example
+ * ```typescript
+ * import { extractStylesWithChunks, CSSWriter } from '@cube-dev/ui-kit/tasty/zero';
+ *
+ * const chunks = extractStylesWithChunks({ fill: '#blue', padding: '2x' });
+ * const writer = new CSSWriter('output.css');
+ * chunks.forEach(chunk => writer.add(chunk.className, chunk.css));
+ * writer.write();
+ * ```
+ */
+// Core extraction utilities
+export { extractStylesWithChunks, extractStylesForSelector } from './extractor';
+// CSS output utilities
+export { CSSWriter } from './css-writer';
+
+        

package/es/tasty/zero/next.js

@@ -0,0 +1,102 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
+ * Released under the MIT license.
+ */
+
+/**
+ * Next.js configuration wrapper for tasty-zero.
+ *
+ * Provides a convenient way to configure the Babel plugin for Next.js projects.
+ *
+ * @example
+ * ```javascript
+ * // next.config.js
+ * const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');
+ *
+ * module.exports = withTastyZero({
+ *   output: 'public/tasty.css',
+ * })({
+ *   // your Next.js config
+ * });
+ * ```
+ */
+import * as path from 'path';
+/**
+ * Next.js configuration wrapper for tasty-zero.
+ *
+ * @param options - Configuration options
+ * @returns A function that wraps the Next.js config
+ *
+ * @example
+ * ```javascript
+ * // next.config.js
+ * const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');
+ *
+ * module.exports = withTastyZero()({
+ *   reactStrictMode: true,
+ * });
+ * ```
+ */
+export function withTastyZero(options = {}) {
+    const { output = 'public/tasty.css', enabled = true } = options;
+    return (nextConfig = {}) => {
+        if (!enabled) {
+            return nextConfig;
+        }
+        return {
+            ...nextConfig,
+            webpack(config, context) {
+                const { isServer, dir } = context;
+                // Only process on client build to avoid duplicate CSS generation
+                if (!isServer) {
+                    // Get absolute output path
+                    const absoluteOutput = path.resolve(dir || process.cwd(), output);
+                    // Find existing babel-loader rule or add new one
+                    const babelPluginConfig = [
+                        require.resolve('./babel'),
+                        { output: absoluteOutput },
+                    ];
+                    // Add our plugin to the existing babel config or create new rule
+                    const existingRule = config.module?.rules?.find((rule) => rule.use?.loader === 'babel-loader' ||
+                        rule.use?.some?.((u) => u.loader === 'babel-loader'));
+                    if (existingRule) {
+                        // Add to existing babel-loader
+                        const babelUse = Array.isArray(existingRule.use)
+                            ? existingRule.use.find((u) => u.loader === 'babel-loader')
+                            : existingRule.use;
+                        if (babelUse?.options) {
+                            babelUse.options.plugins = babelUse.options.plugins || [];
+                            babelUse.options.plugins.push(babelPluginConfig);
+                        }
+                    }
+                    else {
+                        // Add new rule for our plugin
+                        config.module = config.module || {};
+                        config.module.rules = config.module.rules || [];
+                        config.module.rules.push({
+                            test: /\.(tsx?|jsx?)$/,
+                            exclude: /node_modules/,
+                            use: [
+                                {
+                                    loader: require.resolve('babel-loader'),
+                                    options: {
+                                        plugins: [babelPluginConfig],
+                                    },
+                                },
+                            ],
+                        });
+                    }
+                }
+                // Chain with existing webpack config
+                if (typeof nextConfig.webpack === 'function') {
+                    return nextConfig.webpack(config, context);
+                }
+                return config;
+            },
+        };
+    };
+}
+
+        

package/es/tokens.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9e3bcfc
+ * @cube-dev/ui-kit v0.0.0-canary-eaff7d7
  * Released under the MIT license.
  */