@ethlete/core 4.31.0 → 5.0.0-beta.11

package/generators/tailwind-4-color-theme/generator.js

@@ -0,0 +1,513 @@
+import { formatFiles, logger, visitNotIgnoredFiles } from '@nx/devkit';
+import { Project, SyntaxKind } from 'ts-morph';
+export default async function generate(tree, schema) {
+    logger.log('\n🔄 Starting Tailwind 4 theme generator...\n');
+    const themesPath = schema.themesPath || 'src/themes.ts';
+    const outputPath = schema.outputPath || 'src/styles/generated-tailwind-themes.css';
+    const prefix = schema.prefix || 'et';
+    // Step 1: Check if themes file exists
+    if (!tree.exists(themesPath)) {
+        logger.error(`❌ Themes file not found at: ${themesPath}`);
+        logger.log(`\nPlease specify the correct path using --themesPath option.`);
+        logger.log(`Example: nx g @ethlete/core:tailwind-4-color-theme --themesPath=src/app/themes.ts\n`);
+        return;
+    }
+    logger.log(`📁 Reading themes from: ${themesPath}`);
+    // Step 2: Read and parse themes file
+    const themesContent = tree.read(themesPath, 'utf-8');
+    if (!themesContent) {
+        logger.error('❌ Failed to read themes file');
+        return;
+    }
+    // Step 3: Try to extract themes using TypeScript
+    let themes;
+    try {
+        themes = extractThemesFromContent(themesContent, themesPath);
+        logger.log(`✅ Found ${themes.length} theme(s)`);
+    }
+    catch (error) {
+        logger.error('❌ Failed to parse themes file');
+        logger.error(`   ${error instanceof Error ? error.message : String(error)}`);
+        logger.log('\nThe themes file must export themes as:');
+        logger.log('  export const THEMES = [...] satisfies Theme[];\n');
+        return;
+    }
+    // Step 4: Validate theme configuration
+    try {
+        validateThemeConfiguration(themes);
+    }
+    catch (error) {
+        logger.error('❌ Theme configuration error');
+        logger.error(`   ${error instanceof Error ? error.message : String(error)}`);
+        return;
+    }
+    // Step 5: Generate Tailwind CSS
+    logger.log('\n🎨 Generating Tailwind theme CSS...');
+    const css = generateTailwindThemeCss(themes, prefix, schema);
+    // Step 6: Write the generated CSS file
+    const outputDir = outputPath.substring(0, outputPath.lastIndexOf('/'));
+    if (outputDir && !tree.exists(outputDir)) {
+        logger.log(`📁 Creating directory: ${outputDir}`);
+    }
+    tree.write(outputPath, css);
+    logger.log(`✅ Generated Tailwind themes at: ${outputPath}`);
+    // Step 7: Try to find and update main styles file
+    const mainStylesFiles = findMainStylesFile(tree);
+    if (mainStylesFiles.length > 0) {
+        logger.log('\n📝 Found potential main styles files:');
+        mainStylesFiles.forEach((file) => logger.log(`   - ${file}`));
+        logger.log('\n⚠️  Please manually import the generated themes:');
+        logger.log(`   @import './${outputPath.replace('src/styles/', '')}';`);
+    }
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+    logger.log('\n✅ Generation completed successfully!\n');
+}
+//#endregion
+//#region Helper Functions
+function extractThemesFromContent(content, filePath) {
+    // Create an in-memory TypeScript project
+    const project = new Project({
+        useInMemoryFileSystem: true,
+        compilerOptions: {
+            target: 99, // ESNext
+            module: 99, // ESNext
+        },
+    });
+    // Add the source file
+    const sourceFile = project.createSourceFile(filePath, content);
+    const themes = [];
+    // Find all exported const declarations
+    const exportedDeclarations = sourceFile.getVariableDeclarations().filter((decl) => {
+        const statement = decl.getVariableStatement();
+        return statement?.isExported();
+    });
+    // Look for the THEMES or themes array
+    const themesArray = exportedDeclarations.find((decl) => {
+        const name = decl.getName();
+        return name === 'THEMES' || name === 'themes';
+    });
+    if (!themesArray) {
+        throw new Error('Could not find THEMES or themes export');
+    }
+    let initializer = themesArray.getInitializer();
+    if (!initializer) {
+        throw new Error('THEMES export has no initializer');
+    }
+    // Handle 'satisfies' expression: [array] satisfies Type[]
+    if (initializer.isKind(SyntaxKind.SatisfiesExpression)) {
+        initializer = initializer.getExpression();
+    }
+    // Handle 'as const': [array] as const
+    if (initializer.isKind(SyntaxKind.AsExpression)) {
+        initializer = initializer.getExpression();
+    }
+    if (!initializer.isKind(SyntaxKind.ArrayLiteralExpression)) {
+        throw new Error('THEMES export must be an array literal');
+    }
+    // Get the array elements (these are references to the theme const declarations)
+    const elements = initializer.getElements();
+    for (const element of elements) {
+        // Resolve the identifier to its declaration
+        if (element.isKind(SyntaxKind.Identifier)) {
+            const name = element.getText();
+            const themeDecl = exportedDeclarations.find((decl) => decl.getName() === name);
+            if (!themeDecl) {
+                logger.warn(`⚠️  Could not find declaration for theme: ${name}`);
+                continue;
+            }
+            let themeObj = themeDecl.getInitializer();
+            if (!themeObj) {
+                logger.warn(`⚠️  Theme ${name} has no initializer`);
+                continue;
+            }
+            // Handle 'as const' on individual theme objects
+            if (themeObj.isKind(SyntaxKind.AsExpression)) {
+                themeObj = themeObj.getExpression();
+            }
+            if (!themeObj.isKind(SyntaxKind.ObjectLiteralExpression)) {
+                logger.warn(`⚠️  Theme ${name} is not an object literal`);
+                continue;
+            }
+            try {
+                const theme = parseThemeObject(themeObj, sourceFile);
+                themes.push(theme);
+            }
+            catch (error) {
+                logger.warn(`⚠️  Failed to parse theme ${name}: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        }
+    }
+    if (themes.length === 0) {
+        throw new Error('No valid themes found in THEMES array');
+    }
+    return themes;
+}
+function parseThemeObject(obj, sourceFile) {
+    const properties = obj.getProperties();
+    const theme = {};
+    for (const prop of properties) {
+        if (!prop.isKind(SyntaxKind.PropertyAssignment)) {
+            continue;
+        }
+        const propName = prop.getName();
+        const initializer = prop.getInitializer();
+        if (!initializer) {
+            continue;
+        }
+        switch (propName) {
+            case 'name':
+                if (initializer.isKind(SyntaxKind.StringLiteral)) {
+                    theme.name = initializer.getLiteralValue();
+                }
+                break;
+            case 'isDefault':
+                if (initializer.isKind(SyntaxKind.TrueKeyword)) {
+                    theme.isDefault = true;
+                }
+                break;
+            case 'type':
+                if (initializer.isKind(SyntaxKind.StringLiteral)) {
+                    theme.type = initializer.getLiteralValue();
+                }
+                break;
+            case 'primary':
+            case 'secondary':
+            case 'tertiary':
+                if (initializer.isKind(SyntaxKind.ObjectLiteralExpression)) {
+                    theme[propName] = parseThemeSwatch(initializer, sourceFile);
+                }
+                break;
+        }
+    }
+    if (!theme.name || !theme.primary) {
+        throw new Error('Theme must have name and primary properties');
+    }
+    return theme;
+}
+function validateThemeConfiguration(themes) {
+    const defaultThemes = themes.filter((t) => t.isDefault);
+    // Error: No default theme
+    if (defaultThemes.length === 0) {
+        throw new Error('No default theme found. At least one theme must have isDefault: true');
+    }
+    // Error: Multiple default themes
+    if (defaultThemes.length > 1) {
+        throw new Error(`Multiple default themes found: ${defaultThemes.map((t) => t.name).join(', ')}. Only one theme can have isDefault: true`);
+    }
+    // Error: Duplicate theme types
+    const typedThemes = themes.filter((t) => t.type);
+    const typeMap = new Map();
+    for (const theme of typedThemes) {
+        const existing = typeMap.get(theme.type) || [];
+        existing.push(theme.name);
+        typeMap.set(theme.type, existing);
+    }
+    for (const [type, names] of typeMap) {
+        if (names.length > 1) {
+            throw new Error(`Multiple themes with type "${type}" found: ${names.join(', ')}. Only one theme can have a given type`);
+        }
+    }
+}
+function parseThemeSwatch(obj, sourceFile) {
+    const properties = obj.getProperties();
+    const swatch = {};
+    for (const prop of properties) {
+        if (!prop.isKind(SyntaxKind.PropertyAssignment)) {
+            continue;
+        }
+        const propName = prop.getName();
+        const initializer = prop.getInitializer();
+        if (!initializer) {
+            continue;
+        }
+        if (propName === 'color' || propName === 'onColor' || propName === 'inkColor') {
+            const colorMap = parseColorMap(initializer, sourceFile);
+            if (colorMap) {
+                swatch[propName] = colorMap;
+            }
+        }
+    }
+    if (!swatch.color || !swatch.onColor) {
+        throw new Error('ThemeSwatch must have color and onColor properties');
+    }
+    return swatch;
+}
+function parseColorMap(initializer, sourceFile) {
+    // Handle spread expressions by resolving references
+    if (initializer.isKind(SyntaxKind.ObjectLiteralExpression)) {
+        const colorMap = {};
+        const properties = initializer.getProperties();
+        for (const prop of properties) {
+            if (prop.isKind(SyntaxKind.PropertyAssignment)) {
+                const propName = prop.getName();
+                const propValue = prop.getInitializer();
+                if (propValue?.isKind(SyntaxKind.StringLiteral)) {
+                    colorMap[propName] = propValue.getLiteralValue();
+                }
+            }
+            else if (prop.isKind(SyntaxKind.SpreadAssignment)) {
+                // Handle spread: { ...onColorDark, disabled: '...' }
+                const spreadExpr = prop.getExpression();
+                if (spreadExpr.isKind(SyntaxKind.Identifier)) {
+                    const referencedName = spreadExpr.getText();
+                    const referencedDecl = sourceFile
+                        .getVariableDeclarations()
+                        .find((decl) => decl.getName() === referencedName);
+                    if (referencedDecl) {
+                        const referencedObj = referencedDecl.getInitializer();
+                        if (referencedObj?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+                            const spreadColors = parseColorMap(referencedObj, sourceFile);
+                            if (spreadColors) {
+                                Object.assign(colorMap, spreadColors);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Apply fallbacks for required fields
+        if (colorMap.default) {
+            // Check if this is a ThemeColorMap (has hover, active, or disabled explicitly set)
+            const isThemeColorMap = colorMap.hover !== undefined || colorMap.active !== undefined || colorMap.disabled !== undefined;
+            if (isThemeColorMap) {
+                // For ThemeColorMap - apply fallbacks for all required fields
+                const defaultColor = colorMap.default;
+                const hoverColor = (colorMap.hover || defaultColor);
+                const result = {
+                    default: defaultColor,
+                    hover: hoverColor,
+                    focus: colorMap.focus,
+                    active: (colorMap.active || hoverColor),
+                    disabled: (colorMap.disabled || defaultColor),
+                };
+                return result;
+            }
+            // For OnThemeColorMap - no fallbacks needed, all fields are optional except default
+            return colorMap;
+        }
+        return null;
+    }
+    return null;
+}
+function createCssThemeName(name) {
+    // Convert theme name to CSS-safe format (e.g., "Primary Blue" -> "primary-blue")
+    return name
+        .toLowerCase()
+        .replace(/\s+/g, '-')
+        .replace(/[^a-z0-9-]/g, '');
+}
+function generateTailwindThemeCss(themes, prefix, schema) {
+    const tailwindVars = [];
+    const themeVars = [];
+    const themesPath = schema.themesPath || 'src/themes.ts';
+    const outputPath = schema.outputPath || 'src/styles/generated-tailwind-themes.css';
+    const header = `/* 
+ * Auto-generated Tailwind 4 theme colors from @ethlete/core
+ * DO NOT EDIT THIS FILE MANUALLY
+ * 
+ * Generated from your theme definitions
+ * This file can be regenerated by running:
+ * nx g @ethlete/core:tailwind-4-color-theme --themesPath=${themesPath}${schema.outputPath ? ` --outputPath=${outputPath}` : ''}${schema.prefix && schema.prefix !== 'et' ? ` --prefix=${schema.prefix}` : ''}
+ */
+
+`;
+    // Validation is now done separately before this function is called
+    const defaultThemes = themes.filter((t) => t.isDefault);
+    const regularThemes = themes.filter((t) => !t.isDefault);
+    // Generate static Tailwind @theme block for each theme
+    for (const theme of themes) {
+        const name = createCssThemeName(theme.name);
+        // Add comment for theme section
+        tailwindVars.push(`  /* ${theme.name} theme */`);
+        // Primary colors for Tailwind utilities
+        addTailwindColorVariants(tailwindVars, `${prefix}-${name}`, theme.primary.color);
+        tailwindVars.push('');
+        // On colors for Tailwind utilities
+        addTailwindColorVariants(tailwindVars, `${prefix}-on-${name}`, theme.primary.onColor);
+        tailwindVars.push('');
+        // Ink colors for standalone foreground usage
+        addTailwindColorVariants(tailwindVars, `${prefix}-${name}-ink`, theme.primary.inkColor || theme.primary.color);
+        tailwindVars.push('');
+        // Secondary colors if present
+        if (theme.secondary) {
+            addTailwindColorVariants(tailwindVars, `${prefix}-${name}-secondary`, theme.secondary.color);
+            tailwindVars.push('');
+            addTailwindColorVariants(tailwindVars, `${prefix}-on-${name}-secondary`, theme.secondary.onColor);
+            tailwindVars.push('');
+        }
+        // Tertiary colors if present
+        if (theme.tertiary) {
+            addTailwindColorVariants(tailwindVars, `${prefix}-${name}-tertiary`, theme.tertiary.color);
+            tailwindVars.push('');
+            addTailwindColorVariants(tailwindVars, `${prefix}-on-${name}-tertiary`, theme.tertiary.onColor);
+            tailwindVars.push('');
+        }
+    }
+    tailwindVars.push('');
+    // Main theme dynamic colors
+    const mainThemes = [...defaultThemes, ...regularThemes];
+    const hasSecondary = mainThemes.some((t) => t.secondary);
+    const hasTertiary = mainThemes.some((t) => t.tertiary);
+    tailwindVars.push('  /* Dynamic theme colors (references runtime CSS variables) */');
+    addDynamicThemeColors(tailwindVars, prefix, 'theme', 'primary', true);
+    addDynamicInkColors(tailwindVars, prefix, 'theme-ink', 'primary-ink');
+    if (hasSecondary) {
+        addDynamicThemeColors(tailwindVars, prefix, 'theme-secondary', 'secondary', false);
+    }
+    if (hasTertiary) {
+        addDynamicThemeColors(tailwindVars, prefix, 'theme-tertiary', 'tertiary', false);
+    }
+    // Generate runtime CSS for all themes
+    themes.forEach((theme) => {
+        const name = createCssThemeName(theme.name);
+        // Determine if this is the default theme
+        const isDefault = theme.isDefault;
+        // Generate color variant (.et-color--{name})
+        if (isDefault) {
+            // Default color gets :root and .et-color--default selectors
+            const selectors = [':root', `.${prefix}-color--default`, `.${prefix}-color--${name}`];
+            themeVars.push(`${selectors.join(', ')} {`);
+        }
+        else {
+            // Regular colors just get their own class
+            themeVars.push(`.${prefix}-color--${name} {`);
+        }
+        addThemeColorVariants(themeVars, prefix, '', theme);
+        themeVars.push('}\n');
+    });
+    // Convenience var aliases — available on any element with a color class (or root for default)
+    const aliasBlock = `/* Convenience aliases (rgb + solid + opacity variants) */
+@layer base {
+  :root, :where([class*="${prefix}-color--"]) {
+    --${prefix}-theme-color-primary-rgb: var(--${prefix}-color-primary);
+    --${prefix}-theme-color-primary-opacity: 1;
+    --${prefix}-theme-color-primary-solid: rgb(var(--${prefix}-theme-color-primary-rgb));
+    --${prefix}-theme-color-primary: rgb(var(--${prefix}-theme-color-primary-rgb) / var(--${prefix}-theme-color-primary-opacity));
+
+    --${prefix}-theme-color-on-primary-rgb: var(--${prefix}-color-on-primary);
+    --${prefix}-theme-color-on-primary-opacity: 1;
+    --${prefix}-theme-color-on-primary-solid: rgb(var(--${prefix}-theme-color-on-primary-rgb) / var(--${prefix}-theme-color-on-primary-opacity));
+    --${prefix}-theme-color-on-primary: rgb(var(--${prefix}-theme-color-on-primary-rgb) / var(--${prefix}-theme-color-on-primary-opacity));
+
+    --${prefix}-theme-color-ink-rgb: var(--${prefix}-color-primary-ink, var(--${prefix}-color-primary));
+    --${prefix}-theme-color-ink-opacity: 1;
+    --${prefix}-theme-color-ink-solid: rgb(var(--${prefix}-theme-color-ink-rgb) / var(--${prefix}-theme-color-ink-opacity));
+    --${prefix}-theme-color-ink: rgb(var(--${prefix}-theme-color-ink-rgb) / var(--${prefix}-theme-color-ink-opacity));
+  }
+}
+`;
+    return `${header}@theme {
+${tailwindVars.join('\n')}
+}
+
+@layer base {
+${themeVars.join('\n')}
+}
+
+${aliasBlock}`;
+}
+function addDynamicThemeColors(vars, prefix, tailwindName, cssVarName, addSpacingBefore) {
+    if (addSpacingBefore && vars.length > 0 && vars[vars.length - 1] !== '') {
+        vars.push('');
+    }
+    // Color variants
+    vars.push(`  --color-${prefix}-${tailwindName}: rgb(var(--${prefix}-color-${cssVarName}));`);
+    vars.push(`  --color-${prefix}-${tailwindName}-hover: rgb(var(--${prefix}-color-${cssVarName}-hover));`);
+    vars.push(`  --color-${prefix}-${tailwindName}-focus: rgb(var(--${prefix}-color-${cssVarName}-focus));`);
+    vars.push(`  --color-${prefix}-${tailwindName}-active: rgb(var(--${prefix}-color-${cssVarName}-active));`);
+    vars.push(`  --color-${prefix}-${tailwindName}-disabled: rgb(var(--${prefix}-color-${cssVarName}-disabled));`);
+    vars.push('');
+    // On-color variants
+    vars.push(`  --color-${prefix}-on-${tailwindName}: rgb(var(--${prefix}-color-on-${cssVarName}));`);
+    vars.push(`  --color-${prefix}-on-${tailwindName}-hover: rgb(var(--${prefix}-color-on-${cssVarName}-hover));`);
+    vars.push(`  --color-${prefix}-on-${tailwindName}-focus: rgb(var(--${prefix}-color-on-${cssVarName}-focus));`);
+    vars.push(`  --color-${prefix}-on-${tailwindName}-active: rgb(var(--${prefix}-color-on-${cssVarName}-active));`);
+    vars.push(`  --color-${prefix}-on-${tailwindName}-disabled: rgb(var(--${prefix}-color-on-${cssVarName}-disabled));`);
+    vars.push('');
+}
+function addDynamicInkColors(vars, prefix, tailwindName, cssVarName) {
+    vars.push(`  --color-${prefix}-${tailwindName}: rgb(var(--${prefix}-color-${cssVarName}));`);
+    vars.push(`  --color-${prefix}-${tailwindName}-hover: rgb(var(--${prefix}-color-${cssVarName}-hover));`);
+    vars.push(`  --color-${prefix}-${tailwindName}-focus: rgb(var(--${prefix}-color-${cssVarName}-focus));`);
+    vars.push(`  --color-${prefix}-${tailwindName}-active: rgb(var(--${prefix}-color-${cssVarName}-active));`);
+    vars.push(`  --color-${prefix}-${tailwindName}-disabled: rgb(var(--${prefix}-color-${cssVarName}-disabled));`);
+    vars.push('');
+}
+function addTailwindColorVariants(vars, colorName, colorSet) {
+    // Tailwind 4 requires --color-* prefix and rgb() wrapper
+    // Always generate all variants with fallbacks
+    vars.push(`  --color-${colorName}: rgb(${colorSet.default});`);
+    // For hover: use hover if exists, otherwise default
+    const hoverValue = 'hover' in colorSet && colorSet.hover ? colorSet.hover : colorSet.default;
+    vars.push(`  --color-${colorName}-hover: rgb(${hoverValue});`);
+    // For focus: use focus if exists, otherwise hover, otherwise default
+    const focusValue = 'focus' in colorSet && colorSet.focus ? colorSet.focus : hoverValue;
+    vars.push(`  --color-${colorName}-focus: rgb(${focusValue});`);
+    // For active: use active if exists, otherwise hover, otherwise default
+    const activeValue = 'active' in colorSet && colorSet.active ? colorSet.active : hoverValue;
+    vars.push(`  --color-${colorName}-active: rgb(${activeValue});`);
+    // For disabled: use disabled if exists, otherwise default
+    const disabledValue = 'disabled' in colorSet && colorSet.disabled ? colorSet.disabled : colorSet.default;
+    vars.push(`  --color-${colorName}-disabled: rgb(${disabledValue});`);
+}
+function addThemeColorVariants(vars, prefix, altPrefix, theme) {
+    const addSwatch = (level, swatch) => {
+        // Color variants with fallbacks
+        const defaultColor = swatch.color.default;
+        const hoverColor = swatch.color.hover || defaultColor;
+        const focusColor = swatch.color.focus || hoverColor;
+        const activeColor = swatch.color.active || hoverColor;
+        const disabledColor = swatch.color.disabled || defaultColor;
+        vars.push(`  --${prefix}-color-${altPrefix}${level}: ${defaultColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-hover: ${hoverColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-focus: ${focusColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-active: ${activeColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-disabled: ${disabledColor};`);
+        vars.push('');
+        // On color variants with fallbacks
+        const onDefaultColor = swatch.onColor.default;
+        const onHoverColor = swatch.onColor.hover || onDefaultColor;
+        const onFocusColor = swatch.onColor.focus || onHoverColor;
+        const onActiveColor = swatch.onColor.active || onDefaultColor;
+        const onDisabledColor = swatch.onColor.disabled || onDefaultColor;
+        vars.push(`  --${prefix}-color-${altPrefix}on-${level}: ${onDefaultColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}on-${level}-hover: ${onHoverColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}on-${level}-focus: ${onFocusColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}on-${level}-active: ${onActiveColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}on-${level}-disabled: ${onDisabledColor};`);
+        const inkDefaultColor = swatch.inkColor?.default || defaultColor;
+        const inkHoverColor = swatch.inkColor?.hover || inkDefaultColor;
+        const inkFocusColor = swatch.inkColor?.focus || inkHoverColor;
+        const inkActiveColor = swatch.inkColor?.active || inkDefaultColor;
+        const inkDisabledColor = swatch.inkColor?.disabled || inkDefaultColor;
+        vars.push('');
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink: ${inkDefaultColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink-hover: ${inkHoverColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink-focus: ${inkFocusColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink-active: ${inkActiveColor};`);
+        vars.push(`  --${prefix}-color-${altPrefix}${level}-ink-disabled: ${inkDisabledColor};`);
+        if (theme.secondary || theme.tertiary) {
+            vars.push('');
+        }
+    };
+    addSwatch('primary', theme.primary);
+    if (theme.secondary) {
+        addSwatch('secondary', theme.secondary);
+    }
+    if (theme.tertiary) {
+        addSwatch('tertiary', theme.tertiary);
+    }
+}
+function findMainStylesFile(tree) {
+    const potentialFiles = [];
+    visitNotIgnoredFiles(tree, '', (path) => {
+        if (path.match(/styles\.(css|scss)$/) && !path.includes('node_modules') && !path.includes('dist')) {
+            potentialFiles.push(path);
+        }
+    });
+    return potentialFiles;
+}
+//#endregion
+//# sourceMappingURL=generator.js.map

package/generators/tailwind-4-color-theme/schema.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "tailwind-4-color-theme",
+  "title": "Tailwind 4 Theming Generator",
+  "description": "Generates Tailwind 4 compatible CSS from your Ethlete theme definitions",
+  "type": "object",
+  "properties": {
+    "themesPath": {
+      "type": "string",
+      "description": "Path to your themes file (relative to workspace root)",
+      "default": "src/themes.ts",
+      "x-prompt": "Where is your themes file located?"
+    },
+    "outputPath": {
+      "type": "string",
+      "description": "Where to output the generated Tailwind themes CSS",
+      "default": "src/styles/generated-tailwind-themes.css",
+      "x-prompt": "Where should the generated CSS be saved?"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "Prefix for color variable names (e.g., 'et' creates --color-et-primary)",
+      "default": "et"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after generation",
+      "default": false
+    }
+  },
+  "required": ["themesPath"]
+}