Check for mask and clip-path in styles. (#15)

svg-utils · Sep 23, 2024 · 2d7b62a · 2d7b62a
1 parent 56e84d5
commit 2d7b62a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 65 deletions.
diff --git a/lib/style.js b/lib/style.js
@@ -1,5 +1,4 @@
 import * as csstree from 'css-tree';
-import * as csswhat from 'css-what';
 import { syntax } from 'csso';
 import { visit, matches } from './xast.js';
 import {
@@ -279,60 +278,6 @@ export const computeStyle = (stylesheet, node) => {
   return computedStyles;
 };
 
-/**
- * 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} name
- * @param {?string} value
- * @param {boolean} traversed
- * @returns {boolean}
- * @deprecated
- */
-export 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;
-        }
-
-        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 false;
-};
-
 /**
  * @param {import('../lib/types.js').XastElement} element
  * @param {Map<string,string|{value:string,important?:boolean}>} properties

diff --git a/plugins/collapseGroups.js b/plugins/collapseGroups.js
@@ -42,6 +42,18 @@ export const fn = (root, params, info) => {
     return;
   }
 
+  /**
+   * @param {XastElement} element
+   * @param {import('../lib/types.js').ParentList} parentInfo,
+   */
+  function elementHasUnmovableProperties(element, parentInfo) {
+    // @ts-ignore - styles is no null
+    const properties = styles.computeStyle(element, parentInfo);
+    return ['clip-path', 'filter', 'mask'].some(
+      (propName) => properties.get(propName) !== undefined,
+    );
+  }
+
   return {
     element: {
       exit: (node, parentNode, parentInfo) => {
@@ -59,21 +71,13 @@ export const fn = (root, params, info) => {
           node.children.length === 1
         ) {
           const firstChild = node.children[0];
-          const properties = styles.computeStyle(node, parentInfo);
-          const filter = properties.get('filter');
-          const nodeHasFilter = filter === null || filter;
           // TODO untangle this mess
           if (
             firstChild.type === 'element' &&
             firstChild.attributes.id == null &&
-            !nodeHasFilter &&
+            !elementHasUnmovableProperties(node, parentInfo) &&
             (node.attributes.class == null ||
-              firstChild.attributes.class == null) &&
-            ((node.attributes['clip-path'] == null &&
-              node.attributes.mask == null) ||
-              (firstChild.name === 'g' &&
-                node.attributes.transform == null &&
-                firstChild.attributes.transform == null))
+              firstChild.attributes.class == null)
           ) {
             const newChildElemAttrs = { ...firstChild.attributes };