From ae6be080e864f1e38336d53a65e0fa2ffbbce4d4 Mon Sep 17 00:00:00 2001 From: Hebilicious Date: Sun, 26 Oct 2025 09:47:25 +0700 Subject: [PATCH 1/2] fix: selector and atrules nesting --- .changeset/tidy-comics-shave.md | 5 + CHANGELOG.md | 4 +- README.md | 42 +++--- example/basic/cssforge.config.ts | 8 +- src/generator.ts | 45 +++++-- src/lib.ts | 4 +- src/modules/colors.ts | 88 +++++++++---- src/modules/primitive.ts | 2 +- src/modules/spacing.ts | 2 +- src/modules/typography.ts | 2 +- tests/__snapshots__/colors.test.ts.snap | 47 ++++++- tests/__snapshots__/primitive.test.ts.snap | 24 ++-- tests/__snapshots__/typography.test.ts.snap | 18 ++- tests/colors.test.ts | 134 +++++++++++++++----- tests/helpers.ts | 9 +- tests/primitive.test.ts | 8 +- tests/spacing.test.ts | 20 +-- tests/typography.test.ts | 6 +- 18 files changed, 332 insertions(+), 136 deletions(-) create mode 100644 .changeset/tidy-comics-shave.md diff --git a/.changeset/tidy-comics-shave.md b/.changeset/tidy-comics-shave.md new file mode 100644 index 0000000..525b325 --- /dev/null +++ b/.changeset/tidy-comics-shave.md @@ -0,0 +1,5 @@ +--- +"@hebilicious/cssforge": patch +--- + +fix nesting for selector and atRules diff --git a/CHANGELOG.md b/CHANGELOG.md index 198b870..685c637 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,8 +7,8 @@ - ab752be: # Introduce variantNameOnly feature for themes. When working with themes, you can choose to only include the variant name in the CSS - variable name by setting `variantNameOnly: true` in the color definition settings. This is - usually used in combination with `condition` to conditionnally apply themes. + variable name by setting `variantNameOnly: true` in the color definition settings. This + is usually used in combination with `condition` to conditionnally apply themes. - Default: `--theme-${themeName}-${colorName}-${variantName}` - VariantOnly Name: `--${variantName}` diff --git a/README.md b/README.md index ade741b..6d9fea7 100644 --- a/README.md +++ b/README.md @@ -217,7 +217,7 @@ export default defineConfig({ cyan: { hex: "#00FFFF" }, }, settings: { - condition: ".Another", + selector: ".Another", }, }, }, @@ -272,7 +272,7 @@ export default defineConfig({ }, }, settings: { - condition: "@media (prefers-color-scheme: dark)", + atRule: "@media (prefers-color-scheme: dark)", }, }, pink: { @@ -292,7 +292,7 @@ export default defineConfig({ }, }, settings: { - condition: ".ThemePink", + selector: ".ThemePink", }, }, }, @@ -321,7 +321,7 @@ export default defineConfig({ cyan: { hex: "#00FFFF" }, }, settings: { - condition: ".Another", + selector: ".Another", }, }, }, @@ -376,7 +376,7 @@ export default defineConfig({ }, }, settings: { - condition: "@media (prefers-color-scheme: dark)", + atRule: "@media (prefers-color-scheme: dark)", }, }, pink: { @@ -396,7 +396,7 @@ export default defineConfig({ }, }, settings: { - condition: ".ThemePink", + selector: ".ThemePink", }, }, }, @@ -418,11 +418,6 @@ This will generate the following CSS : --palette-simple-blue: oklch(45.201% 0.31321 264.05202); --palette-simple-violet: oklch(70% 0.2 270); --palette-simple-red: oklch(62.796% 0.25768 29.23388); - /* another */ - .Another { - --palette-another-yellow: oklch(96.798% 0.21101 109.76924); - --palette-another-cyan: oklch(90.54% 0.15455 194.76896); - } /* Gradients */ /* white-green */ --gradients-white-green-primary: linear-gradient( @@ -441,12 +436,17 @@ This will generate the following CSS : --primary: var(--palette-another-yellow); --secondary: var(--palette-another-cyan); } - /* Theme: pink */ - .ThemePink { - /* background */ - --primary: var(--palette-simple-red); - --secondary: var(--palette-simple-violet); - } +} +/* another */ +.Another { + --palette-another-yellow: oklch(96.798% 0.21101 109.76924); + --palette-another-cyan: oklch(90.54% 0.15455 194.76896); +} +/* Theme: pink */ +.ThemePink { + /* background */ + --primary: var(--palette-simple-red); + --secondary: var(--palette-simple-violet); } ``` @@ -454,15 +454,15 @@ This will generate the following CSS : #### Condition -You can conditionnally apply colors, gradients or themes by setting the `condition` -property to a selector or media query. Your variables will be wrapped within the -condition. +You can conditionnally apply colors, gradients or themes by setting the `atRule` or the +`selector` properties. Your variables will be wrapped within `:root` and the selectors +will be placed outside of it. #### Theme: Variant Name Only When working with themes, you can choose to only include the variant name in the CSS variable name by setting `variantNameOnly: true` in the color definition settings. This is -usually used in combination with `condition` to conditionnally apply themes. +usually used in combination with `selector` to conditionnally apply themes. - Default: `--theme-${themeName}-${colorName}-${variantName}` - VariantOnly Name: `--${variantName}` diff --git a/example/basic/cssforge.config.ts b/example/basic/cssforge.config.ts index 323e5a8..67cd2b5 100644 --- a/example/basic/cssforge.config.ts +++ b/example/basic/cssforge.config.ts @@ -60,13 +60,13 @@ export default defineConfig( 100: { hex: "#4F46E5" }, }, }, - // dark-mode overrides wrapped in a condition + // dark-mode overrides wrapped in a atRule coral_dark: { value: { 100: { hex: "#FF6347" }, }, settings: { - condition: "@media (prefers-color-scheme: dark)", + atRule: "@media (prefers-color-scheme: dark)", }, }, mint_dark: { @@ -74,7 +74,7 @@ export default defineConfig( 100: { hex: "#22C55E" }, }, settings: { - condition: "@media (prefers-color-scheme: dark)", + atRule: "@media (prefers-color-scheme: dark)", }, }, indigo_dark: { @@ -82,7 +82,7 @@ export default defineConfig( 100: { hex: "#4338CA" }, }, settings: { - condition: "@media (prefers-color-scheme: dark)", + atRule: "@media (prefers-color-scheme: dark)", }, }, }, diff --git a/src/generator.ts b/src/generator.ts index c69b87e..131ed9a 100644 --- a/src/generator.ts +++ b/src/generator.ts @@ -143,16 +143,24 @@ export function generateTS(config: Partial): string { */ export function generateCSS(config: Partial): string { const chunks: string[] = ["/*____ CSSForge ____*/", ":root {"]; + const outsideChunks: string[] = []; const processedConfig: { - [key: string]: { css: string; resolveMap: ResolveMap } | undefined; + [key: string]: + | { css: { root?: string; outside?: string }; resolveMap: ResolveMap } + | undefined; } = {}; // Process colors if present if (config.colors) { processedConfig.colors = processColors(config.colors); if (processedConfig.colors) { - chunks.push("/*____ Colors ____*/"); - chunks.push(processedConfig.colors.css); + if (processedConfig.colors.css.root) { + chunks.push("/*____ Colors ____*/"); + chunks.push(processedConfig.colors.css.root); + } + if (processedConfig.colors.css.outside) { + outsideChunks.push(processedConfig.colors.css.outside); + } } } @@ -160,8 +168,13 @@ export function generateCSS(config: Partial): string { if (config.spacing) { processedConfig.spacing = processSpacing(config.spacing); if (processedConfig.spacing) { - chunks.push("/*____ Spacing ____*/"); - chunks.push(processedConfig.spacing.css); + if (processedConfig.spacing.css.root) { + chunks.push("/*____ Spacing ____*/"); + chunks.push(processedConfig.spacing.css.root); + } + if (processedConfig.spacing.css.outside) { + outsideChunks.push(processedConfig.spacing.css.outside); + } } } @@ -169,8 +182,13 @@ export function generateCSS(config: Partial): string { if (config.typography) { processedConfig.typography = processTypography(config.typography); if (processedConfig.typography) { - chunks.push("/*____ Typography ____*/"); - chunks.push(processedConfig.typography.css); + if (processedConfig.typography.css.root) { + chunks.push("/*____ Typography ____*/"); + chunks.push(processedConfig.typography.css.root); + } + if (processedConfig.typography.css.outside) { + outsideChunks.push(processedConfig.typography.css.outside); + } } } @@ -182,12 +200,19 @@ export function generateCSS(config: Partial): string { spacing: config.spacing, }); if (primitiveVars) { - chunks.push("/*____ Primitives ____*/"); - chunks.push(primitiveVars.css); + if (primitiveVars.css.root) { + chunks.push("/*____ Primitives ____*/"); + chunks.push(primitiveVars.css.root); + } + if (primitiveVars.css.outside) { + outsideChunks.push(primitiveVars.css.outside); + } } } chunks.push("}"); - // Join all chunks with double newline for readability + + if (outsideChunks.length > 0) chunks.push(outsideChunks.join("\n")); + return chunks.join("\n"); } diff --git a/src/lib.ts b/src/lib.ts index f3a3208..6812bc4 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -12,8 +12,8 @@ export type ResolveMap = Map< * CSS and a resolve map. */ export interface Output { - /** The generated CSS string. */ - css: string; + /** The generated CSS strings. */ + css: { root?: string; outside?: string }; /** A map for resolving variable paths. */ resolveMap: ResolveMap; } diff --git a/src/modules/colors.ts b/src/modules/colors.ts index a3b5100..4dfa24e 100644 --- a/src/modules/colors.ts +++ b/src/modules/colors.ts @@ -31,9 +31,13 @@ interface ColorVariants { export interface WithCondition { /** - * CSS condition to wrap variables in (e.g., ".MyClass", "@media (prefers-color-scheme: dark)") + * CSS selector to wrap variables in (e.g., ".MyClass"). This will be extracted out of the root. */ - condition?: string; + selector?: string; + /** + * CSS at-rule to wrap variables in (e.g., "@supports (display: grid)") + */ + atRule?: string; } /** * Settings for palette colors, including optional conditions like media queries. @@ -219,41 +223,65 @@ function colorValueToOklch(value: ColorValueOrString): string { * ``` */ export function processColors(colors: ColorConfig): Output { - const cssOutput: string[] = []; + const rootOutput: string[] = []; + const outsideOutput: string[] = []; const resolveMap: ResolveMap = new Map(); - cssOutput.push(`/* Palette */`); + rootOutput.push(`/* Palette */`); const moduleKey = "palette"; function conditionalBuilder( settings: WithCondition | undefined, initialComment: string, ) { - const leadingComments: string[] = []; const innerComments: string[] = []; const vars: string[] = []; - if (settings?.condition) { - leadingComments.push(initialComment); - } else { - cssOutput.push(initialComment); - } + const hasSelector = Boolean(settings?.selector); + const hasAtRule = Boolean(settings?.atRule); + + // If no settings provided, emit comment immediately into root output + if (!hasSelector && !hasAtRule) rootOutput.push(initialComment); return { addComment(c: string) { - if (settings?.condition) innerComments.push(c); - else cssOutput.push(c); + if (hasSelector || hasAtRule) innerComments.push(c); + else rootOutput.push(c); }, pushVariable(v: string) { - if (settings?.condition) vars.push(v); - else cssOutput.push(v); + if (hasSelector || hasAtRule) vars.push(v); + else rootOutput.push(v); }, finalize() { - if (settings?.condition && vars.length > 0) { - cssOutput.push(...leadingComments); - cssOutput.push(`${settings.condition} {`); - cssOutput.push(...innerComments.map((c) => ` ${c}`)); - cssOutput.push(...vars.map((v) => ` ${v}`)); - cssOutput.push(`}`); + if (!hasSelector && !hasAtRule) return; + if (vars.length === 0 && innerComments.length === 0) return; + if (!settings) return; + if (hasSelector && hasAtRule) { + outsideOutput.push(initialComment); + outsideOutput.push(`${settings.atRule} {`); + outsideOutput.push(` ${settings.selector} {`); + outsideOutput.push(...innerComments.map((c) => ` ${c}`)); + outsideOutput.push(...vars.map((v) => ` ${v}`)); + outsideOutput.push(` }`); + outsideOutput.push(`}`); + return; + } + + if (hasSelector) { + outsideOutput.push(initialComment); + outsideOutput.push(`${settings.selector} {`); + outsideOutput.push(...innerComments.map((c) => ` ${c}`)); + outsideOutput.push(...vars.map((v) => ` ${v}`)); + outsideOutput.push(`}`); + return; + } + + if (hasAtRule) { + rootOutput.push(initialComment); + rootOutput.push(`${settings.atRule} {`); + rootOutput.push(...innerComments.map((c) => ` ${c}`)); + rootOutput.push(...vars.map((v) => ` ${v}`)); + rootOutput.push(`}`); + return; } }, }; @@ -289,9 +317,12 @@ export function processColors(colors: ColorConfig): Output { } if (colors.gradients) { - cssOutput.push(`/* Gradients */`); + rootOutput.push(`/* Gradients */`); const moduleKey = "gradients"; - const palette = { css: cssOutput.join("\n"), resolveMap }; + const palette = { + css: { root: rootOutput.join("\n"), outside: outsideOutput.join("\n") }, + resolveMap, + }; for (const [gradientName, gradient] of Object.entries(colors.gradients.value)) { validateName(gradientName); @@ -335,9 +366,12 @@ export function processColors(colors: ColorConfig): Output { } if (colors.theme) { - cssOutput.push(`/* Themes */`); + rootOutput.push(`/* Themes */`); const moduleKey = "theme"; - const palette = { css: cssOutput.join("\n"), resolveMap }; + const palette = { + css: { root: rootOutput.join("\n"), outside: outsideOutput.join("\n") }, + resolveMap, + }; for (const [themeName, themeConfig] of Object.entries(colors.theme)) { validateName(themeName); @@ -387,7 +421,9 @@ export function processColors(colors: ColorConfig): Output { } } - const output = { css: cssOutput.join("\n"), resolveMap }; - // console.log(output); + const output = { + css: { root: rootOutput.join("\n"), outside: outsideOutput.join("\n") }, + resolveMap, + }; return output; } diff --git a/src/modules/primitive.ts b/src/modules/primitive.ts index 20c766a..b8965e7 100644 --- a/src/modules/primitive.ts +++ b/src/modules/primitive.ts @@ -143,5 +143,5 @@ export function processPrimitives( } } - return { css: cssOutput.join("\n"), resolveMap }; + return { css: { root: cssOutput.join("\n") }, resolveMap }; } diff --git a/src/modules/spacing.ts b/src/modules/spacing.ts index 3bbf018..57bfe33 100644 --- a/src/modules/spacing.ts +++ b/src/modules/spacing.ts @@ -124,5 +124,5 @@ export function processSpacing(spacing: SpacingConfig): Output { } } - return { css: cssOutput.join("\n"), resolveMap }; + return { css: { root: cssOutput.join("\n") }, resolveMap }; } diff --git a/src/modules/typography.ts b/src/modules/typography.ts index a5a4da3..8b52ca8 100644 --- a/src/modules/typography.ts +++ b/src/modules/typography.ts @@ -119,5 +119,5 @@ export function processTypography(config: TypographyConfig): Output { } } - return { css: cssOutput.join("\n"), resolveMap }; + return { css: { root: cssOutput.join("\n") }, resolveMap }; } diff --git a/tests/__snapshots__/colors.test.ts.snap b/tests/__snapshots__/colors.test.ts.snap index 3c2fdaa..25a561f 100644 --- a/tests/__snapshots__/colors.test.ts.snap +++ b/tests/__snapshots__/colors.test.ts.snap @@ -279,7 +279,7 @@ snapshot[`processColors - handles themes referencing gradients 2`] = ` ] `; -snapshot[`processColors - handles gradients with conditions 1`] = ` +snapshot[`processColors - handles gradients with atRule 1`] = ` "/* Palette */ /* coral */ --palette-coral-50: oklch(73.58% 0.16378 34.33822); @@ -290,7 +290,7 @@ snapshot[`processColors - handles gradients with conditions 1`] = ` }" `; -snapshot[`processColors - handles gradients with conditions 2`] = ` +snapshot[`processColors - handles gradients with atRule 2`] = ` [ [ "palette.coral.50", @@ -311,7 +311,7 @@ snapshot[`processColors - handles gradients with conditions 2`] = ` ] `; -snapshot[`processColors - handles palette colors with conditions 1`] = ` +snapshot[`processColors - handles palette colors with atRule 1`] = ` "/* Palette */ /* background */ --palette-background-light: oklch(100% 0 0); @@ -321,7 +321,7 @@ snapshot[`processColors - handles palette colors with conditions 1`] = ` }" `; -snapshot[`processColors - handles palette colors with conditions 2`] = ` +snapshot[`processColors - handles palette colors with atRule 2`] = ` [ [ "palette.background.light", @@ -342,7 +342,7 @@ snapshot[`processColors - handles palette colors with conditions 2`] = ` ] `; -snapshot[`processColors - handles themes with class condition 1`] = ` +snapshot[`processColors - handles themes with selector 1`] = ` "/* Palette */ /* base */ --palette-base-primary: oklch(73.511% 0.16799 40.24666); @@ -354,7 +354,42 @@ snapshot[`processColors - handles themes with class condition 1`] = ` }" `; -snapshot[`processColors - handles themes with class condition 2`] = ` +snapshot[`processColors - handles themes with selector 2`] = ` +[ + [ + "palette.base.primary", + { + key: "--palette-base-primary", + value: "oklch(73.511% 0.16799 40.24666)", + variable: "--palette-base-primary: oklch(73.511% 0.16799 40.24666);", + }, + ], + [ + "theme.dark.background.primary", + { + key: "--theme-dark-background-primary", + value: "var(--palette-base-primary)", + variable: "--theme-dark-background-primary: var(--palette-base-primary);", + }, + ], +] +`; + +snapshot[`processColors - handles selector + atRule 1`] = ` +"/* Palette */ +/* base */ +--palette-base-primary: oklch(73.511% 0.16799 40.24666); +/* Themes */ +/* Theme: dark */ +@media (prefers-color-scheme: dark) { + .dark-theme { + /* background */ + --theme-dark-background-primary: var(--palette-base-primary); + } +}" +`; + +snapshot[`processColors - handles selector + atRule 2`] = ` [ [ "palette.base.primary", diff --git a/tests/__snapshots__/primitive.test.ts.snap b/tests/__snapshots__/primitive.test.ts.snap index 9b7d113..c6d0fcf 100644 --- a/tests/__snapshots__/primitive.test.ts.snap +++ b/tests/__snapshots__/primitive.test.ts.snap @@ -1,12 +1,14 @@ export const snapshot = {}; snapshot[`processPrimitives - processes button with variables 1`] = ` -"/* button */ +{ + root: "/* button */ --button-small-width: 120px; --button-small-height: 40px; --button-small-fontSize: var(--typography_fluid-arial-foo-m); --button-small-radius: 8px; ---button-small-padding: var(--spacing-size-2) var(--spacing-size-3);" +--button-small-padding: var(--spacing-size-2) var(--spacing-size-3);", +} `; snapshot[`processPrimitives - processes button with variables 2`] = ` @@ -55,13 +57,15 @@ snapshot[`processPrimitives - processes button with variables 2`] = ` `; snapshot[`processPrimitives - processes buttons with settings 1`] = ` -"/* button */ +{ + root: "/* button */ --button-small-width: 120px; --button-small-height: 40px; --button-small-radius: 8px; --button-big-width: 15rem; --button-big-height: 5rem; ---button-big-radius: 1rem;" +--button-big-radius: 1rem;", +} `; snapshot[`processPrimitives - processes buttons with settings 2`] = ` @@ -118,10 +122,12 @@ snapshot[`processPrimitives - processes buttons with settings 2`] = ` `; snapshot[`processPrimitives - references colors, gradients, and themes 1`] = ` -"/* card */ +{ + root: "/* card */ --card-default-background-color: var(--theme-light-background-primary); --card-default-background-image: var(--gradients-orangeGradient-primary); ---card-default-border-color: var(--palette-coral-50);" +--card-default-border-color: var(--palette-coral-50);", +} `; snapshot[`processPrimitives - references colors, gradients, and themes 2`] = ` @@ -154,8 +160,10 @@ snapshot[`processPrimitives - references colors, gradients, and themes 2`] = ` `; snapshot[`processPrimitives - uses fluid spacing references 1`] = ` -"/* box */ ---box-default-padding: var(--spacing_fluid-gap-gs-s) var(--spacing_fluid-gap-gs-m);" +{ + root: "/* box */ +--box-default-padding: var(--spacing_fluid-gap-gs-s) var(--spacing_fluid-gap-gs-m);", +} `; snapshot[`processPrimitives - uses fluid spacing references 2`] = ` diff --git a/tests/__snapshots__/typography.test.ts.snap b/tests/__snapshots__/typography.test.ts.snap index 0ce6ae6..1311895 100644 --- a/tests/__snapshots__/typography.test.ts.snap +++ b/tests/__snapshots__/typography.test.ts.snap @@ -1,7 +1,8 @@ export const snapshot = {}; snapshot[`processTypography - generates correct CSS variables 1`] = ` -"--typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); +{ + root: "--typography_fluid-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); --typography_fluid-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); --typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); --typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); @@ -9,7 +10,8 @@ snapshot[`processTypography - generates correct CSS variables 1`] = ` --typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); --typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); --typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); ---typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem);" +--typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem);", +} `; snapshot[`processTypography - generates correct CSS variables 2`] = ` @@ -90,7 +92,8 @@ snapshot[`processTypography - generates correct CSS variables 2`] = ` `; snapshot[`typography - can handle custom labels and prefixes 1`] = ` -"--typography_fluid-arial-text-h1: clamp(4.1723rem, 4.0013rem + 0.8553vw, 4.7684rem); +{ + root: "--typography_fluid-arial-text-h1: clamp(4.1723rem, 4.0013rem + 0.8553vw, 4.7684rem); --typography_fluid-arial-text-h2: clamp(3.3379rem, 3.201rem + 0.6843vw, 3.8147rem); --typography_fluid-arial-text-h3: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem); --typography_fluid-arial-text-h4: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem); @@ -99,7 +102,8 @@ snapshot[`typography - can handle custom labels and prefixes 1`] = ` --typography_fluid-arial-text-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); --typography_fluid-arial-text-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); --typography_fluid-arial-text-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); ---typography_fluid-arial-text-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem);" +--typography_fluid-arial-text-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem);", +} `; snapshot[`typography - can handle custom labels and prefixes 2`] = ` @@ -188,14 +192,16 @@ snapshot[`typography - can handle custom labels and prefixes 2`] = ` `; snapshot[`processTypography - can process weights 1`] = ` -"--typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); +{ + root: "--typography_fluid-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem); --typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem); --typography_fluid-arial-l: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem); --typography_fluid-arial-m: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem); --typography_fluid-arial-s: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem); --typography_fluid-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem); --typography_fluid-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem); ---typography-weight-arial-regular: 500;" +--typography-weight-arial-regular: 500;", +} `; snapshot[`processTypography - can process weights 2`] = ` diff --git a/tests/colors.test.ts b/tests/colors.test.ts index 108d88a..310ad7d 100644 --- a/tests/colors.test.ts +++ b/tests/colors.test.ts @@ -1,7 +1,7 @@ import { assert, assertEquals } from "@std/assert"; import { assertSnapshot } from "@std/testing/snapshot"; import { defineConfig, processColors } from "../src/mod.ts"; -import { getLines } from "./helpers.ts"; +import { combine, getLines } from "./helpers.ts"; Deno.test("processColors - converts hex to oklch", async (t) => { const config = defineConfig({ @@ -20,7 +20,8 @@ Deno.test("processColors - converts hex to oklch", async (t) => { }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); assertEquals( lines[2].trim(), "--palette-coral-100: oklch(73.511% 0.16799 40.24666);", @@ -33,7 +34,7 @@ Deno.test("processColors - converts hex to oklch", async (t) => { "palette.coral.100", "palette.coral.200", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); @@ -57,7 +58,8 @@ Deno.test("processColors - handles different color formats", async (t) => { } as const, ); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); assertEquals( lines[2].trim(), @@ -79,7 +81,7 @@ Deno.test("processColors - handles different color formats", async (t) => { "palette.brand.400", "palette.brand.default", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); @@ -99,7 +101,8 @@ Deno.test("processColors - handles string values", async (t) => { }, }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); assertEquals( lines[2].trim(), "--palette-simple-white: oklch(100% 0 0);", @@ -112,7 +115,7 @@ Deno.test("processColors - handles string values", async (t) => { "palette.simple.white", "palette.simple.black", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); @@ -148,7 +151,8 @@ Deno.test("processColors - handles themes", async (t) => { }, }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); assertEquals( lines[7].trim(), "--theme-light-background-primary: var(--palette-simple-white);", @@ -163,7 +167,7 @@ Deno.test("processColors - handles themes", async (t) => { "theme.light.background.primary", "theme.light.background.secondary", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); @@ -183,7 +187,8 @@ Deno.test("processColors - handles transparency", async (t) => { }, }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); assertEquals( lines[2].trim(), "--palette-alpha-softGray1: oklch(14.48% 0 0 / 12%);", @@ -196,7 +201,7 @@ Deno.test("processColors - handles transparency", async (t) => { "palette.alpha.softGray1", "palette.alpha.softGray2", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); @@ -241,7 +246,8 @@ Deno.test("processColors - generates gradient with color variables", async (t) = }); const result = processColors(config.colors); - const lines = getLines(result.css); + const combined = [result.css.root, result.css.outside].filter(Boolean).join("\n"); + const lines = getLines(combined); const expected = [ "--gradients-orangeGradient-primary: linear-gradient(261.78deg, var(--palette-coral-50) 33.1%, var(--palette-coral-90) 56.3%, var(--palette-coral-100) 65.78%, var(--palette-indigo-100) 84.23%);", ].join("\n"); @@ -254,7 +260,7 @@ Deno.test("processColors - generates gradient with color variables", async (t) = "palette.indigo.100", "gradients.orangeGradient.primary", ]); - await assertSnapshot(t, result.css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(result.resolveMap.entries())); }); @@ -303,7 +309,8 @@ Deno.test("processColors - handles themes referencing gradients", async (t) => { }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); const lastLine = lines.pop(); assertEquals( lastLine, @@ -314,11 +321,11 @@ Deno.test("processColors - handles themes referencing gradients", async (t) => { "gradients.orangeGradient.primary", "theme.light.background.primary", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); -Deno.test("processColors - handles gradients with conditions", async (t) => { +Deno.test("processColors - handles gradients with atRule", async (t) => { const config = defineConfig({ colors: { palette: { @@ -343,7 +350,7 @@ Deno.test("processColors - handles gradients with conditions", async (t) => { }, }, settings: { - condition: "@media (prefers-color-scheme: dark)", + atRule: "@media (prefers-color-scheme: dark)", }, }, }, @@ -352,7 +359,8 @@ Deno.test("processColors - handles gradients with conditions", async (t) => { }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); const mediaQueryIndex = lines.findIndex((line) => line.includes("@media (prefers-color-scheme: dark)") @@ -378,11 +386,11 @@ Deno.test("processColors - handles gradients with conditions", async (t) => { "palette.coral.50", "gradients.orangeGradient.primary", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); -Deno.test("processColors - handles palette colors with conditions", async (t) => { +Deno.test("processColors - handles palette colors with atRule", async (t) => { const config = defineConfig({ colors: { palette: { @@ -397,7 +405,7 @@ Deno.test("processColors - handles palette colors with conditions", async (t) => dark: { hex: "#000" }, }, settings: { - condition: "@media (prefers-color-scheme: dark)", + atRule: "@media (prefers-color-scheme: dark)", }, }, }, @@ -405,7 +413,8 @@ Deno.test("processColors - handles palette colors with conditions", async (t) => }, }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); assertEquals( lines[2].trim(), @@ -439,11 +448,11 @@ Deno.test("processColors - handles palette colors with conditions", async (t) => "palette.background.light", "palette.backgroundDark.dark", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); -Deno.test("processColors - handles themes with class condition", async (t) => { +Deno.test("processColors - handles themes with selector", async (t) => { const config = defineConfig({ colors: { palette: { @@ -468,7 +477,7 @@ Deno.test("processColors - handles themes with class condition", async (t) => { }, }, settings: { - condition: ".dark-theme", + selector: ".dark-theme", }, }, }, @@ -476,7 +485,8 @@ Deno.test("processColors - handles themes with class condition", async (t) => { }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); const classIndex = lines.findIndex((l) => l.includes(".dark-theme")); assertEquals(lines[classIndex], ".dark-theme {"); @@ -488,7 +498,72 @@ Deno.test("processColors - handles themes with class condition", async (t) => { "palette.base.primary", "theme.dark.background.primary", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); + await assertSnapshot(t, Array.from(resolveMap.entries())); +}); + +Deno.test("processColors - handles selector + atRule", async (t) => { + const config = defineConfig({ + colors: { + palette: { + value: { + base: { + value: { + primary: { hex: "#FF7F50" }, + }, + }, + }, + }, + theme: { + dark: { + value: { + background: { + value: { + primary: "var(--1)", + }, + variables: { + "1": "palette.base.primary", + }, + }, + }, + settings: { + selector: ".dark-theme", + atRule: "@media (prefers-color-scheme: dark)", + }, + }, + }, + }, + }); + + const { css, resolveMap } = processColors(config.colors); + const combined = combine(css); + const lines = getLines(combined); + + const mediaIndex = lines.findIndex((l) => + l.includes("@media (prefers-color-scheme: dark)") + ); + assertEquals(lines[mediaIndex], "@media (prefers-color-scheme: dark) {"); + + const classIndex = lines.findIndex((l, idx) => + idx > mediaIndex && l.includes(".dark-theme") + ); + assert(classIndex > mediaIndex, "selector should be inside the media query block"); + assertEquals(lines[classIndex].trim(), ".dark-theme {"); + + const varIndex = lines.findIndex((l, idx) => + idx > classIndex && l.includes("--theme-dark-background-primary:") + ); + assert( + varIndex > classIndex, + "theme variable should be inside the selector block within the media query", + ); + + assertEquals(Array.from(resolveMap.keys()), [ + "palette.base.primary", + "theme.dark.background.primary", + ]); + + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); @@ -528,7 +603,8 @@ Deno.test("processColors - handles theme variantNameOnly", async (t) => { }); const { css, resolveMap } = processColors(config.colors); - const lines = getLines(css); + const combined = combine(css); + const lines = getLines(combined); const primaryLine = lines.find((l) => l.includes("--primary:")); const secondaryLine = lines.find((l) => l.includes("--secondary:")); @@ -543,6 +619,6 @@ Deno.test("processColors - handles theme variantNameOnly", async (t) => { "theme.light.background.secondary", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, combined); await assertSnapshot(t, Array.from(resolveMap.entries())); }); diff --git a/tests/helpers.ts b/tests/helpers.ts index 40ca300..ae82203 100644 --- a/tests/helpers.ts +++ b/tests/helpers.ts @@ -1,5 +1,10 @@ -export const getLines = (result: string) => - result.split("\n").filter((line) => line.trim()); +import type { Output } from "../src/lib.ts"; + +export const getLines = (result?: string) => + result ? result.split("\n").filter((line) => line.trim()) : []; + +export const combine = (css: Output["css"]) => + [css.root, css.outside].filter(Boolean).join("\n"); export const lineHasProp = (lines: string[]) => (prop: string) => lines.some((line) => line.includes(prop)); diff --git a/tests/primitive.test.ts b/tests/primitive.test.ts index 519c77f..06a68ad 100644 --- a/tests/primitive.test.ts +++ b/tests/primitive.test.ts @@ -65,7 +65,7 @@ Deno.test("processPrimitives - processes button with variables", async (t) => { "--button-small-padding: var(--spacing-size-2) var(--spacing-size-3);", ].join("\n"); - assertEquals(result.css, expected); + assertEquals(result.css.root, expected); await assertSnapshot(t, result.css); await assertSnapshot(t, Array.from(result.resolveMap.entries())); }); @@ -107,7 +107,7 @@ Deno.test("processPrimitives - processes buttons with settings", async (t) => { "--button-big-radius: 1rem;", ].join("\n"); - assertEquals(result.css, expected); + assertEquals(result.css.root, expected); await assertSnapshot(t, result.css); await assertSnapshot(t, Array.from(result.resolveMap.entries())); }); @@ -182,7 +182,7 @@ Deno.test("processPrimitives - references colors, gradients, and themes", async "--card-default-border-color: var(--palette-coral-50);", ].join("\n"); - assertEquals(result.css, expected); + assertEquals(result.css.root, expected); await assertSnapshot(t, result.css); await assertSnapshot(t, Array.from(result.resolveMap.entries())); }); @@ -226,7 +226,7 @@ Deno.test("processPrimitives - uses fluid spacing references", async (t) => { "/* box */", "--box-default-padding: var(--spacing_fluid-gap-gs-s) var(--spacing_fluid-gap-gs-m);", ].join("\n"); - assertEquals(primitives.css, expected); + assertEquals(primitives.css.root, expected); await assertSnapshot(t, primitives.css); await assertSnapshot(t, Array.from(primitives.resolveMap.entries())); }); diff --git a/tests/spacing.test.ts b/tests/spacing.test.ts index 2156e92..ca09609 100644 --- a/tests/spacing.test.ts +++ b/tests/spacing.test.ts @@ -21,7 +21,7 @@ Deno.test("processSpacing - generates correct spacing scale", async (t) => { "--spacing-size-3: 0.75rem;", "--spacing-size-s: 1rem;", ].join("\n"); - assertEquals(result.css, expected); + assertEquals(result.css.root, expected); assertEquals(Array.from(result.resolveMap.keys()), [ "spacing.custom.size.1", @@ -29,7 +29,7 @@ Deno.test("processSpacing - generates correct spacing scale", async (t) => { "spacing.custom.size.3", "spacing.custom.size.s", ]); - await assertSnapshot(t, result.css); + await assertSnapshot(t, result.css.root); await assertSnapshot(t, Array.from(result.resolveMap.entries())); }); @@ -58,7 +58,7 @@ Deno.test("processSpacing - handles settings", async (t) => { "--spacing-scale-lg: 0.75rem;", ].join("\n"); - assertEquals(result.css, expected); + assertEquals(result.css.root, expected); assertEquals(Array.from(result.resolveMap.keys()), [ "spacing.custom.size.1", @@ -66,7 +66,7 @@ Deno.test("processSpacing - handles settings", async (t) => { "spacing.custom.scale.md", "spacing.custom.scale.lg", ]); - await assertSnapshot(t, result.css); + await assertSnapshot(t, result.css.root); await assertSnapshot(t, Array.from(result.resolveMap.entries())); }); @@ -101,7 +101,7 @@ Deno.test("processSpacing - generates fluid spacing (prefix)", async (t) => { "--spacing_fluid-base-foo-s-m: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem);", "--spacing_fluid-base-foo-m-l: clamp(0.25rem, -0.6667rem + 4.5833vw, 3rem);", ].join("\n"); - assertEquals(css, expected); + assertEquals(css.root, expected); assertEquals(Array.from(resolveMap.keys()), [ "spacing_fluid.base@xs", @@ -113,7 +113,7 @@ Deno.test("processSpacing - generates fluid spacing (prefix)", async (t) => { "spacing_fluid.base@s-m", "spacing_fluid.base@m-l", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, css.root); await assertSnapshot(t, Array.from(resolveMap.entries())); }); @@ -142,7 +142,7 @@ Deno.test("processSpacing - fluid without prefix falls back to scale name", asyn "--spacing_fluid-rhythm-xs-s: clamp(0rem, -0.4167rem + 2.0833vw, 1.25rem);", "--spacing_fluid-rhythm-s-m: clamp(0.125rem, -0.25rem + 1.875vw, 1.25rem);", ].join("\n"); - assertEquals(css, expected); + assertEquals(css.root, expected); assertEquals(Array.from(resolveMap.keys()), [ "spacing_fluid.rhythm@xs", @@ -151,7 +151,7 @@ Deno.test("processSpacing - fluid without prefix falls back to scale name", asyn "spacing_fluid.rhythm@xs-s", "spacing_fluid.rhythm@s-m", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, css.root); await assertSnapshot(t, Array.from(resolveMap.entries())); }); @@ -189,7 +189,7 @@ Deno.test("processSpacing - combines fluid and custom spacing", async (t) => { "--spacing-gap-1: 4px;", "--spacing-gap-2: 8px;", ].join("\n"); - assertEquals(css, expected); + assertEquals(css.root, expected); assertEquals(Array.from(resolveMap.keys()), [ "spacing_fluid.base@xs", "spacing_fluid.base@s", @@ -199,6 +199,6 @@ Deno.test("processSpacing - combines fluid and custom spacing", async (t) => { "spacing.custom.gap.1", "spacing.custom.gap.2", ]); - await assertSnapshot(t, css); + await assertSnapshot(t, css.root); await assertSnapshot(t, Array.from(resolveMap.entries())); }); diff --git a/tests/typography.test.ts b/tests/typography.test.ts index 01b2d78..cd88e69 100644 --- a/tests/typography.test.ts +++ b/tests/typography.test.ts @@ -35,7 +35,7 @@ Deno.test("processTypography - generates correct CSS variables", async (t) => { "2xs", ]; const result = processTypography(config.typography); - const lines = getLines(result.css); + const lines = getLines(result.css.root); assertEquals(lines.length, expectedSizes.length); // Test a specific value for precision @@ -109,7 +109,7 @@ Deno.test("typography - can handle custom labels and prefixes", async (t) => { "h1", ]; const result = processTypography(config.typography); - const lines = getLines(result.css); + const lines = getLines(result.css.root); assertEquals(lines.length, expectedSizes.length); // Test a specific value for precision @@ -161,7 +161,7 @@ Deno.test("processTypography - can process weights", async (t) => { }); const result = processTypography(config.typography); - const lines = getLines(result.css); + const lines = getLines(result.css.root); assertEquals(lines.length, positiveSteps + negativeSteps + 1 + 1); // 1 for base size and 1 for weight assertEquals( From a472b6e21fc8f92391c8df511b4434ad0e21e59c Mon Sep 17 00:00:00 2001 From: Hebilicious Date: Thu, 19 Feb 2026 23:40:42 +0700 Subject: [PATCH 2/2] chore: migrate deno workspace to moon/proto node setup --- .agents/skills/cssforge | 1 + .agents/skills/moon/SKILL.md | 325 + .agents/skills/moon/examples/ci-workflow.yml | 186 + .agents/skills/moon/examples/moon.yml | 178 + .agents/skills/moon/examples/workspace.yml | 67 + .../skills/moon/references/cli-reference.md | 222 + .agents/skills/moon/references/task-config.md | 743 + .../skills/moon/references/v2-migration.md | 258 + .../moon/references/workspace-config.md | 281 + .agents/skills/proto/SKILL.md | 349 + .../proto/examples/prototools-full.toml | 84 + .agents/skills/proto/references/commands.md | 235 + .agents/skills/proto/references/config.md | 195 + .agents/skills/using-git-worktrees/SKILL.md | 218 + .claude/skills/cssforge | 1 + .claude/skills/using-git-worktrees | 1 + .github/workflows/ci.yaml | 46 +- .github/workflows/release.yaml | 34 +- .gitignore | 6 +- .moon/tasks/node.yml | 23 + .moon/toolchains.yml | 11 + .moon/workspace.yml | 15 + .prototools | 8 + AGENTS.md | 13 +- CLAUDE.md | 1 + README.md | 254 +- biome.json | 11 + deno.json | 35 - deno.lock | 713 - docs/migration-plan-node-moon-proto.md | 102 + example/basic/cssforge.config.ts | 2 +- example/basic/generate-css.ts | 19 +- example/tailwind-nextjs/.gitignore | 45 + example/tailwind-nextjs/README.md | 35 + example/tailwind-nextjs/app/favicon.ico | Bin 0 -> 25931 bytes example/tailwind-nextjs/app/globals.css | 7 + example/tailwind-nextjs/app/layout.tsx | 32 + example/tailwind-nextjs/app/page.tsx | 18 + example/tailwind-nextjs/cssforge.config.ts | 46 + example/tailwind-nextjs/eslint.config.mjs | 18 + example/tailwind-nextjs/moon.yml | 78 + example/tailwind-nextjs/next.config.ts | 7 + example/tailwind-nextjs/package.json | 23 + example/tailwind-nextjs/playwright.config.ts | 25 + example/tailwind-nextjs/postcss.config.mjs | 7 + example/tailwind-nextjs/public/file.svg | 1 + example/tailwind-nextjs/public/globe.svg | 1 + example/tailwind-nextjs/public/next.svg | 1 + example/tailwind-nextjs/public/vercel.svg | 1 + example/tailwind-nextjs/public/window.svg | 1 + example/tailwind-nextjs/tests/e2e.spec.ts | 34 + example/tailwind-nextjs/tsconfig.json | 47 + example/tailwind-nuxt/.gitignore | 28 + example/tailwind-nuxt/README.md | 35 + example/tailwind-nuxt/app/app.vue | 16 + example/tailwind-nuxt/app/assets/css/main.css | 7 + example/tailwind-nuxt/cssforge.config.ts | 46 + example/tailwind-nuxt/moon.yml | 89 + example/tailwind-nuxt/nuxt.config.ts | 10 + example/tailwind-nuxt/package.json | 17 + example/tailwind-nuxt/playwright.config.ts | 25 + example/tailwind-nuxt/public/favicon.ico | Bin 0 -> 4286 bytes example/tailwind-nuxt/public/robots.txt | 2 + example/tailwind-nuxt/tests/e2e.spec.ts | 34 + example/tailwind-nuxt/tsconfig.json | 18 + example/tailwind-solidstart/.gitignore | 32 + example/tailwind-solidstart/README.md | 36 + example/tailwind-solidstart/app.config.ts | 8 + .../tailwind-solidstart/cssforge.config.ts | 46 + example/tailwind-solidstart/moon.yml | 73 + example/tailwind-solidstart/package.json | 20 + .../tailwind-solidstart/playwright.config.ts | 25 + .../tailwind-solidstart/public/favicon.ico | Bin 0 -> 664 bytes example/tailwind-solidstart/src/app.css | 7 + example/tailwind-solidstart/src/app.tsx | 12 + .../src/components/Counter.tsx | 13 + .../src/components/Nav.tsx | 19 + .../tailwind-solidstart/src/entry-client.tsx | 4 + .../tailwind-solidstart/src/entry-server.tsx | 21 + example/tailwind-solidstart/src/global.d.ts | 1 + .../src/routes/[...404].tsx | 25 + .../tailwind-solidstart/src/routes/about.tsx | 25 + .../tailwind-solidstart/src/routes/index.tsx | 18 + example/tailwind-solidstart/tests/e2e.spec.ts | 34 + example/tailwind-solidstart/tsconfig.json | 19 + example/tailwind-sveltekit/.gitignore | 27 + example/tailwind-sveltekit/.npmrc | 1 + example/tailwind-sveltekit/README.md | 36 + example/tailwind-sveltekit/cssforge.config.ts | 46 + example/tailwind-sveltekit/moon.yml | 96 + example/tailwind-sveltekit/package.json | 20 + .../tailwind-sveltekit/playwright.config.ts | 25 + example/tailwind-sveltekit/src/app.css | 7 + example/tailwind-sveltekit/src/app.d.ts | 13 + example/tailwind-sveltekit/src/app.html | 11 + .../src/lib/assets/favicon.svg | 1 + example/tailwind-sveltekit/src/lib/index.ts | 1 + .../src/routes/+layout.svelte | 7 + .../src/routes/+page.svelte | 14 + example/tailwind-sveltekit/static/robots.txt | 3 + example/tailwind-sveltekit/svelte.config.js | 13 + example/tailwind-sveltekit/tests/e2e.spec.ts | 34 + example/tailwind-sveltekit/tsconfig.json | 20 + example/tailwind-sveltekit/vite.config.ts | 7 + example/vanilla-react-css/.gitignore | 28 + example/vanilla-react-css/README.md | 34 + example/vanilla-react-css/cssforge.config.ts | 46 + example/vanilla-react-css/eslint.config.js | 23 + example/vanilla-react-css/index.html | 13 + example/vanilla-react-css/moon.yml | 76 + example/vanilla-react-css/package.json | 27 + .../vanilla-react-css/playwright.config.ts | 25 + example/vanilla-react-css/public/vite.svg | 1 + example/vanilla-react-css/src/App.css | 14 + example/vanilla-react-css/src/App.tsx | 17 + .../vanilla-react-css/src/assets/react.svg | 1 + example/vanilla-react-css/src/index.css | 16 + example/vanilla-react-css/src/main.tsx | 10 + example/vanilla-react-css/tests/e2e.spec.ts | 34 + example/vanilla-react-css/tsconfig.app.json | 28 + example/vanilla-react-css/tsconfig.json | 14 + example/vanilla-react-css/tsconfig.node.json | 26 + example/vanilla-react-css/vite.config.ts | 7 + example/vanilla-solid-css/.gitignore | 28 + example/vanilla-solid-css/README.md | 34 + example/vanilla-solid-css/cssforge.config.ts | 46 + example/vanilla-solid-css/index.html | 13 + example/vanilla-solid-css/moon.yml | 71 + example/vanilla-solid-css/package.json | 18 + .../vanilla-solid-css/playwright.config.ts | 25 + example/vanilla-solid-css/public/vite.svg | 1 + example/vanilla-solid-css/src/App.css | 14 + example/vanilla-solid-css/src/App.tsx | 17 + .../vanilla-solid-css/src/assets/solid.svg | 1 + example/vanilla-solid-css/src/index.css | 16 + example/vanilla-solid-css/src/index.tsx | 8 + example/vanilla-solid-css/tests/e2e.spec.ts | 34 + example/vanilla-solid-css/tsconfig.app.json | 29 + example/vanilla-solid-css/tsconfig.json | 7 + example/vanilla-solid-css/tsconfig.node.json | 26 + example/vanilla-solid-css/vite.config.ts | 6 + example/vanilla-svelte-css/.gitignore | 28 + .../.vscode/extensions.json | 3 + example/vanilla-svelte-css/README.md | 34 + example/vanilla-svelte-css/cssforge.config.ts | 46 + example/vanilla-svelte-css/index.html | 13 + example/vanilla-svelte-css/moon.yml | 76 + example/vanilla-svelte-css/package.json | 18 + .../vanilla-svelte-css/playwright.config.ts | 25 + example/vanilla-svelte-css/public/vite.svg | 1 + example/vanilla-svelte-css/src/App.svelte | 9 + example/vanilla-svelte-css/src/app.css | 31 + .../vanilla-svelte-css/src/assets/svelte.svg | 1 + .../vanilla-svelte-css/src/lib/Counter.svelte | 10 + example/vanilla-svelte-css/src/main.ts | 9 + example/vanilla-svelte-css/svelte.config.js | 8 + example/vanilla-svelte-css/tests/e2e.spec.ts | 34 + example/vanilla-svelte-css/tsconfig.app.json | 21 + example/vanilla-svelte-css/tsconfig.json | 7 + example/vanilla-svelte-css/tsconfig.node.json | 26 + example/vanilla-svelte-css/vite.config.ts | 7 + example/vanilla-vue-css/.gitignore | 28 + .../vanilla-vue-css/.vscode/extensions.json | 3 + example/vanilla-vue-css/README.md | 34 + example/vanilla-vue-css/cssforge.config.ts | 46 + example/vanilla-vue-css/index.html | 13 + example/vanilla-vue-css/moon.yml | 71 + example/vanilla-vue-css/package.json | 20 + example/vanilla-vue-css/playwright.config.ts | 25 + example/vanilla-vue-css/public/vite.svg | 1 + example/vanilla-vue-css/src/App.vue | 11 + example/vanilla-vue-css/src/assets/vue.svg | 1 + .../src/components/HelloWorld.vue | 41 + example/vanilla-vue-css/src/main.ts | 5 + example/vanilla-vue-css/src/style.css | 31 + example/vanilla-vue-css/tests/e2e.spec.ts | 34 + example/vanilla-vue-css/tsconfig.app.json | 16 + example/vanilla-vue-css/tsconfig.json | 7 + example/vanilla-vue-css/tsconfig.node.json | 26 + example/vanilla-vue-css/vite.config.ts | 7 + package.json | 13 +- .../cssforge/CHANGELOG.md | 0 packages/cssforge/README.md | 1089 ++ packages/cssforge/deno.json | 18 + packages/cssforge/moon.yml | 112 + packages/cssforge/package.json | 39 + packages/cssforge/scripts/sync-version.js | 16 + packages/cssforge/scripts/update-readme.ts | 156 + packages/cssforge/src/cli.ts | 218 + {src => packages/cssforge/src}/config.ts | 34 +- packages/cssforge/src/generator.ts | 230 + packages/cssforge/src/helpers.ts | 53 + packages/cssforge/src/lib.ts | 147 + packages/cssforge/src/mod.ts | 59 + packages/cssforge/src/modules/colors.ts | 423 + packages/cssforge/src/modules/primitive.ts | 138 + packages/cssforge/src/modules/spacing.ts | 128 + packages/cssforge/src/modules/typography.ts | 123 + .../tests/__snapshots__/colors.test.ts.snap | 460 + .../__snapshots__/primitive.test.ts.snap | 180 + .../tests/__snapshots__/spacing.test.ts.snap | 293 + .../__snapshots__/typography.test.ts.snap | 274 + packages/cssforge/tests/colors.test.ts | 589 + {tests => packages/cssforge/tests}/helpers.ts | 6 +- packages/cssforge/tests/primitive.test.ts | 231 + packages/cssforge/tests/spacing.test.ts | 207 + packages/cssforge/tests/typography.test.ts | 162 + packages/cssforge/tests/vitest-compat.ts | 18 + packages/cssforge/tsconfig.json | 13 + packages/cssforge/tsup.config.ts | 14 + packages/cssforge/vitest.config.ts | 7 + packages/repo-tools/moon.yml | 15 + pnpm-lock.yaml | 13227 ++++++++++++++++ pnpm-workspace.yaml | 3 + scripts/sync-version.js | 15 - scripts/update-readme.ts | 193 - skills/cssforge/SKILL.md | 52 + .../assets/config-templates/minimal.ts | 29 + .../assets/config-templates/tailwind.ts | 46 + .../assets/config-templates/vanilla-css.ts | 26 + .../assets/snippets/css-import-tailwind.css | 2 + .../assets/snippets/css-import-vanilla.css | 1 + skills/cssforge/references/cli-reference.md | 27 + skills/cssforge/references/docs-index.md | 31 + .../cssforge/references/source-schema-map.md | 28 + skills/cssforge/references/token-patterns.md | 31 + skills/cssforge/references/troubleshooting.md | 29 + skills/moon | 1 + skills/proto | 1 + src/cli.ts | 202 - src/generator.ts | 218 - src/helpers.ts | 55 - src/lib.ts | 144 - src/mod.ts | 59 - src/modules/colors.ts | 429 - src/modules/primitive.ts | 147 - src/modules/spacing.ts | 128 - src/modules/typography.ts | 123 - tests/__snapshots__/colors.test.ts.snap | 460 - tests/__snapshots__/primitive.test.ts.snap | 180 - tests/__snapshots__/spacing.test.ts.snap | 293 - tests/__snapshots__/typography.test.ts.snap | 274 - tests/colors.test.ts | 624 - tests/primitive.test.ts | 232 - tests/spacing.test.ts | 204 - tests/typography.test.ts | 187 - tsconfig.base.json | 14 + 247 files changed, 25928 insertions(+), 5124 deletions(-) create mode 120000 .agents/skills/cssforge create mode 100644 .agents/skills/moon/SKILL.md create mode 100644 .agents/skills/moon/examples/ci-workflow.yml create mode 100644 .agents/skills/moon/examples/moon.yml create mode 100644 .agents/skills/moon/examples/workspace.yml create mode 100644 .agents/skills/moon/references/cli-reference.md create mode 100644 .agents/skills/moon/references/task-config.md create mode 100644 .agents/skills/moon/references/v2-migration.md create mode 100644 .agents/skills/moon/references/workspace-config.md create mode 100644 .agents/skills/proto/SKILL.md create mode 100644 .agents/skills/proto/examples/prototools-full.toml create mode 100644 .agents/skills/proto/references/commands.md create mode 100644 .agents/skills/proto/references/config.md create mode 100644 .agents/skills/using-git-worktrees/SKILL.md create mode 120000 .claude/skills/cssforge create mode 120000 .claude/skills/using-git-worktrees create mode 100644 .moon/tasks/node.yml create mode 100644 .moon/toolchains.yml create mode 100644 .moon/workspace.yml create mode 100644 .prototools create mode 100644 CLAUDE.md create mode 100644 biome.json delete mode 100644 deno.json delete mode 100644 deno.lock create mode 100644 docs/migration-plan-node-moon-proto.md create mode 100644 example/tailwind-nextjs/.gitignore create mode 100644 example/tailwind-nextjs/README.md create mode 100644 example/tailwind-nextjs/app/favicon.ico create mode 100644 example/tailwind-nextjs/app/globals.css create mode 100644 example/tailwind-nextjs/app/layout.tsx create mode 100644 example/tailwind-nextjs/app/page.tsx create mode 100644 example/tailwind-nextjs/cssforge.config.ts create mode 100644 example/tailwind-nextjs/eslint.config.mjs create mode 100644 example/tailwind-nextjs/moon.yml create mode 100644 example/tailwind-nextjs/next.config.ts create mode 100644 example/tailwind-nextjs/package.json create mode 100644 example/tailwind-nextjs/playwright.config.ts create mode 100644 example/tailwind-nextjs/postcss.config.mjs create mode 100644 example/tailwind-nextjs/public/file.svg create mode 100644 example/tailwind-nextjs/public/globe.svg create mode 100644 example/tailwind-nextjs/public/next.svg create mode 100644 example/tailwind-nextjs/public/vercel.svg create mode 100644 example/tailwind-nextjs/public/window.svg create mode 100644 example/tailwind-nextjs/tests/e2e.spec.ts create mode 100644 example/tailwind-nextjs/tsconfig.json create mode 100644 example/tailwind-nuxt/.gitignore create mode 100644 example/tailwind-nuxt/README.md create mode 100644 example/tailwind-nuxt/app/app.vue create mode 100644 example/tailwind-nuxt/app/assets/css/main.css create mode 100644 example/tailwind-nuxt/cssforge.config.ts create mode 100644 example/tailwind-nuxt/moon.yml create mode 100644 example/tailwind-nuxt/nuxt.config.ts create mode 100644 example/tailwind-nuxt/package.json create mode 100644 example/tailwind-nuxt/playwright.config.ts create mode 100644 example/tailwind-nuxt/public/favicon.ico create mode 100644 example/tailwind-nuxt/public/robots.txt create mode 100644 example/tailwind-nuxt/tests/e2e.spec.ts create mode 100644 example/tailwind-nuxt/tsconfig.json create mode 100644 example/tailwind-solidstart/.gitignore create mode 100644 example/tailwind-solidstart/README.md create mode 100644 example/tailwind-solidstart/app.config.ts create mode 100644 example/tailwind-solidstart/cssforge.config.ts create mode 100644 example/tailwind-solidstart/moon.yml create mode 100644 example/tailwind-solidstart/package.json create mode 100644 example/tailwind-solidstart/playwright.config.ts create mode 100644 example/tailwind-solidstart/public/favicon.ico create mode 100644 example/tailwind-solidstart/src/app.css create mode 100644 example/tailwind-solidstart/src/app.tsx create mode 100644 example/tailwind-solidstart/src/components/Counter.tsx create mode 100644 example/tailwind-solidstart/src/components/Nav.tsx create mode 100644 example/tailwind-solidstart/src/entry-client.tsx create mode 100644 example/tailwind-solidstart/src/entry-server.tsx create mode 100644 example/tailwind-solidstart/src/global.d.ts create mode 100644 example/tailwind-solidstart/src/routes/[...404].tsx create mode 100644 example/tailwind-solidstart/src/routes/about.tsx create mode 100644 example/tailwind-solidstart/src/routes/index.tsx create mode 100644 example/tailwind-solidstart/tests/e2e.spec.ts create mode 100644 example/tailwind-solidstart/tsconfig.json create mode 100644 example/tailwind-sveltekit/.gitignore create mode 100644 example/tailwind-sveltekit/.npmrc create mode 100644 example/tailwind-sveltekit/README.md create mode 100644 example/tailwind-sveltekit/cssforge.config.ts create mode 100644 example/tailwind-sveltekit/moon.yml create mode 100644 example/tailwind-sveltekit/package.json create mode 100644 example/tailwind-sveltekit/playwright.config.ts create mode 100644 example/tailwind-sveltekit/src/app.css create mode 100644 example/tailwind-sveltekit/src/app.d.ts create mode 100644 example/tailwind-sveltekit/src/app.html create mode 100644 example/tailwind-sveltekit/src/lib/assets/favicon.svg create mode 100644 example/tailwind-sveltekit/src/lib/index.ts create mode 100644 example/tailwind-sveltekit/src/routes/+layout.svelte create mode 100644 example/tailwind-sveltekit/src/routes/+page.svelte create mode 100644 example/tailwind-sveltekit/static/robots.txt create mode 100644 example/tailwind-sveltekit/svelte.config.js create mode 100644 example/tailwind-sveltekit/tests/e2e.spec.ts create mode 100644 example/tailwind-sveltekit/tsconfig.json create mode 100644 example/tailwind-sveltekit/vite.config.ts create mode 100644 example/vanilla-react-css/.gitignore create mode 100644 example/vanilla-react-css/README.md create mode 100644 example/vanilla-react-css/cssforge.config.ts create mode 100644 example/vanilla-react-css/eslint.config.js create mode 100644 example/vanilla-react-css/index.html create mode 100644 example/vanilla-react-css/moon.yml create mode 100644 example/vanilla-react-css/package.json create mode 100644 example/vanilla-react-css/playwright.config.ts create mode 100644 example/vanilla-react-css/public/vite.svg create mode 100644 example/vanilla-react-css/src/App.css create mode 100644 example/vanilla-react-css/src/App.tsx create mode 100644 example/vanilla-react-css/src/assets/react.svg create mode 100644 example/vanilla-react-css/src/index.css create mode 100644 example/vanilla-react-css/src/main.tsx create mode 100644 example/vanilla-react-css/tests/e2e.spec.ts create mode 100644 example/vanilla-react-css/tsconfig.app.json create mode 100644 example/vanilla-react-css/tsconfig.json create mode 100644 example/vanilla-react-css/tsconfig.node.json create mode 100644 example/vanilla-react-css/vite.config.ts create mode 100644 example/vanilla-solid-css/.gitignore create mode 100644 example/vanilla-solid-css/README.md create mode 100644 example/vanilla-solid-css/cssforge.config.ts create mode 100644 example/vanilla-solid-css/index.html create mode 100644 example/vanilla-solid-css/moon.yml create mode 100644 example/vanilla-solid-css/package.json create mode 100644 example/vanilla-solid-css/playwright.config.ts create mode 100644 example/vanilla-solid-css/public/vite.svg create mode 100644 example/vanilla-solid-css/src/App.css create mode 100644 example/vanilla-solid-css/src/App.tsx create mode 100644 example/vanilla-solid-css/src/assets/solid.svg create mode 100644 example/vanilla-solid-css/src/index.css create mode 100644 example/vanilla-solid-css/src/index.tsx create mode 100644 example/vanilla-solid-css/tests/e2e.spec.ts create mode 100644 example/vanilla-solid-css/tsconfig.app.json create mode 100644 example/vanilla-solid-css/tsconfig.json create mode 100644 example/vanilla-solid-css/tsconfig.node.json create mode 100644 example/vanilla-solid-css/vite.config.ts create mode 100644 example/vanilla-svelte-css/.gitignore create mode 100644 example/vanilla-svelte-css/.vscode/extensions.json create mode 100644 example/vanilla-svelte-css/README.md create mode 100644 example/vanilla-svelte-css/cssforge.config.ts create mode 100644 example/vanilla-svelte-css/index.html create mode 100644 example/vanilla-svelte-css/moon.yml create mode 100644 example/vanilla-svelte-css/package.json create mode 100644 example/vanilla-svelte-css/playwright.config.ts create mode 100644 example/vanilla-svelte-css/public/vite.svg create mode 100644 example/vanilla-svelte-css/src/App.svelte create mode 100644 example/vanilla-svelte-css/src/app.css create mode 100644 example/vanilla-svelte-css/src/assets/svelte.svg create mode 100644 example/vanilla-svelte-css/src/lib/Counter.svelte create mode 100644 example/vanilla-svelte-css/src/main.ts create mode 100644 example/vanilla-svelte-css/svelte.config.js create mode 100644 example/vanilla-svelte-css/tests/e2e.spec.ts create mode 100644 example/vanilla-svelte-css/tsconfig.app.json create mode 100644 example/vanilla-svelte-css/tsconfig.json create mode 100644 example/vanilla-svelte-css/tsconfig.node.json create mode 100644 example/vanilla-svelte-css/vite.config.ts create mode 100644 example/vanilla-vue-css/.gitignore create mode 100644 example/vanilla-vue-css/.vscode/extensions.json create mode 100644 example/vanilla-vue-css/README.md create mode 100644 example/vanilla-vue-css/cssforge.config.ts create mode 100644 example/vanilla-vue-css/index.html create mode 100644 example/vanilla-vue-css/moon.yml create mode 100644 example/vanilla-vue-css/package.json create mode 100644 example/vanilla-vue-css/playwright.config.ts create mode 100644 example/vanilla-vue-css/public/vite.svg create mode 100644 example/vanilla-vue-css/src/App.vue create mode 100644 example/vanilla-vue-css/src/assets/vue.svg create mode 100644 example/vanilla-vue-css/src/components/HelloWorld.vue create mode 100644 example/vanilla-vue-css/src/main.ts create mode 100644 example/vanilla-vue-css/src/style.css create mode 100644 example/vanilla-vue-css/tests/e2e.spec.ts create mode 100644 example/vanilla-vue-css/tsconfig.app.json create mode 100644 example/vanilla-vue-css/tsconfig.json create mode 100644 example/vanilla-vue-css/tsconfig.node.json create mode 100644 example/vanilla-vue-css/vite.config.ts rename CHANGELOG.md => packages/cssforge/CHANGELOG.md (100%) create mode 100644 packages/cssforge/README.md create mode 100644 packages/cssforge/deno.json create mode 100644 packages/cssforge/moon.yml create mode 100644 packages/cssforge/package.json create mode 100644 packages/cssforge/scripts/sync-version.js create mode 100644 packages/cssforge/scripts/update-readme.ts create mode 100644 packages/cssforge/src/cli.ts rename {src => packages/cssforge/src}/config.ts (77%) create mode 100644 packages/cssforge/src/generator.ts create mode 100644 packages/cssforge/src/helpers.ts create mode 100644 packages/cssforge/src/lib.ts create mode 100644 packages/cssforge/src/mod.ts create mode 100644 packages/cssforge/src/modules/colors.ts create mode 100644 packages/cssforge/src/modules/primitive.ts create mode 100644 packages/cssforge/src/modules/spacing.ts create mode 100644 packages/cssforge/src/modules/typography.ts create mode 100644 packages/cssforge/tests/__snapshots__/colors.test.ts.snap create mode 100644 packages/cssforge/tests/__snapshots__/primitive.test.ts.snap create mode 100644 packages/cssforge/tests/__snapshots__/spacing.test.ts.snap create mode 100644 packages/cssforge/tests/__snapshots__/typography.test.ts.snap create mode 100644 packages/cssforge/tests/colors.test.ts rename {tests => packages/cssforge/tests}/helpers.ts (55%) create mode 100644 packages/cssforge/tests/primitive.test.ts create mode 100644 packages/cssforge/tests/spacing.test.ts create mode 100644 packages/cssforge/tests/typography.test.ts create mode 100644 packages/cssforge/tests/vitest-compat.ts create mode 100644 packages/cssforge/tsconfig.json create mode 100644 packages/cssforge/tsup.config.ts create mode 100644 packages/cssforge/vitest.config.ts create mode 100644 packages/repo-tools/moon.yml create mode 100644 pnpm-lock.yaml create mode 100644 pnpm-workspace.yaml delete mode 100644 scripts/sync-version.js delete mode 100644 scripts/update-readme.ts create mode 100644 skills/cssforge/SKILL.md create mode 100644 skills/cssforge/assets/config-templates/minimal.ts create mode 100644 skills/cssforge/assets/config-templates/tailwind.ts create mode 100644 skills/cssforge/assets/config-templates/vanilla-css.ts create mode 100644 skills/cssforge/assets/snippets/css-import-tailwind.css create mode 100644 skills/cssforge/assets/snippets/css-import-vanilla.css create mode 100644 skills/cssforge/references/cli-reference.md create mode 100644 skills/cssforge/references/docs-index.md create mode 100644 skills/cssforge/references/source-schema-map.md create mode 100644 skills/cssforge/references/token-patterns.md create mode 100644 skills/cssforge/references/troubleshooting.md create mode 120000 skills/moon create mode 120000 skills/proto delete mode 100644 src/cli.ts delete mode 100644 src/generator.ts delete mode 100644 src/helpers.ts delete mode 100644 src/lib.ts delete mode 100644 src/mod.ts delete mode 100644 src/modules/colors.ts delete mode 100644 src/modules/primitive.ts delete mode 100644 src/modules/spacing.ts delete mode 100644 src/modules/typography.ts delete mode 100644 tests/__snapshots__/colors.test.ts.snap delete mode 100644 tests/__snapshots__/primitive.test.ts.snap delete mode 100644 tests/__snapshots__/spacing.test.ts.snap delete mode 100644 tests/__snapshots__/typography.test.ts.snap delete mode 100644 tests/colors.test.ts delete mode 100644 tests/primitive.test.ts delete mode 100644 tests/spacing.test.ts delete mode 100644 tests/typography.test.ts create mode 100644 tsconfig.base.json diff --git a/.agents/skills/cssforge b/.agents/skills/cssforge new file mode 120000 index 0000000..2e01389 --- /dev/null +++ b/.agents/skills/cssforge @@ -0,0 +1 @@ +../../skills/cssforge \ No newline at end of file diff --git a/.agents/skills/moon/SKILL.md b/.agents/skills/moon/SKILL.md new file mode 100644 index 0000000..04ced25 --- /dev/null +++ b/.agents/skills/moon/SKILL.md @@ -0,0 +1,325 @@ +--- +name: moon +description: This skill should be used when the user asks to "configure moon", "set up moonrepo", "create moon tasks", "run moon commands", "configure moon workspace", "add moon project", "moon ci setup", "moon docker", "moon query", "migrate to moon v2", or mentions moon.yml, .moon/workspace.yml, .moon/toolchains.yml, moon run, moon ci, or moonrepo in general. +--- + +# moon - Polyglot Monorepo Build System + +moon is a Rust-based repository management, task orchestration, and build system for polyglot monorepos. It provides smart caching, dependency-aware task execution, and unified toolchain management. + +> **moon v2 is now available.** Run `moon migrate v2` to migrate. See `references/v2-migration.md` for breaking changes. + +## When to Use moon + +- Managing monorepos with multiple projects/packages +- Orchestrating tasks across projects with dependencies +- Caching build outputs for faster CI/local builds +- Managing toolchain versions (Node.js, Rust, Python, Go, etc.) +- Generating project and action graphs + +## Quick Reference + +### Core Commands + +```bash +moon run # Run task(s) +moon run :lint # Run in all projects +moon run '#tag:test' # Run by tag +moon ci # CI-optimized execution +moon check --all # Run all build/test tasks +moon query projects # List projects +moon project-graph # Visualize dependencies +``` + +### Target Syntax + +| Pattern | Description | +| -------------- | ------------------------------- | +| `project:task` | Specific project and task | +| `:task` | All projects with this task | +| `#tag:task` | Projects with tag | +| `^:task` | Upstream dependencies (in deps) | +| `~:task` | Current project (in configs) | + +### Configuration Files + +| File | Purpose | +| ---------------------- | ---------------------------------------- | +| `.moon/workspace.yml` | Workspace settings, project discovery | +| `.moon/toolchains.yml` | Language versions, package managers (v2) | +| `.moon/tasks/*.yml` | Global inherited tasks (v2) | +| `moon.yml` | Project-level config and tasks | + +> **v2 Note:** `.moon/toolchain.yml` → `.moon/toolchains.yml` (plural), `.moon/tasks.yml` → `.moon/tasks/*.yml` + +## Workspace Configuration + +```yaml +# .moon/workspace.yml +$schema: "https://moonrepo.dev/schemas/workspace.json" + +projects: + - "apps/*" + - "packages/*" + +vcs: + client: "git" + defaultBranch: "main" + +pipeline: + archivableTargets: + - ":build" + cacheLifetime: "7 days" +``` + +## Project Configuration + +```yaml +# moon.yml +$schema: "https://moonrepo.dev/schemas/project.json" + +language: "typescript" +layer: "application" # v2: 'type' renamed to 'layer' +stack: "frontend" +tags: ["react", "graphql"] + +dependsOn: + - "shared-utils" + - id: "api-client" + scope: "production" + +fileGroups: + sources: + - "src/**/*" + tests: + - "tests/**/*" + +tasks: + build: + command: "vite build" + inputs: + - "@group(sources)" + outputs: + - "dist" + deps: + - "^:build" + + dev: + command: "vite dev" + preset: "server" + + # v2: Use 'script' for shell features (pipes, redirects) + lint: + script: "eslint . && prettier --check ." + + test: + command: "vitest run" + inputs: + - "@group(sources)" + - "@group(tests)" +``` + +### Layer Types (v2) + +| Layer | Description | +| --------------- | --------------------- | +| `application` | Apps, services | +| `library` | Shareable code | +| `tool` | CLIs, scripts | +| `automation` | E2E/integration tests | +| `scaffolding` | Templates, generators | +| `configuration` | Infra, config | + +## Task Configuration + +### Task Fields + +| Field | Description | +| --------- | ------------------------------------ | +| `command` | Command to execute (string or array) | +| `args` | Additional arguments | +| `deps` | Task dependencies | +| `inputs` | Files for cache hashing | +| `outputs` | Files to cache | +| `env` | Environment variables | +| `extends` | Inherit from another task | +| `preset` | `server` or `utility` | + +### Task Inheritance + +Tasks can be inherited globally via `.moon/tasks/*.yml`: + +```yaml +# .moon/tasks/node.yml +inheritedBy: + toolchains: ["javascript", "typescript"] + +fileGroups: + sources: ["src/**/*"] + +tasks: + lint: + command: "eslint ." + inputs: ["@group(sources)"] +``` + +Projects control inheritance: + +```yaml +# moon.yml +workspace: + inheritedTasks: + include: ["lint", "test"] + exclude: ["deploy"] + rename: + buildApp: "build" +``` + +### Task Options + +```yaml +tasks: + example: + command: "cmd" + options: + cache: true # Enable caching + runInCI: "affected" # affected, always, only, false + persistent: true # Long-running process + retryCount: 2 # Retry on failure + timeout: 300 # Seconds + mutex: "resource" # Exclusive lock + priority: "high" # critical, high, normal, low +``` + +### Input Tokens + +```yaml +inputs: + - "@group(sources)" # File group + - "@globs(tests)" # Glob patterns + - "/tsconfig.base.json" # Workspace root file + - "$NODE_ENV" # Environment variable +``` + +## Toolchain Configuration + +```yaml +# .moon/toolchains.yml (v2: plural) +$schema: "https://moonrepo.dev/schemas/toolchains.json" + +# JavaScript ecosystem (v2: required for node/bun/deno) +javascript: + packageManager: "pnpm" + inferTasksFromScripts: false + +node: + version: "20.10.0" + +pnpm: + version: "8.12.0" + +# Alternative runtimes +bun: + version: "1.0.0" + +deno: + version: "1.40.0" + +typescript: + syncProjectReferences: true + routeOutDirToCache: true + +rust: + version: "1.75.0" + bins: ["cargo-nextest", "cargo-llvm-cov"] + +go: + version: "1.21.0" + +python: + version: "3.12.0" +``` + +### Toolchain Tiers + +| Tier | Description | Examples | +| ---- | ---------------------- | ------------------------------------ | +| 3 | Full management | Node.js, Bun, Deno, Rust, Go, Python | +| 2 | Ecosystem integration | PHP, Ruby | +| 1 | Project categorization | Bash, Batch | +| 0 | System execution | Custom tools | + +## CI Integration + +```yaml +# GitHub Actions +- uses: actions/checkout@v4 + with: + fetch-depth: 0 # Required for affected detection + +- uses: moonrepo/setup-toolchain@v0 + with: + auto-install: true + +- run: moon ci :build :test + +- uses: moonrepo/run-report-action@v1 + if: success() || failure() + with: + access-token: ${{ secrets.GITHUB_TOKEN }} +``` + +### Parallelization with Matrix + +```yaml +strategy: + matrix: + shard: [0, 1, 2, 3] + +steps: + - run: moon ci --job ${{ matrix.shard }} --job-total 4 +``` + +### Affected Detection + +```bash +moon run :test --affected # Only affected projects +moon run :lint --affected --status staged # Only staged files +moon ci :test --base origin/main # Compare against base +moon query changed-files # v2: renamed from touched-files +``` + +## Docker Support + +```bash +moon docker scaffold # Generate Docker layers +moon docker setup # Install toolchain in Docker +moon docker prune # Prune for production +moon docker file # Generate Dockerfile +``` + +## Moon Query Language (MQL) + +```bash +# Filter projects +moon query projects "language=typescript && projectType=library" +moon run :build --query "tag=react" + +# Operators: =, !=, ~, !~, &&, || +# Fields: project, language, stack, tag, task, taskType +``` + +## Additional Resources + +For detailed configuration options, consult: + +- **`references/workspace-config.md`** - Complete workspace.yml reference +- **`references/task-config.md`** - Task configuration and inheritance patterns +- **`references/v2-migration.md`** - v1 to v2 migration guide +- **`references/cli-reference.md`** - Full CLI command reference + +### Examples + +- **`examples/workspace.yml`** - Complete workspace configuration +- **`examples/moon.yml`** - Full project configuration +- **`examples/ci-workflow.yml`** - GitHub Actions CI workflow diff --git a/.agents/skills/moon/examples/ci-workflow.yml b/.agents/skills/moon/examples/ci-workflow.yml new file mode 100644 index 0000000..dc8f68b --- /dev/null +++ b/.agents/skills/moon/examples/ci-workflow.yml @@ -0,0 +1,186 @@ +# .github/workflows/ci.yml +# Complete moon CI workflow with matrix parallelization and run reports + +name: CI Pipeline + +on: + push: + branches: ['main', 'develop'] + pull_request: + types: [opened, synchronize, reopened] + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +jobs: + ci: + name: 'CI (${{ matrix.shard }})' + runs-on: 'ubuntu-latest' + strategy: + fail-fast: false + matrix: + shard: [0, 1, 2, 3] + + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + fetch-depth: 0 # Required for affected detection + + - name: Setup Toolchain + uses: moonrepo/setup-toolchain@v0 + with: + auto-install: true + + - name: Run CI + run: moon ci --job ${{ matrix.shard }} --job-total 4 + + - name: Report Results + uses: moonrepo/run-report-action@v1 + if: success() || failure() + with: + access-token: ${{ secrets.GITHUB_TOKEN }} + matrix: ${{ toJSON(matrix) }} + +--- + +# Alternative: Split by task type +# .github/workflows/ci-split.yml + +name: CI Pipeline (Split) + +on: + push: + branches: ['main'] + pull_request: + +jobs: + build: + name: Build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + - uses: moonrepo/setup-toolchain@v0 + with: + auto-install: true + - run: moon ci :build + + lint: + name: Lint & Format + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + - uses: moonrepo/setup-toolchain@v0 + with: + auto-install: true + - run: moon ci :lint :format + + test: + name: Test + runs-on: ubuntu-latest + needs: [build] + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + - uses: moonrepo/setup-toolchain@v0 + with: + auto-install: true + - run: moon ci :test + +--- + +# Open source multi-platform testing +# .github/workflows/ci-matrix.yml + +name: CI Matrix + +on: + push: + branches: ['main'] + pull_request: + +jobs: + ci: + name: 'CI (Node ${{ matrix.node }}, ${{ matrix.os }})' + runs-on: ${{ matrix.os }} + strategy: + fail-fast: false + matrix: + os: [ubuntu-latest, windows-latest, macos-latest] + node: [18, 20, 22] + + env: + MOON_NODE_VERSION: ${{ matrix.node }} + + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node }} + + - uses: moonrepo/setup-toolchain@v0 + with: + auto-install: true + + - run: moon ci + + - uses: moonrepo/run-report-action@v1 + if: success() || failure() + with: + access-token: ${{ secrets.GITHUB_TOKEN }} + matrix: ${{ toJSON(matrix) }} + +--- + +# CircleCI configuration +# .circleci/config.yml + +version: 2.1 +orbs: + node: circleci/node@5.0.2 + +jobs: + ci: + docker: + - image: cimg/base:stable + parallelism: 10 + steps: + - checkout + - node/install: + install-yarn: true + node-version: '20' + - node/install-packages: + check-cache: always + pkg-manager: yarn-berry + - run: | + curl -fsSL https://moonrepo.dev/install/proto.sh | bash + export PATH="$HOME/.proto/bin:$PATH" + moon ci --job $CIRCLE_NODE_INDEX --job-total $CIRCLE_NODE_TOTAL + +workflows: + ci: + jobs: + - ci + +--- + +# Buildkite configuration +# .buildkite/pipeline.yml + +steps: + - label: 'CI' + parallelism: 10 + commands: + - curl -fsSL https://moonrepo.dev/install/proto.sh | bash + - export PATH="$HOME/.proto/bin:$PATH" + - proto install + - moon ci --job $$BUILDKITE_PARALLEL_JOB --job-total $$BUILDKITE_PARALLEL_JOB_COUNT diff --git a/.agents/skills/moon/examples/moon.yml b/.agents/skills/moon/examples/moon.yml new file mode 100644 index 0000000..ecc330e --- /dev/null +++ b/.agents/skills/moon/examples/moon.yml @@ -0,0 +1,178 @@ +# moon.yml - Complete project configuration example +$schema: 'https://moonrepo.dev/schemas/project.json' + +# Project classification +language: 'typescript' +layer: 'application' +stack: 'frontend' + +# Metadata +project: + name: 'Web Application' + description: 'Main customer-facing web application' + owner: 'frontend-team' + maintainers: + - 'alice' + - 'bob' + channel: '#web-app' + metadata: + tier: 1 + public: true + +# Tags for querying and constraints +tags: + - 'react' + - 'next' + - 'customer-facing' + +# Explicit project dependencies +dependsOn: + - 'ui-components' + - 'shared-utils' + - id: 'api-client' + scope: 'production' + - id: 'test-fixtures' + scope: 'development' + +# Environment variables for all tasks +env: + NEXT_PUBLIC_API_URL: 'https://api.example.com' + NODE_ENV: 'production' + +# Per-project toolchain overrides +toolchain: + default: 'node' + node: + version: '20.10.0' + typescript: + includeProjectReferenceSources: true + routeOutDirToCache: true + +# File groups for reuse in tasks +fileGroups: + sources: + - 'src/**/*' + - 'app/**/*' + - 'components/**/*' + tests: + - 'tests/**/*' + - '**/*.test.{ts,tsx}' + - '**/__tests__/**/*' + configs: + - 'next.config.js' + - 'tailwind.config.js' + - 'tsconfig.json' + - 'postcss.config.js' + assets: + - 'public/**/*' + +# Control task inheritance +workspace: + inheritedTasks: + exclude: + - 'deploy-staging' + rename: + buildApp: 'build' + +# Task definitions +tasks: + build: + command: 'next build' + inputs: + - '@group(sources)' + - '@group(configs)' + - '@group(assets)' + outputs: + - '.next' + deps: + - 'ui-components:build' + - 'api-client:build' + env: + NODE_ENV: 'production' + options: + cache: true + priority: 'high' + + dev: + command: 'next dev' + preset: 'server' + deps: + - '~:codegen' + env: + NODE_ENV: 'development' + + start: + command: 'next start' + preset: 'server' + deps: + - '~:build' + + test: + command: 'vitest run' + inputs: + - '@group(sources)' + - '@group(tests)' + deps: + - '^:build' + options: + retryCount: 2 + runInCI: 'affected' + + test-watch: + command: 'vitest' + preset: 'watcher' + + lint: + command: 'eslint' + args: + - '.' + - '--ext' + - '.ts,.tsx' + inputs: + - '@group(sources)' + - '.eslintrc.js' + + lint-fix: + extends: 'lint' + args: '--fix' + options: + runInCI: false + + typecheck: + command: 'tsc --noEmit' + inputs: + - '@group(sources)' + - '@group(configs)' + + codegen: + command: 'graphql-codegen' + outputs: + - 'src/generated/' + options: + internal: true + cache: 'local' + + e2e: + command: 'playwright test' + inputs: + - 'e2e/**/*' + - 'playwright.config.ts' + deps: + - target: '~:build' + env: + NODE_ENV: 'test' + options: + interactive: true + runInCI: 'always' + timeout: 600 + retryCount: 2 + + deploy: + command: './scripts/deploy.sh' + deps: + - '~:build' + - '~:test' + - '~:e2e' + options: + runInCI: 'only' + mutex: 'deployment' diff --git a/.agents/skills/moon/examples/workspace.yml b/.agents/skills/moon/examples/workspace.yml new file mode 100644 index 0000000..69d6df4 --- /dev/null +++ b/.agents/skills/moon/examples/workspace.yml @@ -0,0 +1,67 @@ +# .moon/workspace.yml - Complete example (v2 format) +$schema: 'https://moonrepo.dev/schemas/workspace.json' + +# Project discovery +projects: + - 'apps/*' + - 'packages/*' + - 'tools/*' + +# Version control +vcs: + client: 'git' # v2: 'manager' renamed to 'client' + provider: 'github' + defaultBranch: 'main' + remoteCandidates: + - 'origin' + - 'upstream' + hooks: + pre-commit: + - 'moon run :lint --affected --status staged' + pre-push: + - 'moon run :test --affected' + +# Task pipeline (v2: 'runner' renamed to 'pipeline') +pipeline: + archivableTargets: + - ':build' + - ':test' + cacheLifetime: '7 days' + inheritColorsForPipedTasks: true + logRunningCommand: true + autoCleanCache: true + +# Hashing +hasher: + optimization: 'performance' + walkStrategy: 'vcs' + +# Code ownership +codeowners: + globalPaths: + '/*': ['@platform-team'] + orderBy: 'project-source' + sync: true # v2: 'syncOnRun' renamed to 'sync' + +# Constraints +constraints: + enforceProjectTypeRelationships: true + tagRelationships: + frontend: + requires: ['shared'] + backend: + requires: ['shared'] + +# Code generation +generator: + templates: + - './templates' + +# Remote caching (optional) +# remote: # v2: 'unstable_remote' renamed to 'remote' +# host: 'grpcs://cache.example.com' +# auth: +# token: 'CACHE_TOKEN' + +# Telemetry +telemetry: true diff --git a/.agents/skills/moon/references/cli-reference.md b/.agents/skills/moon/references/cli-reference.md new file mode 100644 index 0000000..5e03886 --- /dev/null +++ b/.agents/skills/moon/references/cli-reference.md @@ -0,0 +1,222 @@ +# Moon CLI Reference + +Complete reference for all moon CLI commands. + +## Task Execution + +### moon run + +Execute targets and their dependencies. + +```bash +moon run ... [-- ] +``` + +**Options:** + +| Flag | Description | +| ---------------------- | ------------------------------- | +| `--affected` | Only run if affected by changes | +| `--dependents` | Also run downstream dependents | +| `--force` | Bypass cache | +| `--interactive`, `-i` | Interactive task selection | +| `--no-bail` | Continue on failure | +| `--query ` | Filter with MQL | +| `--remote` | Compare against remote | +| `--status ` | Filter by status | +| `--summary` | Show execution summary | +| `--update-cache`, `-u` | Force cache update | + +**Examples:** + +```bash +moon run app:build +moon run :lint --affected +moon run '#frontend:test' +moon run app:test -- --coverage +moon run :build --query "language=typescript" +``` + +### moon check + +Run all build/test tasks for projects. + +```bash +moon check [project...] +moon check --all +``` + +### moon ci + +CI-optimized task execution with job distribution. + +```bash +moon ci [target...] +``` + +**Options:** + +| Flag | Description | +| --------------------- | ----------------------- | +| `--base ` | Base to compare against | +| `--head ` | Head revision | +| `--job ` | Job index (0-based) | +| `--job-total ` | Total parallel jobs | + +**Examples:** + +```bash +moon ci :build :test +moon ci :test --job 0 --job-total 4 +moon ci --base origin/main --head HEAD +``` + +## Query Commands + +### moon query projects + +```bash +moon query projects [mql] +moon query projects --affected +moon query projects --tags frontend +moon query projects "language=typescript" +``` + +### moon query tasks + +```bash +moon query tasks [mql] +moon query tasks --affected +moon query tasks "task~dev-*" +``` + +### moon query touched-files + +```bash +moon query touched-files +moon query touched-files --status modified,staged +moon query touched-files --base main --head HEAD +``` + +### moon query hash + +```bash +moon query hash +moon query hash-diff +``` + +## Graph Visualization + +### moon project-graph + +```bash +moon project-graph [project] +moon project-graph --dot > graph.dot +moon project-graph app --dependents +``` + +### moon action-graph + +```bash +moon action-graph [target] +moon action-graph app:build --dot +``` + +## Workspace Management + +### moon init + +```bash +moon init +moon init node +moon init --minimal +moon init --to ./app +``` + +### moon sync + +```bash +moon sync projects # Sync all projects +moon sync hooks # Sync VCS hooks +``` + +### moon setup + +```bash +moon setup # Install toolchain +``` + +### moon generate + +```bash +moon generate