@marianmeres/design-tokens 1.5.1 → 1.6.0

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;
@@ -174,20 +172,33 @@ export function toCssString(tokens, selector = ":root") {
  */
 export function generateThemeCss(schema, prefix, options = {}) {
     const { cssLayer, prettierIgnore, ...genOptions } = options;
-    let css = toCssString(generateCssTokens(schema.light, prefix, { ...genOptions, mode: "light" }));
+    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 */\n" + css;
+        if (prettierIgnore) {
+            css = PRETTIER_IGNORE_PREFIX + css;
+        }
     }
     return css;
 }

package/package.json

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