Importing .css file with sourceMappingURL in dynamic route causes the .map file to appear in params

[camargo]

Describe the bug

When importing a .css file that includes a sourceMappingURL in a Svelte Kit dynamic route, this causes the .map file to appear in the dynamic route parameter when using the dev server.

Reproduction

Create a new empty Svelte Kit project:

mkdir my-app
cd my-app
npm init svelte@next

✔ Where should we create your project?
✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? Yes
✔ Add ESLint for code linting? Yes
✔ Add Prettier for code formatting? Yes
✔ Add Playwright for browser testing? No

npm install
npm install bootstrap --save-dev # Will use this to reproduce the issue

Create a new route with a dynamic parameter stuff/[id]:

.
└── routes
    └── stuff
        └── [id].svelte

Add this code to [id].svelte:

<script lang="ts" context="module">
    import type { Load } from '@sveltejs/kit';
    import 'bootstrap/dist/css/bootstrap-utilities.css';

    export const load: Load = async ({ params }) => {
        console.log('params: ', params);
        return {};
    };
</script>

Start the dev server:

npm run dev

Goto http://localhost:3000/stuff/hi. Save [id].svelte to see the issue in the logs. bootstrap-utilities.css.map is being added to the params under the id field.

Logs

Server:

params: { id: 'hi' }
params: { id: 'bootstrap-utilities.css.map' }

Client:

params:  {}

System Info

System:
  OS: macOS 11.6.4
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 135.84 MB / 16.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 16.13.1 - /usr/local/Cellar/node@16/16.13.1/bin/node
  Yarn: 1.22.17 - /usr/local/bin/yarn
  npm: 8.1.2 - /usr/local/Cellar/node@16/16.13.1/bin/npm
Browsers:
  Chrome: 98.0.4758.109
  Edge: 98.0.1108.62
  Firefox: 95.0.2
  Safari: 15.3
npmPackages:
  @sveltejs/adapter-auto: next => 1.0.0-next.30 
  @sveltejs/kit: next => 1.0.0-next.288 
  svelte: ^3.44.0 => 3.46.4

Severity

annoyance

Additional Information

No response

[baseballyama]

This occurs only when the developer tools are open.
When the developer tools fetch the source map of bootstrap/dist/css/bootstrap-utilities.css, the browser sends a GET request to http://localhost:3000/stuff/bootstrap-utilities.css.map because the source map location is /*# sourceMappingURL=bootstrap-utilities.css.map */.
https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css#L11266
Then the path is matched to [id].svelte.

In fact, the source map is located at http://localhost:3000/node_modules/bootstrap/dist/css/bootstrap-utilities.css.map, so the location of the source map should be /*# sourceMappingURL=/node_modules/bootstrap/dist/css/bootstrap-utilities.css.map */.

I'm not familiar with VIte, but I think this is Vite's job.
I would like to hear from someone who is familiar with Vite.

[bluwy]

Yeah this seems that it could be a Vite issue, maybe vitejs/vite#2830. The /*# sourceMappingURL=bootstrap-utilities.css.map */ is correct though, but I'm not sure why the browser is fetching relatively from localhost:3000, rather than relative from /node_modules/bootstrap/dist/css/bootstrap-utilities.css.

Here's a stackblitz link for a vite app only.

[benmccann]

Maybe we will keep an eye on vitejs/vite#7173 and see if it behaves any differently after that is merged

[lunacd]

Can no longer reproduce with v1.0.0-next.355. Probably fixed by vitejs/vite#7173 as above.