[turbopack]: Can't specify issuer with @svgr/webpack loader, causes invalid url transformation in css

[MaciejWiatr]

Link to the code that reproduces this issue

https://github.com/MaciejWiatr/svgr-nextjs-css-url-repro

To Reproduce

1. Create new nextjs app with turbopack enabled for dev server (next dev --turbo)
2. Add @svgr/webpack as an dependency and loader to nextjs config like the following

   /** @type {import('next').NextConfig} */
   const nextConfig = {
   reactStrictMode: true,
   experimental: {
   turbo: {
     rules: {
       "*.svg": {
         loaders: ["@svgr/webpack"],
         as: "*.js",
       },
     },
   },
   },
   };

3. Install external library that utilizes css svg url imports, i.e flag-icons npm install flag-icons ( i will use it as an example for next steps)
4. Add html element: <span className="fi fi-gr"></span>
5. Start development server npm run dev
6. Inspect generated css:
7. Notice the invalid svg -> js transformation and missing flag icon in the page itself

Current vs. Expected behavior

Current behavior: Svgr transforms all svg imports to js files breaking ones in css Expected: I should be able to specify what files and when are transformed via i.e issuer. This is possible in webpack-land and svgr has a documented way of avoiding this bug: https://react-svgr.com/docs/webpack/#use-svg-in-css-files

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
  Available memory (MB): 32713
  Available CPU cores: 12
Binaries:
  Node: 22.2.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.15 // Latest available version is detected (14.2.15).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:
  output: N/A

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

Developer Experience, Turbopack, Webpack

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

next dev (local)

Additional context

No response

[kiruthikpurpose]

That's hawkeye! Good observation.