🐛 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
🤔 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 |
🐛 bug report
Applying
@parcel/transformer-svgon an HTML-file with inline styles breaks a subsequent@parcel/transformer-csscall.🎛 Configuration (.babelrc, package.json, cli command)
I tried to find an MVE on the issue and so far reduced to this
package.json.parcelrctest.htmlCLI command
🤔 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.
💁 Possible Solution
Not a solution, but an observation:
@parcel/transformer-svgseems 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).@parcel/transformer-csstries to do the same, but this time only retrieves the previous key, which then fails once it is passed topostcssfor 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-svgfrom the.parcelrcthe inline-style works just fine, but the image is not processed.Adding
@parcel/transformer-svgand removing the inline style works just fine and the image is processed as expected.But the combination of both (adding
@parcel/transformer-svgand using inline style) breaks parcel it seems.💻 Code Sample
All necessary code is attached above.
🌍 Your Environment