From 4e3007c88cb78cdd87b3a3a38483b91a0646ae51 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 | 86 ++++++++++++++++++++++----------------------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/plugins/prefixIds.js b/plugins/prefixIds.js
index 667629366..0e7a1cbd9 100644
--- a/plugins/prefixIds.js
+++ b/plugins/prefixIds.js
@@ -101,55 +101,57 @@ exports.fn = (_root, params, info) => {
           }
 
           // parse styles
-          let cssText = '';
-          if (
-            node.children[0].type === 'text' ||
-            node.children[0].type === 'cdata'
-          ) {
-            cssText = node.children[0].value;
-          }
-          /**
-           * @type {null | csstree.CssNode}
-           */
-          let cssAst = null;
-          try {
-            cssAst = csstree.parse(cssText, {
-              parseValue: true,
-              parseCustomProperty: false,
-            });
-          } catch {
-            return;
-          }
-
-          csstree.walk(cssAst, (node) => {
-            // #ID, .class selectors
+          node.children.forEach(child => {
+            let cssText = '';
             if (
-              (prefixIds && node.type === 'IdSelector') ||
-              (prefixClassNames && node.type === 'ClassSelector')
+              child.type === 'text' ||
+              child.type === 'cdata'
             ) {
-              node.name = prefixId(prefix, node.name);
+              cssText = child.value;
+            }
+            /**
+             * @type {null | csstree.CssNode}
+             */
+            let cssAst = null;
+            try {
+              cssAst = csstree.parse(cssText, {
+                parseValue: true,
+                parseCustomProperty: false,
+              });
+            } catch {
               return;
             }
-            // url(...) references
-            // csstree v2 changed this type
-            if (node.type === 'Url' && toAny(node.value).length > 0) {
-              const prefixed = prefixReference(
-                prefix,
-                unquote(toAny(node.value))
-              );
-              if (prefixed != null) {
-                toAny(node).value = prefixed;
+
+            csstree.walk(cssAst, (node) => {
+              // #ID, .class selectors
+              if (
+                (prefixIds && node.type === 'IdSelector') ||
+                (prefixClassNames && node.type === 'ClassSelector')
+              ) {
+                node.name = prefixId(prefix, node.name);
+                return;
               }
+              // url(...) references
+              // csstree v2 changed this type
+              if (node.type === 'Url' && toAny(node.value).length > 0) {
+                const prefixed = prefixReference(
+                  prefix,
+                  unquote(toAny(node.value))
+                );
+                if (prefixed != null) {
+                  toAny(node).value = prefixed;
+                }
+              }
+            });
+
+            // update styles
+            if (
+              child.type === 'text' ||
+              child.type === 'cdata'
+            ) {
+              child.value = csstree.generate(cssAst);
             }
           });
-
-          // update styles
-          if (
-            node.children[0].type === 'text' ||
-            node.children[0].type === 'cdata'
-          ) {
-            node.children[0].value = csstree.generate(cssAst);
-          }
           return;
         }