Skip to content

CSS url() imports resolve incorrectly when using matchResource (!=!) with mini-css-extract-plugin #91984

@Mad-Kat

Description

@Mad-Kat

Link to the code that reproduces this issue

DigitecGalaxus/next-yak#515

To Reproduce

  1. Create a webpack loader that uses matchResource (!=!) syntax to emit CSS through mini-css-extract-plugin
  2. Include a CSS url() reference to a relative asset (e.g. url(./image.png))
  3. Build with next build --webpack
  4. The url() path resolves against the wrong directory, resulting in broken asset references

Current vs. Expected behavior

Current: mini-css-extract-plugin's importModule ignores the matchResource from !=! requests, causing CSS url() imports to resolve against the original file's context instead of the matchResource path.

Expected: importModule should use the matchResource path for resolution, matching how webpack handles !=! requests elsewhere.

Fixed upstream in webpack/mini-css-extract-plugin#1162 (v2.10.2).

Provide environment information

N/A

Which area(s) are affected? (Select all that apply)

Webpack

Which stage(s) are affected? (Select all that apply)

next build (local), next dev (local)

Additional context

The bundled mini-css-extract-plugin is at v2.4.4. The fix landed in v2.10.2.
This blocks any webpack loader using matchResource to emit CSS with relative url() references.

A PR to update the bundled version will follow.

Metadata

Metadata

Assignees

No one assigned

    Labels

    WebpackRelated to Webpack with Next.js.

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions