Add mergeStyles plugin (#1381)

Author: strarsis

lib/css-tools.js

@@ -189,7 +189,10 @@ function csstreeToStyleDeclaration(declaration) {
  * @return {string} CSS string or empty array if no styles are set
  */
 function getCssStr(elem) {
-  if (elem.children[0].type === 'text' || elem.children[0].type === 'cdata') {
+  if (
+    elem.children.length > 0 &&
+    (elem.children[0].type === 'text' || elem.children[0].type === 'cdata')
+  ) {
     return elem.children[0].value;
   }
   return '';
@@ -203,10 +206,19 @@ function getCssStr(elem) {
  * @return {string} reference to field with CSS
  */
 function setCssStr(elem, css) {
-  if (elem.children[0].type === 'text' || elem.children[0].type === 'cdata') {
-    elem.children[0].value = css;
-    return elem.children[0].value;
+  if (elem.children.length === 0) {
+    elem.children.push({
+      type: 'text',
+      value: '',
+    });
+  }
+
+  if (elem.children[0].type !== 'text' && elem.children[0].type !== 'cdata') {
+    return css;
   }
+
+  elem.children[0].value = css;
+
   return css;
 }
 

lib/svgo/config.js

@@ -10,6 +10,7 @@ const pluginsOrder = [
   'removeXMLNS',
   'removeEditorsNSData',
   'cleanupAttrs',
+  'mergeStyles',
   'inlineStyles',
   'minifyStyles',
   'convertStyleToAttrs',

plugins/mergeStyles.js

@@ -0,0 +1,87 @@
+'use strict';
+
+const { querySelectorAll, closestByName } = require('../lib/xast.js');
+const { getCssStr, setCssStr } = require('../lib/css-tools');
+
+exports.type = 'full';
+exports.active = true;
+exports.description = 'merge multiple style elements into one';
+
+/**
+ * Merge multiple style elements into one.
+ *
+ * @param {Object} document document element
+ *
+ * @author strarsis <[email protected]>
+ */
+exports.fn = function (document) {
+  // collect <style/>s with valid type attribute (preserve order)
+  const styleElements = querySelectorAll(document, 'style');
+
+  // no <styles/>s, nothing to do
+  if (styleElements.length === 0) {
+    return document;
+  }
+
+  const styles = [];
+  for (const styleElement of styleElements) {
+    if (
+      styleElement.attributes.type &&
+      styleElement.attributes.type !== 'text/css'
+    ) {
+      // skip <style> with invalid type attribute
+      continue;
+    }
+
+    if (closestByName(styleElement, 'foreignObject')) {
+      // skip <foreignObject> content
+      continue;
+    }
+
+    const cssString = getCssStr(styleElement);
+
+    styles.push({
+      styleElement: styleElement,
+
+      mq: styleElement.attributes.media,
+      cssStr: cssString,
+    });
+  }
+
+  const collectedStyles = [];
+  for (let styleNo = 0; styleNo < styles.length; styleNo += 1) {
+    const style = styles[styleNo];
+
+    if (style.mq) {
+      const wrappedStyles = `@media ${style.mq}{${style.cssStr}}`;
+      collectedStyles.push(wrappedStyles);
+    } else {
+      collectedStyles.push(style.cssStr);
+    }
+
+    // remove all processed style elements – except the first one
+    if (styleNo > 0) {
+      removeFromParent(style.styleElement);
+    }
+  }
+  const collectedStylesString = collectedStyles.join('');
+
+  // combine collected styles in the first style element
+  const firstStyle = styles[0];
+  delete firstStyle.styleElement.attributes.media; // remove media mq attribute as CSS media queries are used
+  if (collectedStylesString.trim().length > 0) {
+    setCssStr(firstStyle.styleElement, collectedStylesString);
+  } else {
+    removeFromParent(firstStyle.styleElement);
+  }
+
+  return document;
+};
+
+function removeFromParent(element) {
+  const parentElement = element.parentNode;
+  return parentElement.children.splice(
+    parentElement.children.indexOf(element),
+    1
+  );
+}

plugins/plugins.js

@@ -14,6 +14,7 @@ exports.convertPathData = require('./convertPathData.js');
 exports.convertShapeToPath = require('./convertShapeToPath.js');
 exports.convertStyleToAttrs = require('./convertStyleToAttrs.js');
 exports.convertTransform = require('./convertTransform.js');
+exports.mergeStyles = require('./mergeStyles.js');
 exports.inlineStyles = require('./inlineStyles.js');
 exports.mergePaths = require('./mergePaths.js');
 exports.minifyStyles = require('./minifyStyles.js');

test/config/_index.js

@@ -163,8 +163,8 @@ describe('config', function () {
       (item) => item.name === 'cleanupIDs'
     );
     it('should preserve internal plugins order', () => {
-      expect(removeAttrsIndex).to.equal(40);
-      expect(cleanupIDsIndex).to.equal(10);
+      expect(removeAttrsIndex).to.equal(41);
+      expect(cleanupIDsIndex).to.equal(11);
     });
     it('should activate inactive by default plugins', () => {
       const removeAttrsPlugin = resolvePluginConfig(