From 6c3eb0952e249b295ccc97709aa0b699a2c429a2 Mon Sep 17 00:00:00 2001
From: John McNair <john@neptune.consulting>
Date: Mon, 9 Jan 2023 02:26:37 -0500
Subject: [PATCH] Include all configuration in the <style /> element

This fixes a bug in the prefixIds plugin.  It assumed that the <style />
element will have a single text fragment underneath.

So this works:
<style>
<!-- Leading comment ignored -->
.class1 {}
...
.classN {}
</style>

The above parses so that node.children[0] is a "text" node with all the
CSS classes where "node" is the style element.

And this fails:
<style>
<!-- Ignored comment -->
.class1 {}
<!-- comment -->
.class2 {}
</style>

This fails because only node.children[0] is processed and node.children
looks something like:
[
.class1 (type = "text")
comment (type = "comment")
.class2 (type = "text")
]
---
 plugins/prefixIds.js          | 89 +++++++++++++++--------------------
 test/plugins/prefixIds.12.svg | 20 ++++++++
 2 files changed, 58 insertions(+), 51 deletions(-)
 create mode 100644 test/plugins/prefixIds.12.svg

diff --git a/plugins/prefixIds.js b/plugins/prefixIds.js
index 1d6b0fbdc..67160cdc1 100644
--- a/plugins/prefixIds.js
+++ b/plugins/prefixIds.js
@@ -17,7 +17,7 @@ exports.description = 'prefix IDs';
  */
 const getBasename = (path) => {
   // extract everything after latest slash or backslash
-  const matched = path.match(/[/\\]?([^/\\]+)$/);
+  const matched = /[/\\]?([^/\\]+)$/.exec(path);
   if (matched) {
     return matched[1];
   }
@@ -118,7 +118,6 @@ const generatePrefix = (body, node, info, prefixGenerator, delim, history) => {
  * Prefixes identifiers
  *
  * @author strarsis <strarsis@gmail.com>
- *
  * @type {import('./plugins-types').Plugin<'prefixIds'>}
  */
 exports.fn = (_root, params, info) => {
@@ -149,60 +148,48 @@ exports.fn = (_root, params, info) => {
             return;
           }
 
-          // parse styles
-          let cssText = '';
-          if (
-            node.children[0].type === 'text' ||
-            node.children[0].type === 'cdata'
-          ) {
-            cssText = node.children[0].value;
-          }
-          /**
-           * @type {?csstree.CssNode}
-           */
-          let cssAst = null;
-          try {
-            cssAst = csstree.parse(cssText, {
-              parseValue: true,
-              parseCustomProperty: false,
-            });
-          } catch {
-            return;
-          }
+          for (const child of node.children) {
+            if (child.type !== 'text' && child.type !== 'cdata') {
+              continue;
+            }
 
-          csstree.walk(cssAst, (node) => {
-            // #ID, .class selectors
-            if (
-              (prefixIds && node.type === 'IdSelector') ||
-              (prefixClassNames && node.type === 'ClassSelector')
-            ) {
-              node.name = prefixId(prefixGenerator, node.name);
+            const cssText = child.value;
+            /** @type {?csstree.CssNode} */
+            let cssAst = null;
+            try {
+              cssAst = csstree.parse(cssText, {
+                parseValue: true,
+                parseCustomProperty: false,
+              });
+            } catch {
               return;
             }
-            // url(...) references
-            // csstree v2 changed this type
-            // @ts-ignore
-            if (node.type === 'Url' && node.value.length > 0) {
-              const prefixed = prefixReference(
-                prefixGenerator,
-                // @ts-ignore
-                unquote(node.value)
-              );
-              if (prefixed != null) {
-                // @ts-ignore
-                node.value = prefixed;
+
+            csstree.walk(cssAst, (node) => {
+              if (
+                (prefixIds && node.type === 'IdSelector') ||
+                (prefixClassNames && node.type === 'ClassSelector')
+              ) {
+                node.name = prefixId(prefixGenerator, node.name);
+                return;
               }
-            }
-          });
+              // @ts-ignore csstree v2 changed this type
+              if (node.type === 'Url' && node.value.length > 0) {
+                const prefixed = prefixReference(
+                  prefixGenerator,
+                  // @ts-ignore
+                  unquote(node.value)
+                );
+                if (prefixed != null) {
+                  // @ts-ignore
+                  node.value = prefixed;
+                }
+              }
+            });
 
-          // update styles
-          if (
-            node.children[0].type === 'text' ||
-            node.children[0].type === 'cdata'
-          ) {
-            node.children[0].value = csstree.generate(cssAst);
+            child.value = csstree.generate(cssAst);
+            return;
           }
-          return;
         }
 
         // prefix an ID attribute value
@@ -243,7 +230,7 @@ exports.fn = (_root, params, info) => {
           }
         }
 
-        // prefix an URL attribute value
+        // prefix a URL attribute value
         for (const name of referencesProps) {
           if (
             node.attributes[name] != null &&
diff --git a/test/plugins/prefixIds.12.svg b/test/plugins/prefixIds.12.svg
new file mode 100644
index 000000000..fb38f1f6d
--- /dev/null
+++ b/test/plugins/prefixIds.12.svg
@@ -0,0 +1,20 @@
+Prefix IDs should apply to all nodes in styles, namely when styles are split
+into multiple nodes due to XML comments.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
+  <style>
+    <!-- uwu -->
+    #a {}
+  </style>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
+    <style>
+<!--uwu-->
+        #prefixIds_12_svg__a{}
+    </style>
+</svg>