Scoped CSS for imported css file in script tag

[il6]

Is your feature request related to a problem? Please describe.

As far I explore, there are three ways to import external styles in a svelte file.

1. Inside <svelte:head>

<svelte:head>
    <link rel="stylesheet" href="static.css">`
</svelte:head>

2. Using css preprocessor import

<style lang="scss">
    @import "../app.scss" 
</style>

3. Inside Script tag

<script>
    import '../app.css';
</script>

The first and second method allow those styles specific to a page. But styles imported by the third method are not scoped.

How important is this feature to you?
Styles are fully scoped for internal css in svelte. But when we want to import styles from an external ".css" file using the javascript import, styles conflict with other components or pages. <svelte:head> is not a good solution because for that we need to place our style files inside static folder. Again if we don't want to use any css preprocessor then we have no alternative option to import styles from external files and remain them scoped in a specific page or component.

[babichjacob]

Have you looked into Vite's CSS modules support for a fourth option? https://vitejs.dev/guide/features.html#css-modules

[Rich-Harris]

Yep, you can either use Svelte's <style> for scoping, Vite's CSS modules, or bring your own solution.