fix(removeEmptyContainers): skip if filter is applied via styles as well

plugins/removeEmptyContainers.js

@@ -1,5 +1,6 @@
 import { elemsGroups } from './_collections.js';
 import { detachNodeFromParent } from '../lib/xast.js';
+import { collectStylesheet, computeStyle } from '../lib/style.js';
 
 export const name = 'removeEmptyContainers';
 export const description = 'removes empty container elements';
@@ -19,7 +20,9 @@ export const description = 'removes empty container elements';
  *
  * @type {import('./plugins-types.js').Plugin<'removeEmptyContainers'>}
  */
-export const fn = () => {
+export const fn = (root) => {
+  const stylesheet = collectStylesheet(root);
+
   return {
     element: {
       exit: (node, parentNode) => {
@@ -38,18 +41,25 @@ export const fn = () => {
         ) {
           return;
         }
-        // The <g> may not have content, but the filter may cause a rectangle
-        // to be created and filled with pattern.
-        if (node.name === 'g' && node.attributes.filter != null) {
-          return;
-        }
+
         // empty <mask> hides masked element
         if (node.name === 'mask' && node.attributes.id != null) {
           return;
         }
         if (parentNode.type === 'element' && parentNode.name === 'switch') {
           return;
         }
+
+        // The <g> may not have content, but the filter may cause a rectangle
+        // to be created and filled with pattern.
+        if (
+          node.name === 'g' &&
+          (node.attributes.filter != null ||
+            computeStyle(stylesheet, node).filter)
+        ) {
+          return;
+        }
+
         detachNodeFromParent(node, parentNode);
       },
     },

test/plugins/removeEmptyContainers.07.svg.txt

@@ -0,0 +1,27 @@
+Empty <g> nodes should not be removed if they contain a filter, including
+filters applied via CSS.
+
+===
+
+<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+    <filter id="a" x="0" y="0" width="50" height="50" filterUnits="userSpaceOnUse">
+        <feFlood flood-color="#aaa"/>
+    </filter>
+    <mask id="b" x="0" y="0" width="50" height="50">
+        <g style="filter: url(#a)"/>
+    </mask>
+    <text x="16" y="16" style="mask: url(#b)">•ᴗ•</text>
+</svg>
+
+
+@@@
+
+<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+    <filter id="a" x="0" y="0" width="50" height="50" filterUnits="userSpaceOnUse">
+        <feFlood flood-color="#aaa"/>
+    </filter>
+    <mask id="b" x="0" y="0" width="50" height="50">
+        <g style="filter: url(#a)"/>
+    </mask>
+    <text x="16" y="16" style="mask: url(#b)">•ᴗ•</text>
+</svg>