@marianmeres/design-tokens 1.5.0 → 1.6.0

package/AGENTS.md

@@ -55,7 +55,7 @@ Entry points:
 | --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
 | `generateCssTokens(schema, prefix, options?)` | Generate token key-value pairs. Third arg: `GenerateOptions` object or `"light"`/`"dark"` shorthand |
 | `toCssString(tokens, selector?)`              | Convert tokens to a CSS declaration block (groups by base color name)                               |
-| `generateThemeCss(schema, prefix, options?)`  | Generate complete CSS for light + optional dark mode; supports `cssLayer` wrapping                  |
+| `generateThemeCss(schema, prefix, options?)`  | Generate complete CSS for light + optional dark mode; supports `cssLayer` wrapping and `prettierIgnore` pragma       |
 | `hexToRgb(hex)`                               | Parse hex to `[r, g, b]` tuple                                                                      |
 | `hexToRgbTriplet(hex)`                        | Convert hex to `"r, g, b"` string                                                                   |
 
@@ -83,7 +83,7 @@ Entry points:
 | `SingleColor`           | `string \| ColorValue`                                                          |
 | `GeneratedTokens`       | `Record<string, string>`                                                        |
 | `GenerateOptions`       | `{ mode?, deriveStates?, surfaceForegroundContrast? }`                          |
-| `GenerateThemeOptions`  | `Omit<GenerateOptions, "mode"> & { cssLayer? }`                                 |
+| `GenerateThemeOptions`  | `Omit<GenerateOptions, "mode"> & { cssLayer?, prettierIgnore? }`                |
 | `RolePairedKey`         | Required: `"background" \| "muted" \| "surface"`                                |
 | `RolePairedOptionalKey` | Optional: `"surface-1"` (all bundled themes ship it)                            |
 

package/API.md

@@ -71,6 +71,7 @@ Generate complete CSS for a theme with light mode and optional dark mode.
 - `prefix` (`string`) — CSS variable prefix (trailing dash optional)
 - `options` (`GenerateThemeOptions`, optional) — Accepts all `GenerateOptions` (except `mode`, which is set per section) plus:
   - `cssLayer` (`string`, optional) — Wrap the output in `@layer {name} { ... }`. Useful for CSS cascade control.
+  - `prettierIgnore` (`boolean`, optional) — Prepend a `/* prettier-ignore */` comment so Prettier preserves the generated whitespace alignment when the output is written to a file that later gets formatted. Default: `false`.
 
 **Returns:** `string` — Complete CSS with `:root` for light and `:root.dark` for dark mode, optionally wrapped in `@layer`.
 
@@ -290,10 +291,11 @@ Options passed to `generateCssTokens`. See the function docs above for field mea
 ```typescript
 type GenerateThemeOptions = Omit<GenerateOptions, "mode"> & {
 	cssLayer?: string;
+	prettierIgnore?: boolean;
 };
 ```
 
-Options passed to `generateThemeCss`. Omits `mode` (set automatically per section) and adds `cssLayer` for optional `@layer` wrapping.
+Options passed to `generateThemeCss`. Omits `mode` (set automatically per section) and adds `cssLayer` for optional `@layer` wrapping plus `prettierIgnore` to prepend a `/* prettier-ignore */` pragma for build pipelines that pass the output through Prettier.
 
 ---
 

package/dist/generate.d.ts

@@ -32,6 +32,15 @@ export type GenerateThemeOptions = Omit<GenerateOptions, "mode"> & {
      * Wrap the output in `@layer {name} { ... }`. Pass a layer name to enable.
      */
     cssLayer?: string;
+    /**
+     * Prepend a `/* prettier-ignore *\/` comment so Prettier preserves the
+     * generated whitespace alignment when the output is written to a file that
+     * later gets formatted. Has no runtime effect; only meaningful for build
+     * pipelines that pass the result through Prettier.
+     *
+     * @default false
+     */
+    prettierIgnore?: boolean;
 };
 /**
  * Generate CSS token key-value pairs from a {@link TokenSchema}.

package/dist/generate.js

@@ -55,10 +55,10 @@ function generatePairedColorTokens(tokens, key, pair, prefix) {
     tokens[`${prefix}color-${key}-hover`] = pair.hover ?? pair.DEFAULT;
     tokens[`${prefix}color-${key}-active`] = pair.active ?? pair.DEFAULT;
     tokens[`${prefix}color-${key}-foreground`] = pair.foreground;
-    tokens[`${prefix}color-${key}-foreground-hover`] = pair.foregroundHover ??
-        pair.foreground;
-    tokens[`${prefix}color-${key}-foreground-active`] = pair.foregroundActive ??
-        pair.foreground;
+    tokens[`${prefix}color-${key}-foreground-hover`] =
+        pair.foregroundHover ?? pair.foreground;
+    tokens[`${prefix}color-${key}-foreground-active`] =
+        pair.foregroundActive ?? pair.foreground;
 }
 /** Generate color tokens for a single color */
 function generateSingleColorTokens(tokens, key, color, prefix) {
@@ -85,9 +85,7 @@ function generateSingleColorTokens(tokens, key, color, prefix) {
  * @param options - Generation options, or a shorthand `"light"`/`"dark"` mode string
  */
 export function generateCssTokens(schema, prefix, options = {}) {
-    const opts = typeof options === "string"
-        ? { mode: options }
-        : options;
+    const opts = typeof options === "string" ? { mode: options } : options;
     const mode = opts.mode ?? "light";
     const deriveStates = opts.deriveStates ?? true;
     const surfaceContrast = opts.surfaceForegroundContrast ?? 50;
@@ -173,18 +171,34 @@ export function toCssString(tokens, selector = ":root") {
  * @param options - Generation + output options
  */
 export function generateThemeCss(schema, prefix, options = {}) {
-    const { cssLayer, ...genOptions } = options;
-    let css = toCssString(generateCssTokens(schema.light, prefix, { ...genOptions, mode: "light" }));
+    const { cssLayer, prettierIgnore, ...genOptions } = options;
+    const PRETTIER_IGNORE_PREFIX = "/* prettier-ignore */\n";
+    let css = toCssString(generateCssTokens(schema.light, prefix, {
+        ...genOptions,
+        mode: "light",
+    }));
+    if (!cssLayer && prettierIgnore) {
+        css = PRETTIER_IGNORE_PREFIX + css;
+    }
     if (schema.dark) {
-        css += "\n" +
-            toCssString(generateCssTokens(schema.dark, prefix, {
-                ...genOptions,
-                mode: "dark",
-            }), ":root.dark");
+        let darkCss = toCssString(generateCssTokens(schema.dark, prefix, {
+            ...genOptions,
+            mode: "dark",
+        }), ":root.dark");
+        if (!cssLayer && prettierIgnore) {
+            darkCss = PRETTIER_IGNORE_PREFIX + darkCss;
+        }
+        css += "\n" + darkCss;
     }
     if (cssLayer) {
-        const indented = css.split("\n").map((l) => (l ? "\t" + l : l)).join("\n");
+        const indented = css
+            .split("\n")
+            .map((l) => (l ? "\t" + l : l))
+            .join("\n");
         css = `@layer ${cssLayer} {\n${indented}}\n`;
+        if (prettierIgnore) {
+            css = PRETTIER_IGNORE_PREFIX + css;
+        }
     }
     return css;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/design-tokens",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"type": "module",
 	"main": "dist/mod.js",
 	"types": "dist/mod.d.ts",