Skip to content
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

Jump to bottom

🐛"build" breaks dependencies detection in <svg><use/> #1019

Closed
fregante opened this issue Mar 18, 2018 · 3 comments
Closed

🐛"build" breaks dependencies detection in <svg><use/> #1019

fregante opened this issue Mar 18, 2018 · 3 comments
Labels
🐛 Bug ✔️ Confirmed Bug SVG

Comments

@fregante
Copy link
Contributor

fregante commented Mar 18, 2018 •
edited
Loading

Choose one: is this a 🐛 bug report or 🙋 feature request?

🐛Bug

SVG files linked with <use> are detected correctly with parcel watch but they're left untouched when using parcel build.

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

No config

<!-- index.html -->
<!DOCTYPE html>
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
	<use xlink:href="file.svg#all"/>
</svg>
<!-- file.svg -->
<svg xmlns="http://www.w3.org/2000/svg" id="all"><rect x="0" y="0" width="100" height="100"/></svg>
parcel watch --no-cache
parcel build --no-cache

🤔 Expected Behavior

The linked SVG is detected and processed.

<!-- index.html -->
<!DOCTYPE html><svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="/dist/fe03c3efee964b0b65876cb335d8782f.svg#all"></use></svg>

So two files should be generated.

$ tree dist
dist
├── e4746ad4854ea1f42b9990e63012fe62.html
└── fe03c3efee964b0b65876cb335d8782f.svg

0 directories, 2 files

This works correctly in parcel watch

😯 Current Behavior

The use tag in the index.html is left untouched:

<!DOCTYPE html><svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="file.svg#all"/></svg>

And only one file is generated:

$ ./node_modules/.bin/parcel build --no-cache
✨  Built in 1.06s.

dist/e4746ad4854ea1f42b9990e63012fe62.html    102 B    1.00s

$ tree dist
dist
└── e4746ad4854ea1f42b9990e63012fe62.html

0 directories, 1 file

💻 Code Sample

# create the two files
$ echo '<!DOCTYPE html><svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="file.svg#all"/></svg>' > index.html
'<svg xmlns="http://www.w3.org/2000/svg" id="all"><rect x="0" y="0" width="100" height="100"/></svg>'
$ echo '<svg xmlns="http://www.w3.org/2000/svg" id="all"><rect x="0" y="0" width="100" height="100"/></svg>' > file.svg

# build creates one file
$ parcel build

# watch creates 2 files
$ parcel watch

🌍 Your Environment

Software Version(s)
Parcel 1.6.2
Node 5.6.0
npm/Yarn 5.7.1
Operating System macOS 10.13.3
@fregante
Copy link
Contributor Author

Interim solution: create a .htmlnanorc file

{
	minifySvg: false
}

@DeMoorJasper
Copy link
Member

DeMoorJasper commented Mar 18, 2018 •
edited
Loading

After some investigating it appears htmlnano transforms svg's ast into a minified content string:
Before HTMLnano

{
  "tag": "svg",
  "attrs": {
    "xmlns:xlink": "http://www.w3.org/1999/xlink"
  },
  "content": [
    "\n    ",
    {
      "tag": "use",
      "attrs": {
        "xlink:href": "./file.svg#all"
      }
    },
    "\n  "
  ]
}

After HTMLnano

{
  "tag": false,
  "attrs": {},
  "content": "<svg xmlns:xlink=\"http://www.w3.org/1999/xlink\"><use xlink:href=\"./file.svg#all\"/></svg>"
}

Not sure how to get past this from within parcel, as htmlnano executes before the ast walker

@DeMoorJasper DeMoorJasper mentioned this issue Mar 18, 2018
Merged
@davidnagli davidnagli added the SVG label Mar 19, 2018
@fregante
Copy link
Contributor Author

Thank you!

@siamkreative siamkreative mentioned this issue Nov 24, 2018
Closed
rishubil added a commit to rishubil/TrickyTowersUtils that referenced this issue Mar 3, 2019
@rishubil
Prevent minify svg things on build
d5cfacc 
See parcel-bundler/parcel#1019
toreylittlefield added a commit to toreylittlefield/Drag-Drop-Vanilla-JavaScript that referenced this issue Aug 5, 2021
@toreylittlefield
add workaround for svg parcel-bundler/parcel#1019
93a0995
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug ✔️ Confirmed Bug SVG
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@fregante @DeMoorJasper @davidnagli