Strange behaviour in conversion of link tag attribute onload="this.media='all'"

[naveedahmed1]

I have below tag in my html file:

<link rel="stylesheet" href="styles.56ec616e3d29e712c590.css" media="print" onload="this.media='all'">

When I run html-minifier-terser -o dist/index.html dist/index.html --remove-comments --collapse-whitespace --minify-js --minify-css

I generates:

<link rel="stylesheet" href="styles.56ec616e3d29e712c590.css" media="print" onload='this.media="all"'>

i.e. surrounds onload in single quote.

I want to keep this tag as it is therefore I tried

--quote-character "

But with this option it generates:

<link rel="stylesheet" href="styles.56ec616e3d29e712c590.css" media="print" onload="this.media=&#34;all&#34;">

Can anyone please help?

[DanielRuf]

I want to keep this tag as it is therefore I tried

In general '...""' is correct and fine.

For ignoring some lines, see https://github.com/terser/html-minifier-terser#ignoring-chunks-of-markup

[naveedahmed1]

In general '...""' is correct and fine.

Yes I agree, even "...''" is also valid so, the plugin shouldn't modify onload="this.media='all'"

In my case its an Angular project and index.html for production build is generated by Angular CLI therefore I cannot wrap it in <!-- htmlmin:ignore -->

Is there anyother way?

[DanielRuf]

Is there anyother way?

Besides this ignoreCustomFragments probably not. Did you already try that?

[naveedahmed1]

Not yet, can you please guide how to use it in my case, at the moment in scripts section of my packages.json file I have:

"minify-index": "html-minifier-terser -o dist/index.html dist/index.html --remove-comments --collapse-whitespace --minify-js --minify-css",

[DanielRuf]

Unfortunately I have not used this option much so I would have to try this too. What you use is the CLI version of the package.

The CLI uses the options and converts them to paramcase. See https://github.com/terser/html-minifier-terser/blob/d8ab2e7355e9a0f4894f60cd9fbb86ba145ceb83/cli.js#L152

So uppercase letters are converted to their lowercase version and - is appended before each converted letter.

So for the CLI it should be --ignore-custom-fragments ... .

[9mm]

@DanielRuf do you have an example how we pass options to the CLI version? the readme seems to reference html-minifier-terser which isn't installed and theres no bin directory or anything. I'm assuming we need to run cli.js instead from command line?

I need to minify html outside of JS environment, from a bash script and I want to use the CLI version

[DanielRuf]

the readme seems to reference html-minifier-terser which isn't installed and theres no bin directory or anything

Are you sure?

https://github.com/terser/html-minifier-terser/blob/v5.1.1/package.json#L40-L42

When you install it locally in your project, you can use html-minifier-terser in npm scripts or you install it globally. Then html-minifier-terser is globally available on your system.

do you have an example how we pass options to the CLI version?

See the initial comment. It is also documented.

html-minifier-terser -o dist/index.html dist/index.html --remove-comments --collapse-whitespace --minify-js --minify-css

--remove-comments is for example an option.

Is your question related to this issue here? If not please try to open a new issue in the future to prevent that issues become offtopic.

[9mm]

Ah! I didn't realize it was a package command. So I need to run yarn html-minifier-terser instead and then it works.

If I do yarn install html-minifier-terser, I see it show up in package.json, but simply calling html-minifier-terser says no command found. I had to do yarn html-minifier-terser for it to see the command there, so maybe that's a difference between npm/yarn or something, I'm not sure.

Thanks for your help

[DanielRuf]

If I do yarn install html-minifier-terser, I see it show up in package.json, but simply calling html-minifier-terser says no command found. I had to do yarn html-minifier-terser for it to see the command there, so maybe that's a difference between npm/yarn or something, I'm not sure.

Not quite correct.

yarn html-minifier-terser runs the binary from ./node_modules/bin/html-minifier-terser. Same for npm.

You can only use html-minifier-terser directly in package.json scripts. If you want to use it ouside of this project, try npm i -g html-minifier-terser or yarn global add html-minifier-terser. After this you can run html-minifier-terser anywhere on your computer (even in bash scripts) if the binary paths from npm / yarn are in your global PATH variable.