diff --git a/.changeset/orange-pianos-open.md b/.changeset/orange-pianos-open.md new file mode 100644 index 0000000..732a58f --- /dev/null +++ b/.changeset/orange-pianos-open.md @@ -0,0 +1,5 @@ +--- +"@hebilicious/cssforge": patch +--- + +fix: update reserved keywords diff --git a/README.md b/README.md index 33071d2..07e3e35 100644 --- a/README.md +++ b/README.md @@ -10,11 +10,16 @@ ## Why CSS forge is library that leverages modern CSS features and conventions to help you -generate CSS custom properties (css variables). At the core of CSSforge is the schema : A -serializable configuration object. CSSforge has 0 runtime and generate at build time raw -CSS, Typescript or JSON. This intentionally keeps things simple and flexible, and allows -you to integrate it with any framework or CSS workflow. CSSforge will try to integrate -with design tools such as Figma, cooors etc in the future. +generate CSS custom properties (css variables). + +At the core of CSSforge is the schema : A serializable configuration object. + +CSSforge has 0 runtime and generate at build time raw CSS, Typescript or JSON. + +This intentionally keeps things simple and flexible, and allows you to integrate it with +any framework or CSS workflow. + +In the future, CSSforge will try to integrate with popular design tools such as Figma. ## Features @@ -871,15 +876,18 @@ const css = generateCSS(config); Check out our examples: -- [Basic Setup](./examples/basic) -- [] Tailwind +- [Basic Setup](./example/basic) +- [ ] Tailwind ## TODO -- [] Custom Media Queries https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media -- [] Line Height -- [] Bundlers Plugin (Vite, Rollup, Webpack ...) -- [] Nuxt Module +- [ ] Module: + [Custom Media Queries](https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media) +- [ ] Typography : Line Height +- [ ] Stable schema spec +- [ ] VSCode Extension +- [ ] Bundlers Plugin (Vite, Rollup, Webpack ...) +- [ ] Nuxt Module ## License diff --git a/src/helpers.ts b/src/helpers.ts index 6174a4d..2a8e7c7 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -4,7 +4,8 @@ const reservedKeyWords = [ "typography", "typography_fluid", "theme", - "color", + "gradients", + "palette", ]; /** * Validates a name to ensure it doesn't contain invalid characters. diff --git a/tests/colors.test.ts b/tests/colors.test.ts index 4d430af..14688a7 100644 --- a/tests/colors.test.ts +++ b/tests/colors.test.ts @@ -16,7 +16,7 @@ Deno.test("processColors - converts hex to oklch", () => { }, }); - const { css } = processColors(config.colors); + const { css, resolveMap } = processColors(config.colors); const lines = getLines(css); assertEquals( lines[1].trim(), @@ -26,6 +26,10 @@ Deno.test("processColors - converts hex to oklch", () => { lines[2].trim(), "--palette-coral-200: oklch(69.622% 0.19552 32.32143);", ); + assertEquals(Array.from(resolveMap.keys()), [ + "palette.value.coral.100", + "palette.value.coral.200", + ]); }); Deno.test("processColors - handles different color formats", () => { @@ -45,7 +49,7 @@ Deno.test("processColors - handles different color formats", () => { }, } as const, ); - const { css } = processColors(config.colors); + const { css, resolveMap } = processColors(config.colors); const lines = getLines(css); assertEquals( @@ -61,6 +65,13 @@ Deno.test("processColors - handles different color formats", () => { lines[4].trim(), "--palette-brand-default: oklch(62.796% 0.25768 29.23388);", ); + + assertEquals(Array.from(resolveMap.keys()), [ + "palette.value.brand.200", + "palette.value.brand.300", + "palette.value.brand.400", + "palette.value.brand.default", + ]); }); Deno.test("processColors - handles string values", () => { @@ -76,7 +87,7 @@ Deno.test("processColors - handles string values", () => { }, }, }); - const { css } = processColors(config.colors); + const { css, resolveMap } = processColors(config.colors); const lines = getLines(css); assertEquals( lines[1].trim(), @@ -86,6 +97,10 @@ Deno.test("processColors - handles string values", () => { lines[2].trim(), "--palette-simple-black: oklch(0% 0 0);", ); + assertEquals(Array.from(resolveMap.keys()), [ + "palette.value.simple.white", + "palette.value.simple.black", + ]); }); Deno.test("processColors - handles themes", () => { @@ -117,7 +132,7 @@ Deno.test("processColors - handles themes", () => { }, }, }); - const { css } = processColors(config.colors); + const { css, resolveMap } = processColors(config.colors); const lines = getLines(css); assertEquals( lines[5].trim(), @@ -127,6 +142,12 @@ Deno.test("processColors - handles themes", () => { lines[6].trim(), "--theme-light-background-secondary: var(--palette-simple-black);", ); + assertEquals(Array.from(resolveMap.keys()), [ + "palette.value.simple.white", + "palette.value.simple.black", + "theme.value.light.background.primary", + "theme.value.light.background.secondary", + ]); }); Deno.test("processColors - handles transparency", () => { @@ -142,7 +163,7 @@ Deno.test("processColors - handles transparency", () => { }, }, }); - const { css } = processColors(config.colors); + const { css, resolveMap } = processColors(config.colors); const lines = getLines(css); assertEquals( lines[1], @@ -152,6 +173,10 @@ Deno.test("processColors - handles transparency", () => { lines[2], "--palette-alpha-softGray2: oklch(14.48% 0 0 / 24%);", ); + assertEquals(Array.from(resolveMap.keys()), [ + "palette.value.alpha.softGray1", + "palette.value.alpha.softGray2", + ]); }); Deno.test("processColors - generates gradient with color variables", () => { @@ -197,6 +222,13 @@ Deno.test("processColors - generates gradient with color variables", () => { ].join("\n"); assertEquals(lines.at(-1), expected); + assertEquals(Array.from(result.resolveMap.keys()), [ + "palette.value.coral.50", + "palette.value.coral.90", + "palette.value.coral.100", + "palette.value.indigo.100", + "gradients.value.orangeGradient.primary", + ]); }); Deno.test("processColors - handles themes referencing gradients", () => { @@ -241,11 +273,16 @@ Deno.test("processColors - handles themes referencing gradients", () => { }, }); - const { css } = processColors(config.colors); + const { css, resolveMap } = processColors(config.colors); const lines = getLines(css); const lastLine = lines.pop(); assertEquals( lastLine, "--theme-light-background-primary: var(--gradients-orangeGradient-primary);", ); + assertEquals(Array.from(resolveMap.keys()), [ + "palette.value.coral.50", + "gradients.value.orangeGradient.primary", + "theme.value.light.background.primary", + ]); }); diff --git a/tests/spacing.test.ts b/tests/spacing.test.ts index 64cd9c5..ccad980 100644 --- a/tests/spacing.test.ts +++ b/tests/spacing.test.ts @@ -21,6 +21,13 @@ Deno.test("processSpacing - generates correct spacing scale", () => { "--spacing-size-s: 1rem;", ].join("\n"); assertEquals(result.css, expected); + + assertEquals(Array.from(result.resolveMap.keys()), [ + "spacing.custom.size.value.1", + "spacing.custom.size.value.2", + "spacing.custom.size.value.3", + "spacing.custom.size.value.s", + ]); }); // Test with string keys @@ -49,6 +56,13 @@ Deno.test("processSpacing - handles settings", () => { ].join("\n"); assertEquals(result.css, expected); + + assertEquals(Array.from(result.resolveMap.keys()), [ + "spacing.custom.size.value.1", + "spacing.custom.size.value.2", + "spacing.custom.scale.value.md", + "spacing.custom.scale.value.lg", + ]); }); Deno.test("processSpacing - generates fluid spacing (prefix)", () => { @@ -71,7 +85,7 @@ Deno.test("processSpacing - generates fluid spacing (prefix)", () => { }, }); - const { css } = processSpacing(config.spacing); + const { css, resolveMap } = processSpacing(config.spacing); const expected = [ "--spacing_fluid-base-foo-xs: clamp(0rem, 0rem + 0vw, 0rem);", "--spacing_fluid-base-foo-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem);", @@ -83,6 +97,17 @@ Deno.test("processSpacing - generates fluid spacing (prefix)", () => { "--spacing_fluid-base-foo-m-l: clamp(0.25rem, -0.6667rem + 4.5833vw, 3rem);", ].join("\n"); assertEquals(css, expected); + + assertEquals(Array.from(resolveMap.keys()), [ + "spacing_fluid.base@xs", + "spacing_fluid.base@s", + "spacing_fluid.base@m", + "spacing_fluid.base@l", + "spacing_fluid.base@xs-l", + "spacing_fluid.base@xs-s", + "spacing_fluid.base@s-m", + "spacing_fluid.base@m-l", + ]); }); Deno.test("processSpacing - fluid without prefix falls back to scale name", () => { @@ -102,7 +127,7 @@ Deno.test("processSpacing - fluid without prefix falls back to scale name", () = }, }, }); - const { css } = processSpacing(config.spacing); + const { css, resolveMap } = processSpacing(config.spacing); const expected = [ "--spacing_fluid-rhythm-xs: clamp(0rem, 0rem + 0vw, 0rem);", "--spacing_fluid-rhythm-s: clamp(0.125rem, -0.25rem + 1.875vw, 1.25rem);", @@ -111,6 +136,14 @@ Deno.test("processSpacing - fluid without prefix falls back to scale name", () = "--spacing_fluid-rhythm-s-m: clamp(0.125rem, -0.25rem + 1.875vw, 1.25rem);", ].join("\n"); assertEquals(css, expected); + + assertEquals(Array.from(resolveMap.keys()), [ + "spacing_fluid.rhythm@xs", + "spacing_fluid.rhythm@s", + "spacing_fluid.rhythm@m", + "spacing_fluid.rhythm@xs-s", + "spacing_fluid.rhythm@s-m", + ]); }); Deno.test("processSpacing - combines fluid and custom spacing", () => { @@ -137,7 +170,7 @@ Deno.test("processSpacing - combines fluid and custom spacing", () => { }, }, }); - const { css } = processSpacing(config.spacing!); + const { css, resolveMap } = processSpacing(config.spacing!); const expected = [ "--spacing_fluid-base-flux-xs: clamp(0rem, 0rem + 0vw, 0rem);", "--spacing_fluid-base-flux-s: clamp(0.25rem, -0.1667rem + 2.0833vw, 1.5rem);", @@ -148,4 +181,13 @@ Deno.test("processSpacing - combines fluid and custom spacing", () => { "--spacing-gap-2: 8px;", ].join("\n"); assertEquals(css, expected); + assertEquals(Array.from(resolveMap.keys()), [ + "spacing_fluid.base@xs", + "spacing_fluid.base@s", + "spacing_fluid.base@m", + "spacing_fluid.base@xs-s", + "spacing_fluid.base@s-m", + "spacing.custom.gap.value.1", + "spacing.custom.gap.value.2", + ]); }); diff --git a/tests/typography.test.ts b/tests/typography.test.ts index 48ac2b8..04a19b0 100644 --- a/tests/typography.test.ts +++ b/tests/typography.test.ts @@ -44,6 +44,11 @@ Deno.test("processTypography - generates correct CSS variables", () => { "--typography_fluid-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem);", ); + assertEquals( + Array.from(result.resolveMap.keys()), + expectedSizes.map((size) => `typography_fluid.arial@${size}`), + ); + // Test that we have all the expected size variables expectedSizes.forEach((size) => { const hasSize = lines.some((line) => @@ -107,10 +112,15 @@ Deno.test("typography - can handle custom labels and prefixes", () => { // Test a specific value for precision const xlLine = lines.find((line) => line.includes("--typography_fluid-arial-text-xl:")); assertEquals( - xlLine?.trim(), + xlLine, "--typography_fluid-arial-text-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem);", ); + assertEquals( + Array.from(result.resolveMap.keys()), + expectedSizes.toReversed().map((size) => `typography_fluid.arial@${size}`), + ); + // Test that we have all the expected size variables expectedSizes.forEach((size) => { const hasSize = lines.some((line) => @@ -149,12 +159,22 @@ Deno.test("processTypography - can process weights", () => { const lines = getLines(result.css); assertEquals(lines.length, positiveSteps + negativeSteps + 1 + 1); // 1 for base size and 1 for weight + assertEquals( + Array.from(result.resolveMap.keys()), + [ + "typography_fluid.arial@2xl", + "typography_fluid.arial@xl", + "typography_fluid.arial@l", + "typography_fluid.arial@m", + "typography_fluid.arial@s", + "typography_fluid.arial@xs", + "typography_fluid.arial@2xs", + "typography.weight.arial.value.regular", + ], + ); // Test that we have the weight variable const xlLine = lines.find((line) => line.includes("--typography-weight-arial-regular:") ); - assertEquals( - xlLine?.trim(), - "--typography-weight-arial-regular: 500;", - ); + assertEquals(xlLine, "--typography-weight-arial-regular: 500;"); });