fix(beasties): trim empty @media and @supports blocks

danielroe · danielroe · commit cb36d6e6eced · 2026-01-20T15:44:44.000Z
diff --git a/packages/beasties/src/css.ts b/packages/beasties/src/css.ts
@@ -171,12 +171,24 @@ export function walkStyleRulesWithReverseMirror(node: Rule | Root_, node2: Rule
       const rule2 = rules2?.[index]
       if (hasNestedRules(rule)) {
         walkStyleRulesWithReverseMirror(rule, rule2 as Rule, iterator)
+        if ('nodes' in rule && rule.nodes?.length === 0 && isRemovableIfEmpty(rule)) {
+          return false
+        }
       }
       rule._other = rule2 as Rule
       rule.filterSelectors = filterSelectors
       return iterator(rule) !== false
     },
   )
+
+  if (node2.nodes) {
+    node2.nodes = node2.nodes.filter((rule) => {
+      if ('nodes' in rule && rule.nodes?.length === 0 && isRemovableIfEmpty(rule)) {
+        return false
+      }
+      return true
+    })
+  }
 }
 
 // Checks if a node has nested rules, like @media
@@ -190,10 +202,20 @@ function hasNestedRules(rule: ChildNode): rule is Rule {
   )
 }
 
+// Checks if an empty container rule should be removed
+// `@media` and `@supports` blocks are safe to remove when empty
+// `@layer` blocks should be preserved (even empty) as they establish cascade order
+function isRemovableIfEmpty(rule: ChildNode): boolean {
+  if (!('name' in rule) || rule.type !== 'atrule') {
+    return false
+  }
+  return rule.name === 'media' || rule.name === 'supports'
+}
+
 // Like [].filter(), but applies the opposite filtering result to a second copy of the Array without a second pass.
 // This is just a quicker version of generating the compliment of the set returned from a filter operation.
 type SplitIterator<T> = (item: T, index: number, a: T[], b?: T[]) => boolean
-function splitFilter<T>(a: T[], b: T[], predicate: SplitIterator<T>) {
+function splitFilter<T>(a: T[], b: T[] | undefined, predicate: SplitIterator<T>) {
   const aOut: T[] = []
   const bOut: T[] = []
   for (let index = 0; index < a.length; index++) {
@@ -202,7 +224,8 @@ function splitFilter<T>(a: T[], b: T[], predicate: SplitIterator<T>) {
       aOut.push(item)
     }
     else {
-      bOut.push(item)
+      // Push from b if available (for mirrored trees), otherwise from a
+      bOut.push(b?.[index] ?? item)
     }
   }
   return [aOut, bOut] as const
diff --git a/packages/beasties/test/beasties.test.ts b/packages/beasties/test/beasties.test.ts
@@ -785,4 +785,227 @@ describe('beasties', () => {
     // Clean up temporary directory
     fs.rmSync(tmpDir, { recursive: true })
   })
+
+  it('removes empty @media blocks when pruneSource is enabled', async () => {
+    // Regression test for https://github.com/danielroe/beasties/issues/172
+    // Empty @media blocks should be removed after pruning, not left behind
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'beasties-test-'))
+    fs.writeFileSync(path.join(tmpDir, 'style.css'), trim`
+      h1 { color: blue; }
+      @media (min-width: 768px) {
+        h1 { padding: 48px; }
+      }
+      h2.unused { color: red; }
+    `)
+
+    const beasties = new Beasties({
+      reduceInlineStyles: false,
+      path: tmpDir,
+      pruneSource: true,
+    })
+
+    let writtenCss = ''
+    beasties.writeFile = (filename, data) => new Promise((resolve, reject) => {
+      try {
+        writtenCss = data
+        fs.writeFileSync(filename, data)
+        resolve()
+      }
+      catch (err) {
+        reject(err)
+      }
+    })
+
+    const result = await beasties.process(trim`
+      <html>
+        <head>
+          <link rel="stylesheet" href="/style.css">
+        </head>
+        <body>
+          <h1>Hello World!</h1>
+        </body>
+      </html>
+    `)
+
+    // Critical CSS should include both the base h1 rule and the @media rule
+    expect(result).toContain('h1{color:blue}')
+    expect(result).toContain('@media (min-width: 768px)')
+    expect(result).toContain('h1{padding:48px}')
+
+    // The pruned CSS file should NOT contain empty @media blocks
+    expect(writtenCss).not.toContain('@media (min-width: 768px){}')
+    expect(writtenCss).not.toContain('@media (min-width: 768px) {}')
+    // It should only contain the unused h2 rule
+    expect(writtenCss).toEqual('h2.unused{color:red}')
+
+    // Clean up temporary directory
+    fs.rmSync(tmpDir, { recursive: true })
+  })
+
+  it('removes empty @media blocks from critical CSS when rules go to pruned source', async () => {
+    // Regression test for https://github.com/danielroe/beasties/issues/172
+    // Test the inverse case: empty @media in critical CSS
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'beasties-test-'))
+    fs.writeFileSync(path.join(tmpDir, 'style.css'), trim`
+      h1 { color: blue; }
+      @media (min-width: 768px) {
+        h2.unused { padding: 48px; }
+      }
+    `)
+
+    const beasties = new Beasties({
+      reduceInlineStyles: false,
+      path: tmpDir,
+      pruneSource: true,
+    })
+
+    let writtenCss = ''
+    beasties.writeFile = (filename, data) => new Promise((resolve, reject) => {
+      try {
+        writtenCss = data
+        fs.writeFileSync(filename, data)
+        resolve()
+      }
+      catch (err) {
+        reject(err)
+      }
+    })
+
+    const result = await beasties.process(trim`
+      <html>
+        <head>
+          <link rel="stylesheet" href="/style.css">
+        </head>
+        <body>
+          <h1>Hello World!</h1>
+        </body>
+      </html>
+    `)
+
+    // Critical CSS should NOT contain empty @media blocks
+    expect(result).not.toContain('@media (min-width: 768px){}')
+    expect(result).not.toContain('@media (min-width: 768px) {}')
+    expect(result).toContain('h1{color:blue}')
+
+    // The pruned CSS should contain the @media block with the unused rule
+    expect(writtenCss).toContain('@media (min-width: 768px)')
+    expect(writtenCss).toContain('h2.unused{padding:48px}')
+
+    // Clean up temporary directory
+    fs.rmSync(tmpDir, { recursive: true })
+  })
+
+  it('removes empty @supports blocks when pruneSource is enabled', async () => {
+    // Similar to @media, @supports blocks should be removed when empty
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'beasties-test-'))
+    fs.writeFileSync(path.join(tmpDir, 'style.css'), trim`
+      h1 { color: blue; }
+      @supports (display: grid) {
+        h1 { display: grid; }
+      }
+      h2.unused { color: red; }
+    `)
+
+    const beasties = new Beasties({
+      reduceInlineStyles: false,
+      path: tmpDir,
+      pruneSource: true,
+    })
+
+    let writtenCss = ''
+    beasties.writeFile = (filename, data) => new Promise((resolve, reject) => {
+      try {
+        writtenCss = data
+        fs.writeFileSync(filename, data)
+        resolve()
+      }
+      catch (err) {
+        reject(err)
+      }
+    })
+
+    const result = await beasties.process(trim`
+      <html>
+        <head>
+          <link rel="stylesheet" href="/style.css">
+        </head>
+        <body>
+          <h1>Hello World!</h1>
+        </body>
+      </html>
+    `)
+
+    // Critical CSS should include the @supports block with h1 rule
+    expect(result).toContain('h1{color:blue}')
+    expect(result).toContain('@supports (display: grid)')
+    expect(result).toContain('h1{display:grid}')
+
+    // The pruned CSS file should NOT contain empty @supports blocks
+    expect(writtenCss).not.toContain('@supports')
+    // It should only contain the unused h2 rule
+    expect(writtenCss).toEqual('h2.unused{color:red}')
+
+    // Clean up temporary directory
+    fs.rmSync(tmpDir, { recursive: true })
+  })
+
+  it('preserves @keyframes when pruneSource is enabled', async () => {
+    // @keyframes should be handled as a whole, not recursively walked
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'beasties-test-'))
+    fs.writeFileSync(path.join(tmpDir, 'style.css'), trim`
+      h1 {
+        color: blue;
+        animation: fadeIn 1s;
+      }
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes unused {
+        0% { transform: scale(0); }
+        100% { transform: scale(1); }
+      }
+    `)
+
+    const beasties = new Beasties({
+      reduceInlineStyles: false,
+      path: tmpDir,
+      pruneSource: true,
+      keyframes: 'critical',
+    })
+
+    let writtenCss = ''
+    beasties.writeFile = (filename, data) => new Promise((resolve, reject) => {
+      try {
+        writtenCss = data
+        fs.writeFileSync(filename, data)
+        resolve()
+      }
+      catch (err) {
+        reject(err)
+      }
+    })
+
+    const result = await beasties.process(trim`
+      <html>
+        <head>
+          <link rel="stylesheet" href="/style.css">
+        </head>
+        <body>
+          <h1>Hello World!</h1>
+        </body>
+      </html>
+    `)
+
+    // Critical CSS should include the used @keyframes
+    expect(result).toContain('@keyframes fadeIn')
+    expect(result).toContain('from{opacity:0}')
+    expect(result).toContain('to{opacity:1}')
+
+    // Unused @keyframes should be in the pruned source
+    expect(writtenCss).toContain('@keyframes unused')
+
+    // Clean up temporary directory
+    fs.rmSync(tmpDir, { recursive: true })
+  })
 })
