Parcel: 🙋 Make htmlnano configurable for production builds

[Pittan]

🤔 Expected Behavior

To be able to pass options to htmlnano. Just like https://github.com/parcel-bundler/parcel/issues/347 did.

{
    minifySvg: false
}

😯 Current Behavior

Not able to pass any options.

💁 Possible Solution

🔦 Context

My SVG file written in HTML is already optimized by svgo (but not to remove viewBox).
Using production build on parcel removes viewBox from SVGs.

[jamiebuilds]

There doesn't appear to be a standard config file for htmlnano

[Olian04]

@thejameskyle if htmlnano takes an options object in its constructor, we could use that as the configuration file pattern?

[devongovett]

We've been following this pattern for supported file names when a standard one isn't available: .htmlnanorc, .htmlnanorc.js.

[Pittan]

@devongovett Thank you!! You saved my life:)

[gurmukhp]

Hi,

Please can you share an example of how to ensure viewbox doesn't get removed?

[albertorestifo]

I too am incurring the same issue as @gurmukhp, any solution?

[fregante]

@gurmukhp @albertorestifo

I think you can change svgo's config by creating a .svgo.yml file in the folder where parcel runs. I think it would be:

plugins:
  - removeViewBox: false

Context: https://github.com/svg/svgo/issues/707#issuecomment-349844367

[ikniaziuk]

Just create .htmlnanorc file in the root folder of the project and write:

{
  minifySvg: false,
}

It will save viewbox attr.

[jaydickinson]

Doesn't work? anyone actually have a solution that works for this really frustrating just want to turn off the viewbox on minify...

tried creating the .htmlnanorc and adding
{ minifySvg: false, }

but nothing changes?

[coreyworrell]

Followup to @jaydickinson comment: adding that code to my .htmlnanorc does work for me now. But I can't seem to enable/disable plugins this way.. As far as my debugging goes, SVGO does receive the configuration correctly, but it still seems to strip the viewBox

{
  "minifySvg": {
    "plugins": [
      { "removeViewBox": false }
    ]
  }
}

[zremboldt]

@jaydickinson Remove the comma after false.
This worked for me!

{
  minifySvg: false
}

[hesselbom]

@jaydickinson I had the exact same problem. What solved it for me was to rm -rf .cache and then rebuilding.

[maxfahl]

Thank you @hesselbom. Can't believe I didn't try that earlier.

[WazzaMo]

When using parcel, to see the effect of adding .htmlnanorc.js you need to remove the .cache directory and do a full rebuild.
My .htmlnanorc.js is as follows:

module.exports = {
  "minifySvg": false
}

I confirmed that it was loaded by doing a console.log() in this .js file, and this only appeared after deleting the .cache and also that's when my SVG appeared correctly.