@marianmeres/design-tokens 1.5.0 → 1.5.1

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

@@ -173,7 +173,7 @@ export function toCssString(tokens, selector = ":root") {
  * @param options - Generation + output options
  */
 export function generateThemeCss(schema, prefix, options = {}) {
-    const { cssLayer, ...genOptions } = options;
+    const { cssLayer, prettierIgnore, ...genOptions } = options;
     let css = toCssString(generateCssTokens(schema.light, prefix, { ...genOptions, mode: "light" }));
     if (schema.dark) {
         css += "\n" +
@@ -186,5 +186,8 @@ export function generateThemeCss(schema, prefix, options = {}) {
         const indented = css.split("\n").map((l) => (l ? "\t" + l : l)).join("\n");
         css = `@layer ${cssLayer} {\n${indented}}\n`;
     }
+    if (prettierIgnore) {
+        css = "/* prettier-ignore */\n" + css;
+    }
     return css;
 }

package/package.json

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