@parcel/transformer-svg and @parcel/transformer-css clashing over CSS inline styles #7479

SirkoS · 2021-12-22T18:18:14Z

🐛 bug report

Applying @parcel/transformer-svg on an HTML-file with inline styles breaks a subsequent @parcel/transformer-css call.

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

I tried to find an MVE on the issue and so far reduced to this

package.json

{
  "name": "parcel-test",
  "version": "0.1.0",
  "description": "",
  "scripts": {
    "build": "npx parcel build test.html --no-source-maps --public-url ./ --no-cache"
  },
  "keywords": [],
  "license": "MIT",
  "dependencies": {
    "parcel": "^2.0.1"
  },
  "devDependencies": {
    "@parcel/config-default": "^2.0.1",
    "@parcel/transformer-svg": "^2.0.1"
  }
}

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.html": ["@parcel/transformer-svg", "..." ]
  },
}

test.html

<!doctype html>
<html>
<body>
  <h3>test</h3>
  <svg>
    <image href="./gfx/architecture/kicktipp.png" x="150" style="width: 300px" />
  </svg>
</body>
</html>

CLI command

npm run build

🤔 Expected Behavior

Both the image as well as the inline CSS are processed and optimized.

😯 Current Behavior

Instead the above example result in the following error message - no output being generated.

> parcel-test@0.1.0 build
> npx parcel build test.html --no-source-maps --public-url ./ --no-cache

× Build failed.

@parcel/transformer-css: S:\tmp\parcel\test.html:1:1: Unknown word

  CssSyntaxError: S:\tmp\parcel\test.html:1:1: Unknown word
  at Input.error (S:\tmp\parcel\node_modules\.pnpm\postcss@8.4.5\node_modules\postcss\lib\input.js:148:16)
  at Parser.unknownWord (S:\tmp\parcel\node_modules\.pnpm\postcss@8.4.5\node_modules\postcss\lib\parser.js:522:22)
  at Parser.other (S:\tmp\parcel\node_modules\.pnpm\postcss@8.4.5\node_modules\postcss\lib\parser.js:149:12)
  at Parser.parse (S:\tmp\parcel\node_modules\.pnpm\postcss@8.4.5\node_modules\postcss\lib\parser.js:59:16)
  at Function.parse (S:\tmp\parcel\node_modules\.pnpm\postcss@8.4.5\node_modules\postcss\lib\parse.js:11:12)
  at Object.parse (S:\tmp\parcel\node_modules\.pnpm\@parcel+transformer-css@2.0.1\node_modules\@parcel\transformer-css\lib\CSSTransformer.js:116:35)
  at async Transformation.runTransformer (S:\tmp\parcel\node_modules\.pnpm\@parcel+core@2.0.1\node_modules\@parcel\core\lib\Transformation.js:601:17)
  at async Transformation.runPipeline (S:\tmp\parcel\node_modules\.pnpm\@parcel+core@2.0.1\node_modules\@parcel\core\lib\Transformation.js:366:36)
  at async Transformation.runPipelines (S:\tmp\parcel\node_modules\.pnpm\@parcel+core@2.0.1\node_modules\@parcel\core\lib\Transformation.js:244:40)
  at async Transformation.runPipelines (S:\tmp\parcel\node_modules\.pnpm\@parcel+core@2.0.1\node_modules\@parcel\core\lib\Transformation.js:287:34)

💁 Possible Solution

Not a solution, but an observation:

@parcel/transformer-svg seems to already move inline CSS to a separate asset in order to optimize. The specific occurrence is replaced with a key to later substitute again for the optimized CSS (I guess).
However, @parcel/transformer-css tries to do the same, but this time only retrieves the previous key, which then fails once it is passed to postcss for parsing.

🔦 Context

I'm trying to package an HTML file with quite mixed content (actually derived from a reveal.js presentation).

If I remove @parcel/transformer-svg from the .parcelrc the inline-style works just fine, but the image is not processed.
Adding @parcel/transformer-svg and removing the inline style works just fine and the image is processed as expected.

But the combination of both (adding @parcel/transformer-svg and using inline style) breaks parcel it seems.

💻 Code Sample

All necessary code is attached above.

🌍 Your Environment

Software	Version(s)
Parcel	2.0.1
Node	16.3.0
npm	7.5.1
pnpm	6.24.2
Operating System	Windows 10

The text was updated successfully, but these errors were encountered:

folknor · 2021-12-23T14:45:22Z

It might be a naive question but can I ask why you're using transformer-svg on a HTML file? I have several projects with SVG embedded in the HTML and I've never done that. Parcel automatically installs optimizer-svgo for me, so I presume it's doing something to process the inline SVGs.

SirkoS · 2021-12-23T19:26:04Z

It might be a naive question but can I ask why you're using transformer-svg on a HTML file?

As I mentioned, without @parcel/transformer-svg the images referenced within the SVG are not recognized and thus are not part of the result in /dist.

Maybe I'm doing something else wrong, but this seems like a bug (somewhere) to me.

folknor · 2021-12-23T20:31:58Z

Indeed, I did not read the "Context" part of your description - my mistake.

I can confirm that parcel nightly does not process image references in SVG elements, tested using

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
	<image href="images/image.jpg?width=200&quality=40" height="200" width="200" />
</svg>

When served or built using parcel without transformer-svg, the resulting HTML is exactly the same as the input.

mischnic · 2021-12-24T22:31:58Z

Running @parcel/transformer-svg on HTML is definitely not the intended setup

So <image> tags in HTML not being detected as dependencies is a feature request/bug. (And the workaround you tried apparently doesn't work)

Shinyaigeek · 2021-12-25T11:20:08Z

https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/html/src/dependencies.js#L8-L28

In collecting HTML dependencies, it supports the xlink: href of the image tag, SVG 1.1 notation, so it seems reasonable to support the href of the image tag, which is the SVG2 notation.

Simply it is a tiny fix, only to add "image" to ATTRS.href in the code I'm quoting. I will send PR.

(By the way, the href of the image tag is supported when collecting the dependencies in svg)

Shinyaigeek mentioned this issue Dec 25, 2021

Feature: support href attribute in <image /> in collecting dependencies in HTMLTransformer #7482

Merged

3 tasks

mischnic linked a pull request Dec 25, 2021 that will close this issue

Feature: support href attribute in <image /> in collecting dependencies in HTMLTransformer #7482

Merged

3 tasks

devongovett closed this as completed in #7482 Dec 25, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@parcel/transformer-svg and @parcel/transformer-css clashing over CSS inline styles #7479

@parcel/transformer-svg and @parcel/transformer-css clashing over CSS inline styles #7479

SirkoS commented Dec 22, 2021 •

edited

folknor commented Dec 23, 2021

SirkoS commented Dec 23, 2021

folknor commented Dec 23, 2021

mischnic commented Dec 24, 2021

Shinyaigeek commented Dec 25, 2021 •

edited

@parcel/transformer-svg and @parcel/transformer-css clashing over CSS inline styles #7479

@parcel/transformer-svg and @parcel/transformer-css clashing over CSS inline styles #7479

Comments

SirkoS commented Dec 22, 2021 • edited

🐛 bug report

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

folknor commented Dec 23, 2021

SirkoS commented Dec 23, 2021

folknor commented Dec 23, 2021

mischnic commented Dec 24, 2021

Shinyaigeek commented Dec 25, 2021 • edited

SirkoS commented Dec 22, 2021 •

edited

Shinyaigeek commented Dec 25, 2021 •

edited