better fallback if no layer is defined

digdir · Aug 6, 2024 · 7edf268 · 7edf268
1 parent 2ce629d
commit 7edf268
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/packages/cli/src/tokens/formats/css.ts b/packages/cli/src/tokens/formats/css.ts
@@ -34,8 +34,11 @@ export const colormode: Format = {
 
     const content = `{\n${allTokens.map(format).join('\n')}\n${colorSchemeProperty}}\n`;
     const autoSelectorContent = ['light', 'dark'].includes(mode_) ? prefersColorScheme(mode_, content) : '';
+    const body = R.isNotNil(layer)
+      ? `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n`
+      : `${selector} ${content} ${autoSelectorContent}\n`;
 
-    return header + `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n`;
+    return header + body;
   },
 };
 
@@ -74,8 +77,9 @@ export const semantic: Format = {
 
     const formattedVariables = formatTokens(allTokens);
     const content = `{\n${formattedVariables.join('\n')}\n}\n`;
+    const body = R.isNotNil(layer) ? `@layer ${layer} {\n${selector} ${content}\n}\n` : `${selector} ${content}\n`;
 
-    return header + `@layer ${layer} {\n${selector} ${content}\n}\n`;
+    return header + body;
   },
 };
 
@@ -193,7 +197,8 @@ export const typography: Format = {
     const classes = formattedTokens.classes.join('\n');
     const variables = formattedTokens.variables.join('\n');
     const content = selector ? `${selector} {\n${variables}\n${classes}\n}` : classes;
+    const body = R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}` : content;
 
-    return header + `@layer ${layer} {\n${content}\n}\n`;
+    return header + body;
   },
 };