danielroe · joshfester · Nov 10, 2025 · Nov 10, 2025
diff --git a/packages/beasties-webpack-plugin/test/fixtures/fs-access/dist/style.css b/packages/beasties-webpack-plugin/test/fixtures/fs-access/dist/style.css
@@ -1 +1 @@
-div.foo{color:red}
+div.foo{color:red}
diff --git a/packages/beasties/README.md b/packages/beasties/README.md
@@ -139,6 +139,7 @@ All optional. Pass them to `new Beasties({ ... })`.
   - `"all"` inline all keyframes rules
   - `"none"` remove all keyframes rules
 - `compress` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Compress resulting critical CSS _(default: `true`)_
+- `safeParser` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Use PostCSS safe parser for fault-tolerant CSS parsing. Handles legacy code with syntax errors _(default: `false`)_
 - `logLevel` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Controls [log level](#loglevel) of the plugin _(default: `"info"`)_
 - `logger` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Provide a custom logger interface [logger](#logger)
 

diff --git a/packages/beasties/package.json b/packages/beasties/package.json
@@ -58,7 +58,8 @@
     "htmlparser2": "^10.0.0",
     "picocolors": "^1.1.1",
     "postcss": "^8.4.49",
-    "postcss-media-query-parser": "^0.2.3"
+    "postcss-media-query-parser": "^0.2.3",
+    "postcss-safe-parser": "^7.0.1"
   },
   "devDependencies": {
     "@types/postcss-media-query-parser": "0.2.4",

diff --git a/packages/beasties/src/css.ts b/packages/beasties/src/css.ts
@@ -19,14 +19,18 @@
 import type Root_ from 'postcss/lib/root'
 import { parse, stringify } from 'postcss'
 import mediaParser from 'postcss-media-query-parser'
+import safeParser from 'postcss-safe-parser'
 
 /**
  * Parse a textual CSS Stylesheet into a Stylesheet instance.
  * Stylesheet is a mutable postcss AST with format similar to CSSOM.
  * @see https://github.com/postcss/postcss/
  * @private
  */
-export function parseStylesheet(stylesheet: string) {
+export function parseStylesheet(stylesheet: string, options?: { safeParser?: boolean }) {
+  if (options?.safeParser) {
+    return safeParser(stylesheet)
+  }
   return parse(stylesheet)
 }
 

diff --git a/packages/beasties/src/index.d.ts b/packages/beasties/src/index.d.ts
@@ -63,6 +63,7 @@ export interface Options {
   fonts?: boolean
   keyframes?: string
   compress?: boolean
+  safeParser?: boolean
   logLevel?: 'info' | 'warn' | 'error' | 'trace' | 'debug' | 'silent'
   reduceInlineStyles?: boolean
   logger?: Logger

diff --git a/packages/beasties/src/index.ts b/packages/beasties/src/index.ts
@@ -426,8 +426,8 @@ export default class Beasties {
     if (!sheet)
       return
 
-    const ast = parseStylesheet(sheet)
-    const astInverse = options.pruneSource ? parseStylesheet(sheet) : null
+    const ast = parseStylesheet(sheet, { safeParser: this.options.safeParser })
+    const astInverse = options.pruneSource ? parseStylesheet(sheet, { safeParser: this.options.safeParser }) : null
 
     // a string to search for font names (very loose)
     let criticalFonts = ''

diff --git a/packages/beasties/src/types.ts b/packages/beasties/src/types.ts
@@ -96,6 +96,10 @@ export interface Options {
    * Compress resulting critical CSS _(default: `true`)_
    */
   compress?: boolean
+  /**
+   * Use PostCSS safe parser for fault-tolerant CSS parsing _(default: `false`)_
+   */
+  safeParser?: boolean
   /**
    * Controls {@link LogLevel log level} of the plugin _(default: `"info"`)_
    */

diff --git a/packages/beasties/test/parse.test.ts b/packages/beasties/test/parse.test.ts
@@ -74,3 +74,28 @@ describe('selector normalisation', () => {
     expect(warnSpy).not.toHaveBeenCalled()
   })
 })
+
+describe('safe parser', () => {
+  it('should handle malformed CSS with safeParser enabled', async () => {
+    const beasties = new Beasties({ safeParser: true })
+    const html = `
+      <html>
+        <head>
+          <style>
+            .test { color: red
+          </style>
+        </head>
+        <body>
+          <div class="test">Test</div>
+        </body>
+      </html>
+    `
+
+    // Should not throw an error with malformed CSS
+    const result = await beasties.process(html)
+
+    // Verify the HTML was processed without throwing
+    expect(result).toContain('Test')
+    expect(result).toContain('data-beasties-container')
+  })
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml