fix(SVGParser): avoid crashing on SVG that use @import css feature (#…

…9602)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(SVGParser): avoid crashing on SVG that use @import css feature [#9602](https://github.com/fabricjs/fabric.js/pull/9602)
 - fix(): compositionEnd event handler is not registered correctly. (regression from f91362c ) [#9610](https://github.com/fabricjs/fabric.js/pull/9610)
 - ci(): Add a test case from the multiple selection use case for groups [#9599](https://github.com/fabricjs/fabric.js/pull/9599)
 - refactor(env): Change the way the environment and retina are initialized [#9480](https://github.com/fabricjs/fabric.js/pull/9480)

src/parser/getCSSRules.spec.ts

@@ -0,0 +1,13 @@
+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);
+    expect(loaded.objects).toHaveLength(2);
+  });
+});

src/parser/getCSSRules.ts

@@ -26,13 +26,10 @@ export function getCSSRules(doc: Document) {
     // rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g);
     styleContents
       .split('}')
-      // remove empty rules.
-      .filter(function (rule) {
-        return rule.trim();
-      })
+      // remove empty rules and remove everything if we didn't split in at least 2 pieces
+      .filter((rule, index, array) => array.length > 1 && rule.trim())
       // at this point we have hopefully an array of rules `body { style code... `
-      // eslint-disable-next-line no-loop-func
-      .forEach(function (rule) {
+      .forEach((rule) => {
         const match = rule.split('{'),
           ruleObj: Record<string, string> = {},
           declaration = match[1].trim(),