From 959ac4cda1671d074b7cbc9605c9befc2ac131ef Mon Sep 17 00:00:00 2001
From: Max Goodman <c@chromakode.com>
Date: Sun, 16 Feb 2020 19:11:05 -0800
Subject: [PATCH] Preserve whitespace in elements containing text

---
 lib/svgo/js2svg.js                 | 16 +++++++---------
 lib/svgo/svg2js.js                 | 11 +++++------
 plugins/_collections.js            |  2 ++
 test/plugins/cleanupIDs.09.svg     |  3 ++-
 test/plugins/cleanupIDs.10.svg     |  3 ++-
 test/plugins/cleanupIDs.13.svg     |  3 ++-
 test/plugins/cleanupIDs.14.svg     |  3 ++-
 test/plugins/collapseGroups.13.svg |  3 ++-
 test/plugins/inlineStyles.13.svg   |  4 +---
 test/plugins/inlineStyles.16.svg   |  4 +---
 test/svg2js/_index.js              |  9 +++++++++
 test/svg2js/test.svg               |  2 +-
 12 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/lib/svgo/js2svg.js b/lib/svgo/js2svg.js
index 0a52c6b29..f29838c79 100644
--- a/lib/svgo/js2svg.js
+++ b/lib/svgo/js2svg.js
@@ -1,7 +1,7 @@
 'use strict';
 
 var EOL = require('os').EOL,
-    textElem = require('../../plugins/_collections.js').elemsGroups.textContent.concat('title');
+    textElems = require('../../plugins/_collections.js').textElems;
 
 var defaults = {
     doctypeStart: '<!DOCTYPE',
@@ -258,7 +258,7 @@ JS2SVG.prototype.createElem = function(data) {
             tagCloseStart = this.config.tagCloseStart,
             tagCloseEnd = this.config.tagCloseEnd,
             openIndent = this.createIndent(),
-            textIndent = '',
+            closeIndent = this.createIndent(),
             processedData = '',
             dataEnd = '';
 
@@ -268,10 +268,10 @@ JS2SVG.prototype.createElem = function(data) {
             tagCloseStart = defaults.tagCloseStart;
             tagCloseEnd = defaults.tagCloseEnd;
             openIndent = '';
-        } else if (data.isElem(textElem)) {
-            if (this.config.pretty) {
-                textIndent += openIndent + this.config.indent;
-            }
+        } else if (data.isElem(textElems)) {
+            tagOpenEnd = defaults.tagOpenEnd;
+            tagCloseStart = defaults.tagCloseStart;
+            closeIndent = '';
             this.textContext = data;
         }
 
@@ -279,7 +279,6 @@ JS2SVG.prototype.createElem = function(data) {
 
         if (this.textContext == data) {
             this.textContext = null;
-            if (this.config.pretty) dataEnd = EOL;
         }
 
         return  openIndent +
@@ -287,10 +286,9 @@ JS2SVG.prototype.createElem = function(data) {
                 data.elem +
                 this.createAttrs(data) +
                 tagOpenEnd +
-                textIndent +
                 processedData +
                 dataEnd +
-                this.createIndent() +
+                closeIndent +
                 tagCloseStart +
                 data.elem +
                 tagCloseEnd;
diff --git a/lib/svgo/svg2js.js b/lib/svgo/svg2js.js
index 6bba13e58..e20fea307 100644
--- a/lib/svgo/svg2js.js
+++ b/lib/svgo/svg2js.js
@@ -4,12 +4,13 @@ var SAX = require('sax'),
     JSAPI = require('./jsAPI.js'),
     CSSClassList = require('./css-class-list'),
     CSSStyleDeclaration = require('./css-style-declaration'),
-    entityDeclaration = /<!ENTITY\s+(\S+)\s+(?:'([^\']+)'|"([^\"]+)")\s*>/g;
+    entityDeclaration = /<!ENTITY\s+(\S+)\s+(?:'([^\']+)'|"([^\"]+)")\s*>/g,
+    textElems = require('../../plugins/_collections.js').textElems;
 
 var config = {
     strict: true,
     trim: false,
-    normalize: true,
+    normalize: false,
     lowercase: true,
     xmlns: true,
     position: true
@@ -117,8 +118,8 @@ module.exports = function(data, callback) {
         elem = pushToContent(elem);
         current = elem;
 
-        // Save info about <text> tag to prevent trimming of meaningful whitespace
-        if (data.name == 'text' && !data.prefix) {
+        // Save info about tags containing text to prevent trimming of meaningful whitespace
+        if (textElems.indexOf(data.name) !== -1 && !data.prefix) {
             textContext = current;
         }
 
@@ -145,9 +146,7 @@ module.exports = function(data, callback) {
 
         var last = stack.pop();
 
-        // Trim text inside <text> tag.
         if (last == textContext) {
-            trim(textContext);
             textContext = null;
         }
         current = stack[stack.length - 1];
diff --git a/plugins/_collections.js b/plugins/_collections.js
index 8179f3050..7b6a9a5c9 100644
--- a/plugins/_collections.js
+++ b/plugins/_collections.js
@@ -15,6 +15,8 @@ exports.elemsGroups = {
     filterPrimitive: ['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feFlood', 'feGaussianBlur', 'feImage', 'feMerge', 'feMorphology', 'feOffset', 'feSpecularLighting', 'feTile', 'feTurbulence']
 };
 
+exports.textElems = exports.elemsGroups.textContent.concat('title');
+
 exports.pathElems = ['path', 'glyph', 'missing-glyph'];
 
 // http://www.w3.org/TR/SVG11/intro.html#Definitions
diff --git a/test/plugins/cleanupIDs.09.svg b/test/plugins/cleanupIDs.09.svg
index fc9b93223..bf70266cd 100644
--- a/test/plugins/cleanupIDs.09.svg
+++ b/test/plugins/cleanupIDs.09.svg
@@ -11,7 +11,8 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 120">
     <style>
-        svg .hidden { display: none; } svg .hidden:target { display: inline; }
+        svg .hidden { display: none; }
+        svg .hidden:target { display: inline; }
     </style>
     <circle id="circle" class="hidden" fill="red" cx="60" cy="60" r="50"/>
     <rect id="rect" class="hidden" fill="blue" x="10" y="10" width="100" height="100"/>
diff --git a/test/plugins/cleanupIDs.10.svg b/test/plugins/cleanupIDs.10.svg
index b733a4beb..beb8a2d62 100644
--- a/test/plugins/cleanupIDs.10.svg
+++ b/test/plugins/cleanupIDs.10.svg
@@ -17,7 +17,8 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 120">
     <style>
-        svg .hidden { display: none; } svg .hidden:target { display: inline; }
+        svg .hidden { display: none; }
+        svg .hidden:target { display: inline; }
     </style>
     <defs>
         <circle id="a" fill="red" cx="60" cy="60" r="50"/>
diff --git a/test/plugins/cleanupIDs.13.svg b/test/plugins/cleanupIDs.13.svg
index 434967791..0be087137 100644
--- a/test/plugins/cleanupIDs.13.svg
+++ b/test/plugins/cleanupIDs.13.svg
@@ -11,7 +11,8 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 120">
     <style>
-        svg .hidden { display: none; } svg .hidden:target { display: inline; }
+        svg .hidden { display: none; }
+        svg .hidden:target { display: inline; }
     </style>
     <circle id="pre1_circle" class="hidden" fill="red" cx="60" cy="60" r="50"/>
     <rect id="pre2_rect" class="hidden" fill="blue" x="10" y="10" width="100" height="100"/>
diff --git a/test/plugins/cleanupIDs.14.svg b/test/plugins/cleanupIDs.14.svg
index ae8d80c98..241ed58a0 100644
--- a/test/plugins/cleanupIDs.14.svg
+++ b/test/plugins/cleanupIDs.14.svg
@@ -17,7 +17,8 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 120">
     <style>
-        svg .hidden { display: none; } svg .hidden:target { display: inline; }
+        svg .hidden { display: none; }
+        svg .hidden:target { display: inline; }
     </style>
     <defs>
         <circle id="a" fill="red" cx="60" cy="60" r="50"/>
diff --git a/test/plugins/collapseGroups.13.svg b/test/plugins/collapseGroups.13.svg
index 41c95a91b..896516c9c 100644
--- a/test/plugins/collapseGroups.13.svg
+++ b/test/plugins/collapseGroups.13.svg
@@ -15,7 +15,8 @@
 
 <svg xmlns="http://www.w3.org/2000/svg">
     <style>
-        .n{display:none} .i{display:inline}
+        .n{display:none}
+        .i{display:inline}
     </style>
     <g class="i" id="a"/>
     <g id="b" class="n">
diff --git a/test/plugins/inlineStyles.13.svg b/test/plugins/inlineStyles.13.svg
index 6bb9b8bdd..5258f7b17 100644
--- a/test/plugins/inlineStyles.13.svg
+++ b/test/plugins/inlineStyles.13.svg
@@ -12,9 +12,7 @@
             /* Atrules with block */
             @font-face {
                 font-family: SomeFont;
-                src: local("Some Font"),
-                local("SomeFont"),
-                url(SomeFont.ttf);
+                src: local("Some Font"), local("SomeFont"), url(SomeFont.ttf);
                 font-weight: bold;
             }
 
diff --git a/test/plugins/inlineStyles.16.svg b/test/plugins/inlineStyles.16.svg
index bdcb1ad5a..1688ba8b9 100644
--- a/test/plugins/inlineStyles.16.svg
+++ b/test/plugins/inlineStyles.16.svg
@@ -25,9 +25,7 @@
 @@@
 
 <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222 57.28">
-    <title>
-        button
-    </title>
+    <title>button</title>
     <rect width="222" height="57.28" rx="28.64" ry="28.64" style="stroke:red;fill:#37d0cd"/>
     <path d="M312.75,168.66A2.15,2.15,0,0,1,311.2,165L316,160l-4.8-5a2.15,2.15,0,1,1,3.1-3l6.21,6.49a2.15,2.15,0,0,1,0,3L314.31,168a2.14,2.14,0,0,1-1.56.67Zm0,0" transform="translate(-119 -131.36)" style="fill:#fff"/>
     <circle cx="33.5" cy="27.25" r="2.94" style="fill:#fff"/>
diff --git a/test/svg2js/_index.js b/test/svg2js/_index.js
index 7528d344a..dc3b8ad69 100644
--- a/test/svg2js/_index.js
+++ b/test/svg2js/_index.js
@@ -186,6 +186,15 @@ describe('svg2js', function() {
 
         });
 
+        describe('text nodes', function() {
+
+            it('should contain preserved whitespace', function() {
+                const textNode = root.content[3].content[1].content[0].content[1]
+                return textNode.content[0].text.should.equal('  test  ')
+            });
+
+        });
+
         describe('API', function() {
 
             describe('clone()', function() {
diff --git a/test/svg2js/test.svg b/test/svg2js/test.svg
index f8e741dbd..98746fa8d 100644
--- a/test/svg2js/test.svg
+++ b/test/svg2js/test.svg
@@ -12,7 +12,7 @@
     <g>
         <g>
             <circle fill="#ff0000" cx="60px" cy="60px" r="50px"/>
-            <text>test</text>
+            <text>  test  </text>
         </g>
     </g>
     <g style="color: black" class="unknown-class"></g>