From 19c77d23989739ee94d8bfa051646ad501f59278 Mon Sep 17 00:00:00 2001
From: strarsis <strarsis@gmail.com>
Date: Sat, 27 Mar 2021 14:59:56 +0100
Subject: [PATCH] Add mergeStyles plugin (#1381)

---
 lib/css-tools.js                | 20 ++++++--
 lib/svgo/config.js              |  1 +
 plugins/mergeStyles.js          | 87 +++++++++++++++++++++++++++++++++
 plugins/plugins.js              |  1 +
 test/config/_index.js           |  4 +-
 test/plugins/mergeStyles.01.svg | 19 +++++++
 test/plugins/mergeStyles.02.svg | 20 ++++++++
 test/plugins/mergeStyles.03.svg | 18 +++++++
 test/plugins/mergeStyles.04.svg | 19 +++++++
 test/plugins/mergeStyles.05.svg | 13 +++++
 test/plugins/mergeStyles.06.svg | 20 ++++++++
 test/plugins/mergeStyles.07.svg | 16 ++++++
 test/plugins/mergeStyles.08.svg | 23 +++++++++
 test/plugins/mergeStyles.09.svg | 31 ++++++++++++
 test/plugins/mergeStyles.10.svg | 15 ++++++
 15 files changed, 301 insertions(+), 6 deletions(-)
 create mode 100644 plugins/mergeStyles.js
 create mode 100644 test/plugins/mergeStyles.01.svg
 create mode 100644 test/plugins/mergeStyles.02.svg
 create mode 100644 test/plugins/mergeStyles.03.svg
 create mode 100644 test/plugins/mergeStyles.04.svg
 create mode 100644 test/plugins/mergeStyles.05.svg
 create mode 100644 test/plugins/mergeStyles.06.svg
 create mode 100644 test/plugins/mergeStyles.07.svg
 create mode 100644 test/plugins/mergeStyles.08.svg
 create mode 100644 test/plugins/mergeStyles.09.svg
 create mode 100644 test/plugins/mergeStyles.10.svg

diff --git a/lib/css-tools.js b/lib/css-tools.js
index 101c093f..a59aae6e 100644
--- a/lib/css-tools.js
+++ b/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;
 }
 
diff --git a/lib/svgo/config.js b/lib/svgo/config.js
index 4fb384e4..5f180aa9 100644
--- a/lib/svgo/config.js
+++ b/lib/svgo/config.js
@@ -10,6 +10,7 @@ const pluginsOrder = [
   'removeXMLNS',
   'removeEditorsNSData',
   'cleanupAttrs',
+  'mergeStyles',
   'inlineStyles',
   'minifyStyles',
   'convertStyleToAttrs',
diff --git a/plugins/mergeStyles.js b/plugins/mergeStyles.js
new file mode 100644
index 00000000..48f2ba1d
--- /dev/null
+++ b/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 <strarsis@gmail.com>
+ */
+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
+  );
+}
diff --git a/plugins/plugins.js b/plugins/plugins.js
index a64a0384..da8bc033 100644
--- a/plugins/plugins.js
+++ b/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');
diff --git a/test/config/_index.js b/test/config/_index.js
index 3dae6d48..1e46c49e 100644
--- a/test/config/_index.js
+++ b/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(
diff --git a/test/plugins/mergeStyles.01.svg b/test/plugins/mergeStyles.01.svg
new file mode 100644
index 00000000..14c4b724
--- /dev/null
+++ b/test/plugins/mergeStyles.01.svg
@@ -0,0 +1,19 @@
+Check whether plugin works with only one style element (no further merging needed, noop).
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
diff --git a/test/plugins/mergeStyles.02.svg b/test/plugins/mergeStyles.02.svg
new file mode 100644
index 00000000..662e9393
--- /dev/null
+++ b/test/plugins/mergeStyles.02.svg
@@ -0,0 +1,20 @@
+Check whether plugin works with only one style element (no further merging needed, noop) and a media query.
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>.st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }</style>
+    <style>
+        @media screen and (max-width: 200px) { .st0 { display: none; } }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }@media screen and (max-width: 200px) { .st0 { display: none; } }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
diff --git a/test/plugins/mergeStyles.03.svg b/test/plugins/mergeStyles.03.svg
new file mode 100644
index 00000000..a6b6977b
--- /dev/null
+++ b/test/plugins/mergeStyles.03.svg
@@ -0,0 +1,18 @@
+Check whether plugin works with merging styles of two style elements (no media queries).
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style media="print">.st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }</style>
+    <style>.test { background: red; }</style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        @media print{.st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }}.test { background: red; }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
diff --git a/test/plugins/mergeStyles.04.svg b/test/plugins/mergeStyles.04.svg
new file mode 100644
index 00000000..9885f8ee
--- /dev/null
+++ b/test/plugins/mergeStyles.04.svg
@@ -0,0 +1,19 @@
+Check whether plugin works with two style elements that contain styles that also uses media queries.
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style media="print">.st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }</style>
+    <style>.test { background: red; }</style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+    <style media="only screen and (min-width: 600px)">.wrapper { color: blue; }</style>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        @media print{.st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }}.test { background: red; }@media only screen and (min-width: 600px){.wrapper { color: blue; }}
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
diff --git a/test/plugins/mergeStyles.05.svg b/test/plugins/mergeStyles.05.svg
new file mode 100644
index 00000000..cf27fe26
--- /dev/null
+++ b/test/plugins/mergeStyles.05.svg
@@ -0,0 +1,13 @@
+Check whether plugin works with no style elements at all (no merging needed, noop).
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect width="100" height="100" class="st0"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect width="100" height="100" class="st0"/>
+</svg>
diff --git a/test/plugins/mergeStyles.06.svg b/test/plugins/mergeStyles.06.svg
new file mode 100644
index 00000000..04dd712f
--- /dev/null
+++ b/test/plugins/mergeStyles.06.svg
@@ -0,0 +1,20 @@
+Check whether plugin removes empty <style> elements
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+	<style></style>
+    <style>
+        .st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .st0{ fill:red; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
diff --git a/test/plugins/mergeStyles.07.svg b/test/plugins/mergeStyles.07.svg
new file mode 100644
index 00000000..f02a2705
--- /dev/null
+++ b/test/plugins/mergeStyles.07.svg
@@ -0,0 +1,16 @@
+Check whether plugin removes empty <style> elements with only empty <style> elements
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+	<style></style>
+    <style>
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
diff --git a/test/plugins/mergeStyles.08.svg b/test/plugins/mergeStyles.08.svg
new file mode 100644
index 00000000..42abf8c9
--- /dev/null
+++ b/test/plugins/mergeStyles.08.svg
@@ -0,0 +1,23 @@
+Check whether plugin removes empty <style> elements mixed with non-empty <style> elements
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style></style>
+    <style></style>
+    <style>
+        .test { color: red; }
+    </style>
+    <style></style>
+    <style></style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .test { color: red; }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
diff --git a/test/plugins/mergeStyles.09.svg b/test/plugins/mergeStyles.09.svg
new file mode 100644
index 00000000..36011a0c
--- /dev/null
+++ b/test/plugins/mergeStyles.09.svg
@@ -0,0 +1,31 @@
+Check whether plugin removes empty <style> elements mixed with non-empty <style> elements
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+	  .a { fill: blue; }
+	</style>
+	<style type="">
+	  .b { fill: green; }
+	</style>
+    <style type="text/css">
+	  .c { fill: red; }
+	</style>
+	<style type="text/invalid">
+	  .d { fill: blue; }
+	</style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        .a { fill: blue; }.b { fill: green; }.c { fill: red; }
+    </style>
+    <style type="text/invalid">
+        .d { fill: blue; }
+    </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
diff --git a/test/plugins/mergeStyles.10.svg b/test/plugins/mergeStyles.10.svg
new file mode 100644
index 00000000..480abce2
--- /dev/null
+++ b/test/plugins/mergeStyles.10.svg
@@ -0,0 +1,15 @@
+Check whether plugin removes one empty <style> element that is also the only <style> element.
+
+===
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+	  </style>
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect width="100" height="100" class="st0" style="stroke-width:3;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em"/>
+</svg>