fix: correctly handle CSS layers (#123)

alan-agius4 · web-flow · commit fbb8326ef800 · 2025-04-07T05:26:25.000-07:00
diff --git a/packages/beasties/src/index.ts b/packages/beasties/src/index.ts
@@ -549,7 +549,7 @@ export default class Beasties {
         }
 
         // keep font rules, they're handled in the second pass:
-        if (rule.type === 'atrule' && rule.name === 'font-face')
+        if (rule.type === 'atrule' && (rule.name === 'font-face' || rule.name === 'layer'))
           return
 
         // If there are no remaining rules, remove the whole rule:
diff --git a/packages/beasties/test/__snapshots__/beasties.test.ts.snap b/packages/beasties/test/__snapshots__/beasties.test.ts.snap
@@ -124,6 +124,17 @@ exports[`beasties > skip invalid path 1`] = `
 "
 `;
 
+exports[`beasties > works with at-rules (@layer) 1`] = `
+"<html data-beasties-container>
+  <head>
+    <style>@layer foo, bar;@layer foo {h1{color:red}}@layer bar {}</style><link rel="preload" href="/style.css" as="style">
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+  <link rel="stylesheet" href="/style.css"></body>
+</html>"
+`;
+
 exports[`beasties > works with pseudo classes and elements 1`] = `
 "<html data-beasties-container>
   <head>
diff --git a/packages/beasties/test/beasties.test.ts b/packages/beasties/test/beasties.test.ts
@@ -298,4 +298,51 @@ describe('beasties', () => {
     expect(result).toContain('<link rel="stylesheet" href="/style.css">')
     expect(result).toMatchSnapshot()
   })
+
+  it('works with at-rules (@layer)', async () => {
+    const logger: Logger = {
+      warn: () => {},
+      info: () => {},
+      error: () => {},
+      debug: () => {},
+    }
+
+    const beasties = new Beasties({
+      reduceInlineStyles: false,
+      path: '/',
+      logLevel: 'warn',
+      logger,
+    })
+    const assets: Record<string, string> = {
+      '/style.css': trim`
+        @layer foo, bar;
+
+        @layer foo {
+          h1 { color: red }
+          h4 { background: blue; }
+        }
+
+        @layer bar {
+          h4 { background: lime; }
+        }
+      `,
+    }
+
+    const loggerWarnSpy = vi.spyOn(logger, 'warn')
+    beasties.readFile = filename => assets[filename.replace(/^\w:/, '').replace(/\\/g, '/')]!
+    const result = await beasties.process(trim`
+      <html>
+        <head>
+          <link rel="stylesheet" href="/style.css">
+        </head>
+        <body>
+          <h1>Hello World!</h1>
+        </body>
+      </html>
+    `)
+    expect(loggerWarnSpy).not.toHaveBeenCalled()
+    expect(result).toContain('<style>@layer foo, bar;@layer foo {h1{color:red}}@layer bar {}</style>')
+    expect(result).toContain('<link rel="stylesheet" href="/style.css">')
+    expect(result).toMatchSnapshot()
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -549,7 +549,7 @@ export default class Beasties {`
`549`	`549`	`}`
`550`	`550`
`551`	`551`	`// keep font rules, they're handled in the second pass:`
`552`		`- if (rule.type === 'atrule' && rule.name === 'font-face')`
	`552`	`+ if (rule.type === 'atrule' && (rule.name === 'font-face' \|\| rule.name === 'layer'))`
`553`	`553`	`return`
`554`	`554`
`555`	`555`	`// If there are no remaining rules, remove the whole rule:`