This is a Svelte preprocessor that allows you to import scoped CSS files into your Svelte components. Based on this issue
You can add it to your svelte.config.js, then add it to the preprocessor list:
import { importCSSPreprocess } from '@ryoppippi/svelte-preprocess-import-css'; export default { preprocess: [ importCSSPreprocess(), // <-- svelteAutoPreprocess(), ], };Now you can use @import "./whatever.css" scoped;.
For example, the following CSS:
<style> @import "./a.css" scoped; @import "./b.css" scoped; .another-style { display: block } </style>will get converted into:
<style> contents of a.css will be here contents of b.css will be here .another-style { display: block } </style>You can select style rules by query selector.
For example, the following CSS and Svelte:
/* a.css */ div { color: red; } .message { color: blue; }<div> hello </div> <p class="message"> world </p> <style> @import "./a.css?.message" scoped; div { color: green; } </style>will get converted into:
<div> hello </div> <p class="message"> world </p> <style> .message { color: blue; } div { color: green; } </style>You can rename style rules by query selector.
For example, the following CSS and Svelte:
/* a.css */ div { color: red; } .m0 { color: blue; }<p class="m1"> world </p> <style> @import "./a.css?.m0=.m1" scoped; div { color: green; } </style>will get converted into:
<p class="m1"> world </p> <style> .m1 { color: blue; } div { color: green; } </style>