From 8a129eb5a909233608c06863b2c294efbb1aaf1f Mon Sep 17 00:00:00 2001
From: Seth Falco <seth@falco.fun>
Date: Mon, 13 Nov 2023 14:22:07 +0000
Subject: [PATCH] fix(inlineStyles): dont remove wrapper class if traversed

---
 lib/style.js                     | 52 +++++++++++++++++++++++++++-----
 package.json                     |  1 +
 plugins/inlineStyles.js          |  7 ++++-
 test/plugins/inlineStyles.26.svg | 32 ++++++++++++++++++++
 yarn.lock                        |  1 +
 5 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 test/plugins/inlineStyles.26.svg

diff --git a/lib/style.js b/lib/style.js
index 865daf299..29e4a5388 100644
--- a/lib/style.js
+++ b/lib/style.js
@@ -14,6 +14,7 @@
  */
 
 const csstree = require('css-tree');
+const csswhat = require('css-what');
 const {
   // @ts-ignore internal api
   syntax: { specificity },
@@ -278,20 +279,55 @@ const computeStyle = (stylesheet, node) => {
 exports.computeStyle = computeStyle;
 
 /**
- * Determines if the CSS selector references the given attribute.
+ * Determines if the CSS selector includes or traverses the given attribute.
+ *
+ * Classes and IDs are generated as attribute selectors, so you can check for
+ * if a `.class` or `#id` is included by passing `name=class` or `name=id`
+ * respectively.
  *
  * @param {csstree.ListItem<csstree.CssNode>|string} selector
- * @param {string} attr
+ * @param {string} name
+ * @param {?string} value
+ * @param {boolean} traversed
  * @returns {boolean}
- * @see https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors
  */
-const includesAttrSelector = (selector, attr) => {
-  const attrSelectorPattern = new RegExp(`\\[\\s*${attr}\\s*[\\]=~|^$*]`, 'i');
+const includesAttrSelector = (
+  selector,
+  name,
+  value = null,
+  traversed = false
+) => {
+  const selectors =
+    typeof selector === 'string'
+      ? csswhat.parse(selector)
+      : csswhat.parse(csstree.generate(selector.data));
+
+  for (const subselector of selectors) {
+    const hasAttrSelector = subselector.some((segment, index) => {
+      if (traversed) {
+        if (index === subselector.length - 1) {
+          return false;
+        }
 
-  if (typeof selector === 'string') {
-    return attrSelectorPattern.test(attr);
+        const isNextTraversal = csswhat.isTraversal(subselector[index + 1]);
+
+        if (!isNextTraversal) {
+          return false;
+        }
+      }
+
+      if (segment.type !== 'attribute' || segment.name !== name) {
+        return false;
+      }
+
+      return value == null ? true : segment.value === value;
+    });
+
+    if (hasAttrSelector) {
+      return true;
+    }
   }
 
-  return attrSelectorPattern.test(csstree.generate(selector.data));
+  return false;
 };
 exports.includesAttrSelector = includesAttrSelector;
diff --git a/package.json b/package.json
index 27c72e969..6415c95ac 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
     "commander": "^7.2.0",
     "css-select": "^5.1.0",
     "css-tree": "^2.2.1",
+    "css-what": "^6.1.0",
     "csso": "5.0.5",
     "picocolors": "^1.0.0"
   },
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index cd06d0ca3..7a4a13609 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -299,7 +299,12 @@ exports.fn = (root, params) => {
             );
 
             for (const child of selector.node.children) {
-              if (child.type === 'ClassSelector') {
+              if (
+                child.type === 'ClassSelector' &&
+                !selectors.some((selector) =>
+                  includesAttrSelector(selector.item, 'class', child.name, true)
+                )
+              ) {
                 classList.delete(child.name);
               }
             }
diff --git a/test/plugins/inlineStyles.26.svg b/test/plugins/inlineStyles.26.svg
new file mode 100644
index 000000000..fc093d0ec
--- /dev/null
+++ b/test/plugins/inlineStyles.26.svg
@@ -0,0 +1,32 @@
+Don't remove the class from a wrapper element if it's traversed in another
+selector.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 35">
+  <style>
+    .a {}
+
+    .a .b {
+      fill: none;
+      stroke: #000;
+    }
+  </style>
+  <g class="a">
+    <circle class="b" cx="42.97" cy="24.92" r="1.14"/>
+    <path class="b" d="M26,31s11.91-1.31,15.86-5.64"/>
+  </g>
+</svg>
+
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 35">
+    <style>
+        .a .b{fill:none;stroke:#000}
+    </style>
+    <g class="a">
+        <circle class="b" cx="42.97" cy="24.92" r="1.14"/>
+        <path class="b" d="M26,31s11.91-1.31,15.86-5.64"/>
+    </g>
+</svg>
diff --git a/yarn.lock b/yarn.lock
index bf9ad077b..9b6bf521c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4568,6 +4568,7 @@ __metadata:
     commander: ^7.2.0
     css-select: ^5.1.0
     css-tree: ^2.2.1
+    css-what: ^6.1.0
     csso: 5.0.5
     del: ^6.0.0
     eslint: ^8.24.0