Skip to content

Add support for better SVG minifying #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 29, 2019
Merged

Add support for better SVG minifying #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 22 additions & 12 deletions lib/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand All @@ -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

Expand All @@ -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)
Expand All @@ -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

Expand All @@ -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,
Expand All @@ -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}))

Expand Down
20 changes: 10 additions & 10 deletions test/svg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
Expand Down Expand Up @@ -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`'
)

Expand All @@ -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'
)

Expand All @@ -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`'
)

Expand Down Expand Up @@ -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'
)

Expand Down Expand Up @@ -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(
Expand Down