Add support for better SVG minifying

wooorm · web-flow · commit 98afb010c7db · 2019-05-29T16:18:54.000+02:00
Closes GH-10. Closes GH-13.
diff --git a/lib/element.js b/lib/element.js
@@ -116,7 +116,7 @@ function attributes(ctx, props) {
     result = values[index]
     last = null
 
-    if (ctx.schema.space === 'html' && ctx.tight) {
+    if (ctx.tight) {
       last = result.charAt(result.length - 1)
     }
 
@@ -132,7 +132,6 @@ function attributes(ctx, props) {
 // Stringify one attribute.
 function attribute(ctx, key, value) {
   var schema = ctx.schema
-  var space = schema.space
   var info = find(schema, key)
   var name = info.attribute
 
@@ -156,11 +155,23 @@ function attribute(ctx, key, value) {
   name = attributeName(ctx, name)
 
   if (value === true) {
-    if (space === 'html') {
-      return name
-    }
-
-    value = name
+    // There is currently only one boolean property in SVG: `[download]` on
+    // `<a>`.
+    // This property does not seem to work in browsers (FF, Sa, Ch), so I can’t
+    // test if dropping the value works.
+    // But I assume that it should:
+    //
+    // ```html
+    // <!doctype html>
+    // <svg viewBox="0 0 100 100">
+    //   <a href=https://example.com download>
+    //     <circle cx=50 cy=40 r=35 />
+    //   </a>
+    // </svg>
+    // ```
+    //
+    // See: <https://github.com/wooorm/property-information/blob/master/lib/svg.js>
+    return name
   }
 
   return name + attributeValue(ctx, key, value, info)
@@ -180,7 +191,6 @@ function attributeValue(ctx, key, value, info) {
   var options = ctx.entities
   var quote = ctx.quote
   var alternative = ctx.alternative
-  var space = ctx.schema.space
   var unquoted
   var subset
 
@@ -194,11 +204,11 @@ function attributeValue(ctx, key, value, info) {
 
   value = String(value)
 
-  if (space !== 'html' || value || !ctx.collapseEmpty) {
+  if (value || !ctx.collapseEmpty) {
     unquoted = value
 
     // Check unquoted value.
-    if (space === 'html' && ctx.unquoted) {
+    if (ctx.unquoted) {
       subset = constants.unquoted[ctx.valid][ctx.safe]
       unquoted = entities(
         value,
@@ -207,15 +217,15 @@ function attributeValue(ctx, key, value, info) {
     }
 
     // If `value` contains entities when unquoted…
-    if (space !== 'html' || !ctx.unquoted || unquoted !== value) {
+    if (!ctx.unquoted || unquoted !== value) {
       // If the alternative is less common than `quote`, switch.
       if (alternative && ccount(value, quote) > ccount(value, alternative)) {
         quote = alternative
       }
 
       subset = quote === apostrophe ? constants.single : constants.double
       // Always encode without parse errors in non-HTML.
-      subset = subset[space === 'html' ? ctx.valid : 1][ctx.safe]
+      subset = subset[ctx.schema.space === 'html' ? ctx.valid : 1][ctx.safe]
 
       value = entities(value, xtend(options, {subset: subset, attribute: true}))
 
diff --git a/test/svg.js b/test/svg.js
@@ -55,8 +55,8 @@ test('svg', function(t) {
 
   t.deepEqual(
     to(s('circle', {title: ''}), {space: 'svg', collapseEmptyAttributes: true}),
-    '<circle title=""></circle>',
-    'should *not* collapse empty string attributes in `collapseEmptyAttributes` mode'
+    '<circle title></circle>',
+    'should collapse empty string attributes in `collapseEmptyAttributes` mode'
   )
 
   t.deepEqual(
@@ -72,8 +72,8 @@ test('svg', function(t) {
       space: 'svg',
       tightAttributes: true
     }),
-    '<text class="a b" title="c d">bravo</text>',
-    'should *not* stringify multiple properties tightly in `tightAttributes` mode'
+    '<text class="a b"title="c d">bravo</text>',
+    'should stringify multiple properties tightly in `tightAttributes` mode'
   )
 
   t.deepEqual(
@@ -105,7 +105,7 @@ test('svg', function(t) {
 
   t.deepEqual(
     to(s('a', {download: true}, 'bravo'), {space: 'svg'}),
-    '<a download="download">bravo</a>',
+    '<a download>bravo</a>',
     'should stringify known boolean attributes set to `true`'
   )
 
@@ -117,7 +117,7 @@ test('svg', function(t) {
 
   t.deepEqual(
     to(s('a', {download: 1}, 'bravo'), {space: 'svg'}),
-    '<a download="download">bravo</a>',
+    '<a download>bravo</a>',
     'should stringify truthy known boolean attributes'
   )
 
@@ -135,7 +135,7 @@ test('svg', function(t) {
 
   t.deepEqual(
     to(s('a', {unknown: true}, 'bravo'), {space: 'svg'}),
-    '<a unknown="unknown">bravo</a>',
+    '<a unknown>bravo</a>',
     'should stringify unknown attributes set to `true`'
   )
 
@@ -183,7 +183,7 @@ test('svg', function(t) {
 
   t.deepEqual(
     to(s('i', {id: true}, 'bravo'), {space: 'svg'}),
-    '<i id="id">bravo</i>',
+    '<i id>bravo</i>',
     'should stringify other non-string attributes'
   )
 
@@ -221,8 +221,8 @@ test('svg', function(t) {
 
   t.deepEqual(
     to(s('circle', {cx: 2}), {space: 'svg', preferUnquoted: true}),
-    '<circle cx="2"></circle>',
-    'should *not* omit quotes in `preferUnquoted`'
+    '<circle cx=2></circle>',
+    'should omit quotes in `preferUnquoted`'
   )
 
   t.deepEqual(
