From 36de66a75145057b7ae0ac7cfbfc0af70cbbced1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 18:36:55 +0100
Subject: [PATCH] fix(SVGParser): Don't crash on nested CSS at-rules

Fixes: https://github.com/fabricjs/fabric.js/issues/9679
---
 src/parser/getCSSRules.spec.ts | 29 +++++++++++++++++++++++------
 src/parser/getCSSRules.ts      |  6 ++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/parser/getCSSRules.spec.ts b/src/parser/getCSSRules.spec.ts
index 057bbada010..ee4f46648dd 100644
--- a/src/parser/getCSSRules.spec.ts
+++ b/src/parser/getCSSRules.spec.ts
@@ -1,13 +1,30 @@
 import { loadSVGFromString } from './loadSVGFromString';
 
-const testSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 4439.1 3733" xml:space="preserve"><style>
-  @import url("https://fonts.googleapis.com/css2?family=Black+Ops+One%7Cfamily=Catamaran:wght@400,700%7Cfamily=Caveat+Brush%7Cfamily=Comfortaa:wght@400,500%7Cfamily=Henny+Penny%7Cfamily=Montserrat:wght@400,500,700%7Cfamily=Mulish:wght@400,500%7Cfamily=Oswald:wght@400,500%7Cfamily=PT+Sans%7Cfamily=Poppins:wght@300,500%7Cfamily=Prompt%7Cfamily=Roboto+Slab:wght@400,500%7Cfamily=Roboto:wght@300,400,700%7Cfamily=Rubik:wght@400,500%7Cfamily=Varela%7Cfamily=Viga%7Cfamily=Work+Sans:wght@300,400%7Cfamily=Yesteryear%7Cdisplay");
-  
-  </style><defs/><rect x="0" y="0" width="100%" height="100%" fill="transparent"/><g transform="matrix(1 0 0 1 1643 1651.95)" id="COLORZONE-5" fill="#FFC900" style="fill: rgb(255, 201, 0);"><rect style="stroke: rgb(0, 0, 0); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(255, 201, 0); fill-rule: nonzero; opacity: 1;" x="-481.9" y="-141.75" rx="0" ry="0" width="963.8" height="283.5" fill="#FFC900"/></g></svg>`;
-
 describe('getCSSRules', () => {
   test('can load svgs with style tags with import statement', async () => {
-    const loaded = await loadSVGFromString(testSvg);
+    const loaded = await loadSVGFromString(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 4439.1 3733" xml:space="preserve"><style>
+  @import url("https://fonts.googleapis.com/css2?family=Black+Ops+One%7Cfamily=Catamaran:wght@400,700%7Cfamily=Caveat+Brush%7Cfamily=Comfortaa:wght@400,500%7Cfamily=Henny+Penny%7Cfamily=Montserrat:wght@400,500,700%7Cfamily=Mulish:wght@400,500%7Cfamily=Oswald:wght@400,500%7Cfamily=PT+Sans%7Cfamily=Poppins:wght@300,500%7Cfamily=Prompt%7Cfamily=Roboto+Slab:wght@400,500%7Cfamily=Roboto:wght@300,400,700%7Cfamily=Rubik:wght@400,500%7Cfamily=Varela%7Cfamily=Viga%7Cfamily=Work+Sans:wght@300,400%7Cfamily=Yesteryear%7Cdisplay");
+
+  </style><defs/><rect x="0" y="0" width="100%" height="100%" fill="transparent"/><g transform="matrix(1 0 0 1 1643 1651.95)" id="COLORZONE-5" fill="#FFC900" style="fill: rgb(255, 201, 0);"><rect style="stroke: rgb(0, 0, 0); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(255, 201, 0); fill-rule: nonzero; opacity: 1;" x="-481.9" y="-141.75" rx="0" ry="0" width="963.8" height="283.5" fill="#FFC900"/></g></svg>`);
     expect(loaded.objects).toHaveLength(2);
   });
+
+  test('can load svgs with style tags with media query', async () => {
+    const loaded = await loadSVGFromString(`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <style>
+          circle { fill: black; }
+          @media (prefers-color-scheme: dark) { circle { fill: white; } }
+          @supports (display: flex) {
+            circle { color: blue; }
+          }
+          @scope (scope root) to (scope limit) {
+            circle { color: green; }
+          }
+        </style>
+        <circle r="10" cx="10" cy="10"/>
+      </svg>
+    `);
+    expect(loaded.objects).toHaveLength(1);
+  });
 });
diff --git a/src/parser/getCSSRules.ts b/src/parser/getCSSRules.ts
index 875ddebb438..c50c7624577 100644
--- a/src/parser/getCSSRules.ts
+++ b/src/parser/getCSSRules.ts
@@ -30,6 +30,12 @@ export function getCSSRules(doc: Document) {
       .filter((rule, index, array) => array.length > 1 && rule.trim())
       // at this point we have hopefully an array of rules `body { style code... `
       .forEach((rule) => {
+        // if there is more than one opening bracket, it is likely a nested CSS at-rule
+        // like @media, @supports, @scope, etc. Ignore these.
+        if ((rule.match(/{/g) || []).length > 1) {
+          return;
+        }
+
         const match = rule.split('{'),
           ruleObj: Record<string, string> = {},
           declaration = match[1].trim(),