Preserve whitespace in elements containing text (#1220)

Author: chromakode

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,29 +268,27 @@ 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;
         }
 
         processedData += this.convert(data).data;
 
         if (this.textContext == data) {
             this.textContext = null;
-            if (this.config.pretty) dataEnd = EOL;
         }
 
         return  openIndent +
                 tagOpenStart +
                 data.elem +
                 this.createAttrs(data) +
                 tagOpenEnd +
-                textIndent +
                 processedData +
                 dataEnd +
-                this.createIndent() +
+                closeIndent +
                 tagCloseStart +
                 data.elem +
                 tagCloseEnd;

lib/svgo/svg2js.js

@@ -4,12 +4,13 @@ var SAX = require('@trysound/sax'),
     JSAPI = require('./jsAPI.js'),
     CSSClassList = require('./css-class-list'),
     CSSStyleDeclaration = require('./css-style-declaration'),
+    textElems = require('../../plugins/_collections.js').textElems,
     entityDeclaration = /<!ENTITY\s+(\S+)\s+(?:'([^']+)'|"([^"]+)")\s*>/g;
 
 var config = {
     strict: true,
     trim: false,
-    normalize: true,
+    normalize: false,
     lowercase: true,
     xmlns: true,
     position: true
@@ -115,8 +116,8 @@ module.exports = function(data) {
         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.includes(data.name) && !data.prefix) {
             textContext = current;
         }
 
@@ -143,9 +144,7 @@ module.exports = function(data) {
 
         var last = stack.pop();
 
-        // Trim text inside <text> tag.
         if (last == textContext) {
-            trim(textContext);
             textContext = null;
         }
         current = stack[stack.length - 1];
@@ -168,20 +167,4 @@ module.exports = function(data) {
         return { error: e.message };
     }
 
-    function trim(elem) {
-        if (!elem.content) return elem;
-
-        var start = elem.content[0],
-            end = elem.content[elem.content.length - 1];
-
-        while (start && start.content && !start.text) start = start.content[0];
-        if (start && start.text) start.text = start.text.replace(/^\s+/, '');
-
-        while (end && end.content && !end.text) end = end.content[end.content.length - 1];
-        if (end && end.text) end.text = end.text.replace(/\s+$/, '');
-
-        return elem;
-
-    }
-
 };

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

test/plugins/cleanupIDs.09.svg

@@ -177,6 +177,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 expect(textNode.content[0].text).to.equal('  test  ');
+            });
+
+        });
+
         describe('API', function() {
 
             describe('clone()', function() {