schnee effeckt und fehler Korektur

node_modules/svgo/plugins/minifyStyles.js

@@ -1,45 +1,148 @@
 'use strict';
 
-exports.type = 'perItem';
+/**
+ * @typedef {import('../lib/types').XastElement} XastElement
+ */
 
+const csso = require('csso');
+
+exports.type = 'visitor';
+exports.name = 'minifyStyles';
 exports.active = true;
-
-exports.params = {
-    svgo: {}
-};
-
-exports.description = 'minifies existing styles in svg';
-
-var csso = require('csso');
+exports.description =
+  'minifies styles and removes unused styles based on usage data';
 
 /**
- * Minifies styles (<style> element + style attribute) using svgo
- *
- * @param {Object} item current iteration item
- * @return {Boolean} if false, item will be filtered out
+ * Minifies styles (<style> element + style attribute) using CSSO
  *
  * @author strarsis <strarsis@gmail.com>
+ *
+ * @type {import('../lib/types').Plugin<csso.MinifyOptions & Omit<csso.CompressOptions, 'usage'> & {
+ *   usage?: boolean | {
+ *     force?: boolean,
+ *     ids?: boolean,
+ *     classes?: boolean,
+ *     tags?: boolean
+ *   }
+ * }>}
  */
-exports.fn = function(item, svgoOptions) {
+exports.fn = (_root, { usage, ...params }) => {
+  let enableTagsUsage = true;
+  let enableIdsUsage = true;
+  let enableClassesUsage = true;
+  // force to use usage data even if it unsafe (document contains <script> or on* attributes)
+  let forceUsageDeoptimized = false;
+  if (typeof usage === 'boolean') {
+    enableTagsUsage = usage;
+    enableIdsUsage = usage;
+    enableClassesUsage = usage;
+  } else if (usage) {
+    enableTagsUsage = usage.tags == null ? true : usage.tags;
+    enableIdsUsage = usage.ids == null ? true : usage.ids;
+    enableClassesUsage = usage.classes == null ? true : usage.classes;
+    forceUsageDeoptimized = usage.force == null ? false : usage.force;
+  }
+  /**
+   * @type {Array<XastElement>}
+   */
+  const styleElements = [];
+  /**
+   * @type {Array<XastElement>}
+   */
+  const elementsWithStyleAttributes = [];
+  let deoptimized = false;
+  /**
+   * @type {Set<string>}
+   */
+  const tagsUsage = new Set();
+  /**
+   * @type {Set<string>}
+   */
+  const idsUsage = new Set();
+  /**
+   * @type {Set<string>}
+   */
+  const classesUsage = new Set();
 
-    if(item.elem) {
-        if(item.isElem('style') && !item.isEmpty()) {
-            var styleCss = item.content[0].text || item.content[0].cdata || [],
-                DATA = styleCss.indexOf('>') >= 0 || styleCss.indexOf('<') >= 0 ? 'cdata' : 'text';
-            if(styleCss.length > 0) {
-                var styleCssMinified = csso.minify(styleCss, svgoOptions);
-                item.content[0][DATA] = styleCssMinified.css;
-            }
-      }
-
-      if(item.hasAttr('style')) {
-          var itemCss = item.attr('style').value;
-          if(itemCss.length > 0) {
-              var itemCssMinified = csso.minifyBlock(itemCss, svgoOptions);
-              item.attr('style').value = itemCssMinified.css;
+  return {
+    element: {
+      enter: (node) => {
+        // detect deoptimisations
+        if (node.name === 'script') {
+          deoptimized = true;
+        }
+        for (const name of Object.keys(node.attributes)) {
+          if (name.startsWith('on')) {
+            deoptimized = true;
           }
-      }
-    }
+        }
+        // collect tags, ids and classes usage
+        tagsUsage.add(node.name);
+        if (node.attributes.id != null) {
+          idsUsage.add(node.attributes.id);
+        }
+        if (node.attributes.class != null) {
+          for (const className of node.attributes.class.split(/\s+/)) {
+            classesUsage.add(className);
+          }
+        }
+        // collect style elements or elements with style attribute
+        if (node.name === 'style' && node.children.length !== 0) {
+          styleElements.push(node);
+        } else if (node.attributes.style != null) {
+          elementsWithStyleAttributes.push(node);
+        }
+      },
+    },
 
-    return item;
+    root: {
+      exit: () => {
+        /**
+         * @type {csso.Usage}
+         */
+        const cssoUsage = {};
+        if (deoptimized === false || forceUsageDeoptimized === true) {
+          if (enableTagsUsage && tagsUsage.size !== 0) {
+            cssoUsage.tags = Array.from(tagsUsage);
+          }
+          if (enableIdsUsage && idsUsage.size !== 0) {
+            cssoUsage.ids = Array.from(idsUsage);
+          }
+          if (enableClassesUsage && classesUsage.size !== 0) {
+            cssoUsage.classes = Array.from(classesUsage);
+          }
+        }
+        // minify style elements
+        for (const node of styleElements) {
+          if (
+            node.children[0].type === 'text' ||
+            node.children[0].type === 'cdata'
+          ) {
+            const cssText = node.children[0].value;
+            const minified = csso.minify(cssText, {
+              ...params,
+              usage: cssoUsage,
+            }).css;
+            // preserve cdata if necessary
+            // TODO split cdata -> text optimisation into separate plugin
+            if (cssText.indexOf('>') >= 0 || cssText.indexOf('<') >= 0) {
+              node.children[0].type = 'cdata';
+              node.children[0].value = minified;
+            } else {
+              node.children[0].type = 'text';
+              node.children[0].value = minified;
+            }
+          }
+        }
+        // minify style attributes
+        for (const node of elementsWithStyleAttributes) {
+          // style attribute
+          const elemStyle = node.attributes.style;
+          node.attributes.style = csso.minifyBlock(elemStyle, {
+            ...params,
+          }).css;
+        }
+      },
+    },
+  };
 };