[Bug]: `Cannot read properties of undefined (reading 'trim')` in `loadSVGFromString` with `@media` in CSS

[silverwind]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.0.0-beta19

In What environments are you experiencing the problem?

Node.js

Node Version (if applicable)

21.6.1

Link To Reproduction

See simple node script below

Steps To Reproduce

import {loadSVGFromString} from 'fabric/node';

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; } }
    </style>
    <circle r="10" cx="10" cy="10"/>
  </svg>
`);

Expected Behavior

No error.

Actual Behavior

Script errors. Observations:

• Removing the @media line makes it work.
• Fails in both 6.0.0-beta19 and 5.3.0.

Error Message & Stack Trace

TypeError: Cannot read properties of undefined (reading 'trim')
    at node_modules/fabric/dist/index.node.mjs:24637:27
    at Array.forEach (<anonymous>)
    at getCSSRules (node_modules/fabric/dist/index.node.mjs:24627:6)
    at new ElementsParser (node_modules/fabric/dist/index.node.mjs:24663:21)
    at parseSVGDocument (node_modules/fabric/dist/index.node.mjs:24822:25)
    at loadSVGFromString (node_modules/fabric/dist/index.node.mjs:24850:10)
    at fab.js:3:7
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async loadESM (node:internal/process/esm_loader:28:7)

[ShaMan123]

I can confirm and reproduce
For now I suggest you remove that directive yourself

[silverwind]

Yeah, removal should be possible in this case. We convert SVG to PNG via fabric and a prefers-color-mode media query does not make sense to during this convertion because it can not be preserved into the output raster image. Other media queries might, thought.

[ShaMan123]

agreed

[asturur]

Do SVGs as graphic format support media queries? Or is a browser specific support?

[asturur]

we recently added a fix for fontface declaration that has a very similar sintax, maybe you can leverage that

[asturur]

759d6b7

[silverwind]

Do SVGs as graphic format support media queries? Or is a browser specific support?

Good question. In this i read:

Elements in an SVG document can be styled using CSS. Most visual characteristics and some aspects of element geometry are controlled using CSS properties

The style element explicitely lists the media attribute, so I think it's safe to say it's supported in the style element as @media.

[asturur]

I mean but if you open it in inkscape, what are you going to see? the dark or light version?