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 = ``;
-
describe('getCSSRules', () => {
test('can load svgs with style tags with import statement', async () => {
- const loaded = await loadSVGFromString(testSvg);
+ const loaded = await loadSVGFromString(``);
expect(loaded.objects).toHaveLength(2);
});
+
+ test('can load svgs with style tags with media query', async () => {
+ const loaded = await loadSVGFromString(`
+
+ `);
+ 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 = {},
declaration = match[1].trim(),