Parcel: Removes ids from inline-svgs in pug

[Mobilpadde]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

{
  "devDependencies": {
    "autoprefixer": "^9.4.3",
    "parcel-bundler": "^1.10.3",
    "parcel-plugin-purgecss": "^2.1.0",
    "parcel-plugin-sitemap": "^2.0.1",
    "parcel-plugin-sw-precache": "^1.0.3",
    "pug": "^2.0.3",
    "stylus": "^0.54.5"
  }
}

🤔 Expected Behavior

Should not remove ids from svg when building pug files for prod; not dev.

EDIT: Works as supposed when --no-minify-flag is enabled?

😯 Current Behavior

Removes ids from svg when building pug files. But only svg.

PS. Only tried it with inline-svgs

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.11.0 |
| Node | 11.3.0 |
| Yarn | 1.12.3 |
| Operating System | 4.19.12-2-MANJARO |

[lustoykov]

Thanks for the report!

I've spent some time debugging, I think the issue is that htmlnano strips away the id from svg when minifying. Here is the relevant code in parcel. If we log asset.ast before and after the line, we could see the difference.

Here is a minimal example that isolates htmlnano.

[Mobilpadde]

Oh, thanks! :+1: Nice find!

Do you by any chance know a fix? :smiley_cat:

[mischnic]

@Mobilpadde
Add a .htmlnanorc file with

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

[Mobilpadde]

Thanks a ton, @mischnic! :dancer: Works like a charm :gem:

[thedamon]

This is really weird to track down (i had it happening for me from Vue svg files).

If we're talking good defaults (which is the point of parcel?) I feel this should not be the default for inlined svgs.

[mischnic]

If we're talking good defaults (which is the point of parcel?) I feel this should not be the default for inlined svgs.

[DeMoorJasper]

Might be good to open a PR in htmlnano for this.
The maintainer of htmlnano has been very open to improvements of the defaults in the past.

[npulidom]

Adding a .htmlnanorc file to skip svg inline minification works.

{
    "minifySvg": false
}

[egillespie]

If it appears that your .htmlnanorc file is being ignored, run Parcel with the --no-cache option.

[speigg]

This htmlnano package is breaking html-embedded SVG in various ways (changing styles/attributes, etc.). This doesn't seem like something that should be enabled by default.

[mischnic]

Note: for once, Parcel doesn't override the default of https://github.com/posthtml/htmlnano:
https://github.com/parcel-bundler/parcel/blob/2c65fbf911cd1d80fb121178e72148f53f474d61/packages/core/parcel-bundler/src/transforms/htmlnano.js#L7-L16

Maybe this should be fixed in htmlnano?

[speigg]

Or maybe switch to another html minimizer? Surely there are others that are more robust?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[BigPackie]

If it appears that your .htmlnanorc file is being ignored, run Parcel with the --no-cache option.

or just delete the ".cache" folder before building.

[vasanthdeveloper]

I deleted .parcel-cache and have --no-cache in both parcel serve and parcel build commands. Here's my .htmlnanorc 👇

{
    "removeUnusedCss": false,
    "minifySvg": false
}

But still, IDs are being stripped from inlined SVGs. 😕 It would be great if @lustoykov or @Mobilpadde could re-open the issue.