Image loader rules are ignored for S(CSS) #152

vralle · 2025-02-10T14:21:41Z

vralle
Feb 10, 2025

Hi!

We can use asset loader options for images: https://webpack.js.org/guides/asset-modules/

My webpack config have some loader rules for SVG:

module: {
  rules: [
    {
      test: /\.svg/i,
      type: "asset/inline",
      generator: {
        dataUrl: (/** @type {Buffer} */ content) => {
          console.log(content.toString());
          return svgToMiniDataURI(content.toString());
        },
      },
    },
    {
      test: /\.(jpe?g|ico|png|svg|webp)/i,
      type: "asset",
      parser: {
        dataUrlCondition(source, { filename }) {
          console.log(filename);

          // inline only svg
          if (/\.svg/i.test(filename)) {
            return Buffer.byteLength(source) <= 0 * 1024; // =maxSize: 2.5kb
          }

          return false;
        },
      },
    },
    {
      test: /\.s?css/i,
      use: [
        {
          loader: "css-loader",
          options: {
            importLoaders: 1,
            sourceMap: true,
          },
        },
        {
          loader: "sass-loader",
          options: {
            implementation: "sass-embedded",
            api: "modern-compiler", // 'modern-compiler' since sass-loader v14.2.0
            warnRuleAsWarning: true, // Treats the @warn rule as a webpack warning.
            sourceMap: true,
            sassOptions: {
              style: "expanded",
              quietDeps: true,
              silenceDeprecations: ["import"],
            },
          },
        },
      ],
    },
  ],
},

Important rules for images:

{
  test: /\.svg/i,
  type: "asset/inline",
  generator: {
    dataUrl: (/** @type {Buffer} */ content) => {
      console.log(content.toString());
      return svgToMiniDataURI(content.toString());
    },
  },
},
{
  test: /\.(jpe?g|ico|png|svg|webp)/i,
  type: "asset",
  parser: {
    dataUrlCondition(source, { filename }) {
      console.log(filename);
      // inline only svg
      if (/\.svg/i.test(filename)) {
        return Buffer.byteLength(source) <= 0;
      }
      return false;
    },
  },
},

generator.dataUrl - A custom encoder for inlining to data uri
parser.dataUrlCondition - a rule to inline assets. Now zero, but it for experiment.

I can try to import several SVG files into SCSS:
app.scss

.i-whatsapp::before {
  background-image: url("@src/img/icons/messengers/whatsapp.svg");
}

As a result of compilation I get an data-URI with SVG image in CSS file. But:
parser.dataUrlCondition - ignored
generator.dataUrl - ignored (SVG file was imported as a "asset/source")

I intentionally left console commands in the example configuration. The console output does not contain any image files imported into SCCS.

I found out that the sass-loader doesn't resolve import, but css-loader can import.

Any ideas to find out the reason why the loader rules are ignored? Now I don't even understand how to find out which loader is doing this.

Answered by vralle

Mar 17, 2025

Closed due to changes in v4.19

View full answer

webdiscus · 2025-02-10T17:11:26Z

webdiscus
Feb 10, 2025
Maintainer

@vralle

All works fine.

  module: {
    rules: [
      {
        test: /\.(css)$/,
        loader: 'css-loader',
      },

      {
        test: /\.svg/i,
        type: 'asset', // only by `asset` will be called the `dataUrlCondition()` function
        generator: {
          dataUrl: (content) => {
            console.log('SVG: ', content.toString());

            return 'data:image/svg+xml,' + content.toString();
          },
        },
        parser: {
          dataUrlCondition(source, { filename }) {
            console.log('parser: ', filename);

            return true; // IMPORTANT: only by return `true` will be called the `generator.dataUrl`
          },
        },
      },
      },
    ],
  },

In this example, I see outputs in console:

console.log
    parser:  /path/to/images/icon.svg

console.log
    SVG:  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0..."/></svg>

Check your images rules, you have two rules for svg.

0 replies

vralle · 2025-02-10T17:23:35Z

vralle
Feb 10, 2025
Author

@webdiscus, I've tried all)

Import from HTML and JS works perfect. But import SVG in SCSS lives its own uncontrolled life)

2 replies

webdiscus Feb 10, 2025
Maintainer

can you please provide your use case in a repo?

vralle Feb 10, 2025
Author

Sure! I can do it tomorrow. Sorry, I can't do it any faster.

vralle · 2025-02-11T07:44:46Z

vralle
Feb 11, 2025
Author

https://github.com/vralle/svg-data-uri-in-css

generator.dataUrl is Ok
parser.dataUrlCondition is Ok
Data URI for SVG icon in compiled CSS is not escaped (mini-svg-data-uri does).

1 reply

webdiscus Feb 17, 2025
Maintainer

@vralle

thanks for the repo.
Now I see, that svgToMiniDataURI(source.toString()) generate escaped string: data:image/svg+xml,%3csvg fill='none',
but in generated CSS is it not escaped: data:image/svg+xml,<svg fill='none'.

P.S. sorry for delay, I had a deadline at my fulltime job.

vralle · 2025-02-17T21:49:27Z

vralle
Feb 17, 2025
Author

As a result of compilation I get an data-URI with SVG image in CSS file. But:
parser.dataUrlCondition - ignored
generator.dataUrl - ignored (SVG file was imported as a "asset/source")
I intentionally left console commands in the example configuration. The console output does not contain any image files imported into SCCS.

I've caught that.

In my configuration the loaders use test:/\.svg/i, and in the SCSS the URLs for the SVG contained ?inline query. After I had removed query parameters, terminal has started printing all icons for all handlers) But what's wrong with test: /\.svg/i,?)

2 replies

webdiscus Feb 17, 2025
Maintainer

I found the bug in plugin.

The plugin check whether a generated Webpack Module includes the source property where should be the assets data (bin or svg).
If source is null then the plugin try to find the asset data in original source.
If used the custom generator, then module.source is null. For this special case must be used other way. I know how to fix it.

webdiscus Feb 17, 2025
Maintainer

@vralle

I fixed the issue when the SVG content modified via generator.dataUrl was ignored.

I have a question: why you will the SVG content to escape?
The plugin escape only reserved chars: " -> ' and # -> %23.
All other chars %{}<> should not be escaped. It works fine in all modern browsers.
Only for IE 9-11 must be escaped the "#%{}<> chars.

vralle · 2025-02-18T06:14:42Z

vralle
Feb 18, 2025
Author

All other chars %{}<> should not be escaped. It works fine in all modern browsers.

https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/data

If the data contains characters defined in RFC 3986 as reserved characters, or contains space characters, newline characters, or other non-printing characters, those characters must be percent-encoded.

I always strive to follow standards. Latest Bootstrap does the same for SVGs:
https://github.com/twbs/bootstrap/blob/669079dff60b3e7b51e89ed4013d1013152f0bb3/scss/_variables.scss#L358

And I'm convinced from my own experience that modern browsers are what developers have on their computers. If you look at user devices in the wild, you will quickly come across history, such as IE on corporate computers or Android 4 on someone's phone.

4 replies

webdiscus Feb 18, 2025
Maintainer

characters defined in RFC 3986 as reserved characters

Date: January 2005.

Today is not actual for modern browsers.

webdiscus Feb 18, 2025
Maintainer

Standard Reserved Characters (Per URL Encoding Rules)

According to RFC 3986, the following characters are reserved and require percent encoding when used in a URL:

! * ' ( ) ; : @ & = + $ , / ? # [ ]

However, for SVG as a data URL, only a subset of these are problematic:

{ → %7B
} → %7D
# → %23
% → %25

Modern Browser Behavior (Except IE)

Most modern browsers (Chrome, Firefox, Safari, Edge) support unescaped SVG data URLs if enclosed in quotes (data:image/svg+xml,"...").

Valid Minimal Encoding

<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><text x="10" y="25" fill="black">%7BHello%23World%25%7D</text><path d="M10 10 L90 10 L90 40 L10 40 Z" stroke="black" fill="none"/></svg>'>

Why is used "Minimal Encoding"?

Only essential characters #%{} are encoded.
< > remain unencoded because browsers correctly parse them in an inline block.
Does not use unnecessary full percent encoding, making it compact.

vralle May 29, 2025
Author

Standard Reserved Characters (Per URL Encoding Rules)

According to RFC 3986, the following characters are reserved and require percent encoding when used in a URL:
! * ' ( ) ; : @ & = + $ , / ? # [ ]
However, for SVG as a data URL, only a subset of these are problematic:
{ → %7B
} → %7D
# → %23
% → %25
Modern Browser Behavior (Except IE)

Most modern browsers (Chrome, Firefox, Safari, Edge) support unescaped SVG data URLs if enclosed in quotes (data:image/svg+xml,"...").

Valid Minimal Encoding
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><text x="10" y="25" fill="black">%7BHello%23World%25%7D</text><path d="M10 10 L90 10 L90 40 L10 40 Z" stroke="black" fill="none"/></svg>'>
Why is used "Minimal Encoding"?

Only essential characters #%{} are encoded.

< > remain unencoded because browsers correctly parse them in an inline block.

Does not use unnecessary full percent encoding, making it compact.

I caught some pain and found out Vite's experience:

If the SVG contains some text or HTML, any transformation is unsafe, and given that double quotes would then need to be escaped, the gain to use a data URI would be ridiculous if not negative

Spaces are not valid in srcset

See svgToDataURL

webdiscus May 29, 2025
Maintainer

The plugin already uses the encodeURIComponent() function to encode SVG.

vralle · 2025-02-18T16:00:48Z

vralle
Feb 18, 2025
Author

If we are discussing the import of SVG, then I believe that the decision should be made by the developer based on the specific task. I would like to know the reason why Webpack options are ignored.

7 replies

webdiscus Feb 18, 2025
Maintainer

Does the plugin manipulate SVGs after Webpack handlers?

yes/no, for some use cases as above, e.g.:

<img src="@images/logo.svg?inline" class="my-image" alt="home" style="border: 1px solid red;">

In generated HTML, the inlined in DOM SVG will contains original image attributes:

<svg class="my-image" alt="home" style="border: 1px solid red;" ...>...</svg>

As you can see, the plugin must decode SVG content to get SVG-tag attributes, SVG-body.

For the inlined dataURI in CSS the plugin doesn't modify the SVG source, but decode -> parse -> encode.

vralle Feb 18, 2025
Author

In generated HTML, the inlined in DOM SVG will contains original image attributes

In your example, should SVG be imported as data URI, and not raw?

vralle Feb 18, 2025
Author

II was sure that inline =data URI (base64/escaped svg) = generator.dataUrl
If we import the file body, it is raw query =fs.readFile()

webdiscus Feb 18, 2025
Maintainer

Defaults, in HTML will be inlined SVG as tag, not as dataURI, see please the test case inline-all-asset-to-html.

The source HTML:

<head>
    <title>Test</title>
    <link href="@images/favicons/favicon.svg" rel="icon" type='image/svg+xml' sizes='any' />
</head>
<body>
    <img src="@images/icons/iphone.svg">
</body>

The generated HTML:

<head>  
    <title>Test</title>
    <link href="data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M16 0C7.16 0 0 7.16 0 16C0 23.08 4.58 29.06 10.94 31.18C11.74 31.32 12.04 30.84 12.04 30.42C12.04 30.04 12.02 28.78 12.02 27.44C8 28.18 6.96 26.46 6.64 25.56C6.46 25.1 5.68 23.68 5 23.3C4.44 23 3.64 22.26 4.98 22.24C6.24 22.22 7.14 23.4 7.44 23.88C8.88 26.3 11.18 25.62 12.1 25.2C12.24 24.16 12.66 23.46 13.12 23.06C9.56 22.66 5.84 21.28 5.84 15.16C5.84 13.42 6.46 11.98 7.48 10.86C7.32 10.46 6.76 8.82 7.64 6.62C7.64 6.62 8.98 6.2 12.04 8.26C13.32 7.9 14.68 7.72 16.04 7.72C17.4 7.72 18.76 7.9 20.04 8.26C23.1 6.18 24.44 6.62 24.44 6.62C25.32 8.82 24.76 10.46 24.6 10.86C25.62 11.98 26.24 13.4 26.24 15.16C26.24 21.3 22.5 22.66 18.94 23.06C19.52 23.56 20.02 24.52 20.02 26.02C20.02 28.16 20 29.88 20 30.42C20 30.84 20.3 31.34 21.1 31.18C27.42 29.06 32 23.06 32 16C32 7.16 24.84 0 16 0V0Z' fill='%2324292E'/> </svg>" rel="icon" type='image/svg+xml' sizes='any' />
  </head>
<body>
    <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>
</body>

Any binary image will be inlined as dataURI.

vralle Feb 18, 2025
Author

Maybe if we import SVG as an HTML element using the "raw" query (which makes more sense), we can fix the encoding in data URI?

vralle · 2025-02-19T20:28:01Z

vralle
Feb 19, 2025
Author

@webdiscus, I have created two issues related to SVG import. I'm currently experiencing some overload, so I would like to have more time to find the right solution.

3 replies

webdiscus Feb 19, 2025
Maintainer

@vralle, No problem, I'm busy now too, but I'll try to fix the problems over the weekend.

vralle Feb 20, 2025
Author

@webdiscus, if I understand the problem correctly, the SVG import is deeply in the plugin core and is tied to imports of other modules. I think the changes can take as long as it takes for critical changes.

webdiscus Feb 20, 2025
Maintainer

For me it's not difficult. All the necessary functions are already in the plugin core. I only need to add a new plugin option for svg for more control over SVG.

vralle · 2025-03-17T06:33:57Z

vralle
Mar 17, 2025
Author

Closed due to changes in v4.19

0 replies

Uh oh!

Image loader rules are ignored for S(CSS) #152

Uh oh!

Uh oh!

vralle Feb 10, 2025

Replies: 8 comments · 19 replies

Uh oh!

webdiscus Feb 10, 2025 Maintainer

Uh oh!

vralle Feb 10, 2025 Author

Uh oh!

webdiscus Feb 10, 2025 Maintainer

Uh oh!

vralle Feb 10, 2025 Author

Uh oh!

Uh oh!

vralle Feb 11, 2025 Author

Uh oh!

webdiscus Feb 17, 2025 Maintainer

Uh oh!

Uh oh!

vralle Feb 17, 2025 Author

Uh oh!

Uh oh!

webdiscus Feb 17, 2025 Maintainer

Uh oh!

Uh oh!

webdiscus Feb 17, 2025 Maintainer

Uh oh!

Uh oh!

vralle Feb 18, 2025 Author

Uh oh!

Uh oh!

webdiscus Feb 18, 2025 Maintainer

Uh oh!

webdiscus Feb 18, 2025 Maintainer

Standard Reserved Characters (Per URL Encoding Rules)

Modern Browser Behavior (Except IE)

Valid Minimal Encoding

Why is used "Minimal Encoding"?

Uh oh!

vralle May 29, 2025 Author

Standard Reserved Characters (Per URL Encoding Rules)

Modern Browser Behavior (Except IE)

Valid Minimal Encoding

Why is used "Minimal Encoding"?

Uh oh!

webdiscus May 29, 2025 Maintainer

Uh oh!

vralle Feb 18, 2025 Author

Uh oh!

Uh oh!

webdiscus Feb 18, 2025 Maintainer

Uh oh!

Uh oh!

vralle Feb 18, 2025 Author

Uh oh!

Uh oh!

vralle Feb 18, 2025 Author

Uh oh!

Uh oh!

webdiscus Feb 18, 2025 Maintainer

Uh oh!

Uh oh!

vralle Feb 18, 2025 Author

Uh oh!

vralle
Feb 10, 2025

Replies: 8 comments 19 replies

webdiscus
Feb 10, 2025
Maintainer

vralle
Feb 10, 2025
Author

webdiscus Feb 10, 2025
Maintainer

vralle Feb 10, 2025
Author

vralle
Feb 11, 2025
Author

webdiscus Feb 17, 2025
Maintainer

vralle
Feb 17, 2025
Author

webdiscus Feb 17, 2025
Maintainer

webdiscus Feb 17, 2025
Maintainer

vralle
Feb 18, 2025
Author

webdiscus Feb 18, 2025
Maintainer

webdiscus Feb 18, 2025
Maintainer

vralle May 29, 2025
Author

webdiscus May 29, 2025
Maintainer

vralle
Feb 18, 2025
Author

webdiscus Feb 18, 2025
Maintainer

vralle Feb 18, 2025
Author

vralle Feb 18, 2025
Author

webdiscus Feb 18, 2025
Maintainer

vralle Feb 18, 2025
Author