fix(beasties): set $$name on style elements for additionalStylesheets

danielroe · danielroe · commit 5fd0af319d42 · 2026-01-20T15:35:13.000Z
resolves #177
diff --git a/packages/beasties/src/index.ts b/packages/beasties/src/index.ts
@@ -276,6 +276,7 @@ export default class Beasties {
         styleSheetsIncluded.push(cssFile)
         const style = document.createElement('style')
         style.$$external = true
+        style.$$name = cssFile
         return this.getCssAsset(cssFile, style).then(sheet => [sheet, style] as const)
       }),
     )
diff --git a/packages/beasties/test/beasties.test.ts b/packages/beasties/test/beasties.test.ts
@@ -741,4 +741,48 @@ describe('beasties', () => {
       globalThis.fetch = originalFetch
     }
   })
+
+  it('works with pruneSource and additionalStylesheets together', async () => {
+    // Regression test for https://github.com/danielroe/beasties/issues/177
+    // Ensure $$name is set on style elements for additionalStylesheets
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'beasties-test-'))
+    fs.writeFileSync(path.join(tmpDir, 'reset.css'), 'h1 { margin: 0; } h2.unused { padding: 0; }')
+
+    const beasties = new Beasties({
+      reduceInlineStyles: false,
+      path: tmpDir,
+      pruneSource: true,
+      additionalStylesheets: ['/reset.css'],
+    })
+
+    beasties.writeFile = (filename, data) => new Promise((resolve, reject) => {
+      try {
+        fs.writeFileSync(filename, data)
+        resolve()
+      }
+      catch (err) {
+        reject(err)
+      }
+    })
+
+    const result = await beasties.process(trim`
+      <html>
+        <head>
+        </head>
+        <body>
+          <h1>Hello World!</h1>
+        </body>
+      </html>
+    `)
+
+    // Should contain the critical CSS from reset.css
+    expect(result).toContain('<style>h1{margin:0}</style>')
+
+    // The pruned CSS file should only contain non-critical styles
+    const css = fs.readFileSync(path.join(tmpDir, 'reset.css'), 'utf-8')
+    expect(css).toEqual('h2.unused{padding:0}')
+
+    // Clean up temporary directory
+    fs.rmSync(tmpDir, { recursive: true })
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -276,6 +276,7 @@ export default class Beasties {`
`276`	`276`	`styleSheetsIncluded.push(cssFile)`
`277`	`277`	`const style = document.createElement('style')`
`278`	`278`	`style.$$external = true`
	`279`	`+ style.$$name = cssFile`
`279`	`280`	`return this.getCssAsset(cssFile, style).then(sheet => [sheet, style] as const)`
`280`	`281`	`}),`
`281`	`282`	`)`