html-minifier-terser icon indicating copy to clipboard operation
html-minifier-terser copied to clipboard

[FEATURE] `collapseBooleanAttributes` doesn't work with custom attributes

Open unbiased-dev opened this issue 4 years ago • 3 comments

const minify = require("html-minifier-terser").minify;

console.log(
  minify(
    '<a href="#" router="true" another="another" variant=variant test=true>Test</a>',
    {
      collapseBooleanAttributes: true
    }
  )
);

result

<a href="#" router="true" another="another" variant="variant" test="true">Test</a>

expected result

<a href="#" router another variant test>Test</a>

Are my expectations incorrect?

unbiased-dev avatar Mar 11 '21 13:03 unbiased-dev

Reading the source it looks like it only checks if the attribute is one of predefined attributes.

var isSimpleBoolean = createMapFromString('allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,truespeed,typemustmatch,visible');
var isBooleanValue = createMapFromString('true,false');

Would adding support for collapsing custom boolean attributes be supported? Something like customAttrBooleanCollapse?

unbiased-dev avatar Mar 11 '21 14:03 unbiased-dev

In HTML5, all custom attributes must have the data- prefix. The only exception seems to be custom elements, which can have any attributes.

Given that <a href="#" router="true" another="another" variant=variant test=true>Test</a> is not valid HTML5, I don't think it makes sense to allow collapsing custom attributes. Also, deciding which attributes are boolean is another issue altogether.

KartikSoneji avatar Aug 16 '22 19:08 KartikSoneji