Css not getting imported

[soerenmeier]

Describe the bug

Today i ran into a weird behaviour, which took a few minutes to debug, my folder structure:

• keyboard.svelte
• keyboard.js
• keyboard.css

Where the js file is a custom dom component which is styled in keyboard.css, then everything is nicely packed into a svelte component in keyboard.svelte. but importing the style with import './keyboard.css'; in keyboard.svelte or keyboard.js did nothing. After digging around a bit i found that svelte gives the css/styles inside keyboard.svelte the id: './keyboard.css' (in the plugin transform call). rollup-plugin-css-only then skip's my file keyboard.css entirely. After renaming it everything works as expected. Would be nice if svelte would rename the id if a file already exists with that name or at least show a warning.

Reproduction

Create a svelte component and a css file with the same name for example:

• component.svelte
• component.css

Then import the css in component.svelte.

Logs

No warning or error.

System Info

System:
    OS: Linux 5.13 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 18.93 GB / 31.27 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 17.3.1 - /usr/bin/node
    npm: 8.3.0 - /usr/bin/npm
  Browsers:
    Chromium: 98.0.4758.80
    Firefox: 96.0
  npmPackages:
    rollup: ^2.3.4 => 2.66.1 
    svelte: ^3.0.0 => 3.46.3

Severity

annoyance

[crisward]

Not sure if this is related, but has a similar issue with the css build step breaking. This only started to happen after upgrading to svelte 4.*

We had a number of modules imported that had the same prefix of cpd-. When I moved these to a subfolder called cpd, and removed the prefixes the css compiled as normal. I have not had chance to create a minimal reproduction, but it does sound like a similar issue to that above.

Filenames

cpd-activities.svelte
cpd-activity-modal.svelte
cpd-checklist.svelte
cpd-job.svelte
cpd-stores.js
cpd-summary.svelte
cpd.svelte
cpd-work.svelte

Modules

{
 "@rollup/plugin-commonjs": "^25.0.5",
    "@rollup/plugin-json": "^6.0.1",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "rollup": "^4.0.2",
    "rollup-plugin-import-css": "^3.3.5",
    "rollup-plugin-inject-process-env": "^1.3.1",
    "rollup-plugin-output-manifest": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.6",
    "svelte": "^4.2.1"
}

[benmccann]

I'd highly recommend using Vite rather than Rollup for anything involving CSS

[crisward]

I'd highly recommend using Vite rather than Rollup for anything involving CSS

I thought vite used rollup? We use esbuild in dev, rollup for production. Also this is called rollup-plugin-svelte and rollup is developed by the people who developed svelte, so I'd expect this to work. Suggesting using another tool seems odd in this scenario. We're also using these build tools in 50+ projects, so switching them isn't trivial.

Are there plans to deprecate rollup?