@servicetitan/hammer-token 3.0.0 → 3.0.1

package/src/utils/__tests__/sd-formats.test.js

@@ -85,7 +85,7 @@ describe("registerFormats", () => {
 // ---------------------------------------------------------------------------
 
 describe("buildCssUtilsOutput structure (via Fonts format)", () => {
-  it("output contains @layer declaration", () => {
+  it("output does not include cascade @layer wrappers", () => {
     const format = sd._formats["custom/CSSUtils/Fonts"];
     const dict = makeDictionary([
       makeToken({
@@ -94,15 +94,7 @@ describe("buildCssUtilsOutput structure (via Fonts format)", () => {
       }),
     ]);
     const output = format({ dictionary: dict });
-    expect(output).toContain("@layer");
-    expect(output).toContain("starter");
-  });
-
-  it("output contains @layer application block", () => {
-    const format = sd._formats["custom/CSSUtils/Fonts"];
-    const dict = makeDictionary([]);
-    const output = format({ dictionary: dict });
-    expect(output).toContain("@layer application");
+    expect(output).not.toContain("@layer");
   });
 
   it("does NOT include @supports block when no dark-aware classes", () => {
@@ -405,10 +397,10 @@ describe("custom/scss-variables — $description comments", () => {
 describe("custom/CSSUtils/Colors", () => {
   const format = () => sd._formats["custom/CSSUtils/Colors"];
 
-  it("output contains @layer declaration", () => {
+  it("output does not include cascade @layer wrappers", () => {
     const dict = makeDictionary([]);
     const output = format()({ dictionary: dict });
-    expect(output).toContain("@layer");
+    expect(output).not.toContain("@layer");
   });
 
   it("generates .bg-* class for background-color tokens", () => {
@@ -448,10 +440,10 @@ describe("custom/CSSUtils/Colors", () => {
 describe("custom/CSSUtils/Borders", () => {
   const format = () => sd._formats["custom/CSSUtils/Borders"];
 
-  it("output contains @layer declaration", () => {
+  it("output does not include cascade @layer wrappers", () => {
     const dict = makeDictionary([]);
     const output = format()({ dictionary: dict });
-    expect(output).toContain("@layer");
+    expect(output).not.toContain("@layer");
   });
 
   it("generates border-radius class", () => {
@@ -493,10 +485,10 @@ describe("custom/CSSUtils/Borders", () => {
 describe("custom/CSSUtils/Spacing", () => {
   const format = () => sd._formats["custom/CSSUtils/Spacing"];
 
-  it("output contains @layer declaration", () => {
+  it("output does not include cascade @layer wrappers", () => {
     const dict = makeDictionary([]);
     const output = format()({ dictionary: dict });
-    expect(output).toContain("@layer");
+    expect(output).not.toContain("@layer");
   });
 
   it("generates spacing classes for size tokens", () => {
@@ -535,10 +527,10 @@ describe("custom/CSSUtils/Spacing", () => {
 describe("custom/CSSUtils/All", () => {
   const format = () => sd._formats["custom/CSSUtils/All"];
 
-  it("output contains @layer declaration", () => {
+  it("output does not include cascade @layer wrappers", () => {
     const dict = makeDictionary([]);
     const output = format()({ dictionary: dict });
-    expect(output).toContain("@layer");
+    expect(output).not.toContain("@layer");
   });
 
   it("includes .sr-only utility class", () => {

package/src/utils/sd-formats.js

@@ -25,33 +25,17 @@ const {
 } = require("./token-helpers");
 
 /**
- * Builds the CSS utils output string with layer declarations and @supports blocks.
- * Creates a structured CSS output with fallback classes and dark-aware variants.
+ * Builds the CSS utils output string with optional `@supports` blocks for dark-aware utilities.
  * @param {string} fallback - The fallback CSS classes (light mode only)
  * @param {string} [darkAwareClasses=''] - The dark-aware CSS classes with light-dark()
- * @returns {string} The complete CSS output with layer and @supports structure
+ * @returns {string} Flat CSS output (no cascade layers — Anvil 3.0 dropped layered component CSS).
  */
-const buildCssUtilsOutput = (
-  fallback,
-  darkAwareClasses = "",
-  indent = "  ",
-) => {
-  const i = indent;
-  const i2 = i + "  ";
+const buildCssUtilsOutput = (fallback, darkAwareClasses = "") => {
   const supportsBlock = darkAwareClasses
     ? `\n@supports (color: light-dark(#fff, #000)) {\n  ${darkAwareClasses.replaceAll("\n", "\n  ")}\n}`
     : "";
-  const supportsBlockNested = darkAwareClasses
-    ? `\n${i}@supports (color: light-dark(#fff, #000)) {\n${i2}${darkAwareClasses.replaceAll("\n", `\n${i2}`)}\n${i}}`
-    : "";
-
-  return `@layer starter, reset, base, state, application;
-
-${fallback}${supportsBlock}
 
-@layer application {
-${i}${fallback.replaceAll("\n", `\n${i}`)}${supportsBlockNested}
-}`;
+  return `${fallback}${supportsBlock}`;
 };
 
 /**
@@ -177,7 +161,6 @@ const registerCssUtilsFormats = (
       return buildCssUtilsOutput(
         `${withSr}\n${colorFallbackTokens}\n`,
         colorTokens,
-        "    ",
       );
     },
   });