WIP

Author: avicarie

.github/workflows/ci-cd.yml

@@ -9,7 +9,6 @@ name: "CI/CD: Continuous integration and continuous deployment"
     tags:
       - "v*"
   pull_request:
-  merge_group:
 
 jobs:
   build-check-test-push:

.gitignore

@@ -8,7 +8,15 @@ yarn-error.log
 /templates
 graphql.config.json
 output/*
+<<<<<<< Updated upstream
 .env
+<<<<<<< Updated upstream
 .env.local
+=======
+=======
+.env*
+!.env.template
+>>>>>>> Stashed changes
+>>>>>>> Stashed changes
 secrets
 /test/results/*

src/components/inlineSVG.js

@@ -1,14 +1,38 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 const InlineSVG = ({ src, ...otherProps }) => {
-  return (
-    <div
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{ __html: src }}
-      {...otherProps}
-    />
-  );
+  const svgId = Math.random()
+    .toString(36)
+    .slice(2, 12);
+  const processedSVG = useMemo(() => {
+    const prefix = `svg-${svgId}`;
+
+    return src.replace(
+      /<style>([\s\S]*?)<\/style>|class="([^"]+)"|id="([^"]+)"/g,
+      (match, styles, classAttr, idAttr) => {
+        if (styles) {
+          return `<style>${styles
+            // Class selectors: only match when followed by { or , (selector context)
+            .replace(/(^|[^\w-])\.([a-zA-Z_][\w-]*)(?=\s*[{,])/gm, `$1.${prefix}-$2`)
+            // ID selectors: only match when followed by { or , (selector context)
+            .replace(/(^|[^\w-])#([a-zA-Z_][\w-]*)(?=\s*[{,])/gm, `$1#${prefix}-$2`)}</style>`;
+        }
+        if (classAttr) {
+          return `class="${classAttr
+            .split(/\s+/)
+            .map(c => `${prefix}-${c}`)
+            .join(' ')}"`;
+        }
+        if (idAttr) {
+          return `id="${prefix}-${idAttr}"`;
+        }
+        return match;
+      },
+    );
+  }, [svgId, src]);
+
+  return <div dangerouslySetInnerHTML={{ __html: processedSVG }} {...otherProps} />;
 };
 
 InlineSVG.propTypes = {