Some issues

[vralle]

Hi there!

I decided to share the results of some experiments.

1. Minification can lead to unexpected results.
   I used the code base (CodeSpace / repo - issues branch) and build:edge script to compile projects\bootstrap.

I added to projects/bootstrap/webpack.edge.mjs some lines:

new HtmlBundlerPlugin({
      preload: [
        {
          test: /\.(m?js)$/,
          as: 'script',
        },
      ],

I try to get a preload tag for the script in projects/bootstrap/src/views/home.html

<script src="@src/js/app.js"></script>

But after compilation there is no preload tag.

If we turn off some options in @swc/html minimizer configuration (projects/bootstrap/configs/swcHtml.config.mjs), there'll be a preload tag after all.

-  quotes: false,
+  quotes: true,
-  tagOmission: true,
+  tagOmission: false,
}

I guess that the reason for this behavior is an error in parsing of minified code. I have already encountered behavior with unpredictable results when using my own PurgeCSS plugin for CSS. The compilation process completed without errors, but the result looked strange.
The problem was solved by changing the hook priority to a lower one.

compiler.hooks.compilation.tap(pluginName, (compilation) => {
      compilation.hooks.processAssets.tapPromise(
        {
          name: pluginName,
          // PurgeCss have some wrong result with minified styles, so run it before minification
          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE - 10,
        },
        (assets) => this.process(compiler, compilation, assets),
      );

[vralle]

2. Importing SVG: I had loved importing SVG in HTML/CSS, but I've had trouble importing SVG in JS. svg-url-loader has some conflicts. Is there a way to avoid base64 encoding of SVG in JS?

[webdiscus]

@vralle

3. we can't get escaping string, like in CSS.

what do you mean?
Like this?

background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0z' fill='none'/><path d='M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z'/></svg>");

[vralle]

Like this?

yes, but a data URI is still a URI. So we need to escape some characters <, >, #, (, ) in data part or use encodeURIComponent();. That's escaped after all)

I'm not aware of any errors with inline svg in HTML and CSS. I think the plugin handles that well.

[webdiscus]

a data URI is still a URI. So we need to escape some characters <, >, #, (, ) in data part or use encodeURIComponent();. That's escaped after all

you are right, all special characters should be escaped or encoded. In my current local version these characters are encoded, e.g.:

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248%22%20viewBox%3D%220%2096%20960%20960%22%20width%3D%2248%22%3E%3Cpath%20d%3D%22M480%20976%20120%20770V371l360-195%20360%20195v399L480%20976ZM366%20478q23-23%2052.5-37.5T480%20426q32%200%2061.5%2014.5T594%20478l153-90-267-142-267%20142%20153%2090Zm84%20412V723q-52-14-86-54t-34-93q0-11%201.5-22.5T337%20531l-157-93v297l270%20155Zm30-224q38%200%2064-26t26-64q0-38-26-64t-64-26q-38%200-64%2026t-26%2064q0%2038%2026%2064t64%2026Zm30%20224%20270-155V438l-157%2093q4%2011%205.5%2022.5T630%20576q0%2053-34%2093t-86%2054v167Z%22%2F%3E%3C%2Fsvg%3E

Let's continue the discussion in the issue.

[vralle]

As I know, you shouldn't escape spaces, only 5 characters. URI is still valid. But encodeURIComponent() follows standards and encode spaces too.

[webdiscus]

SVG content is already encoded by Webpack itself, if the asset encoding is not base64.