https://github.com/ryoppippi/svelte-preprocess-import-css

This is a Svelte preprocessor that allows you to import scoped CSS files into your Svelte components.
https://github.com/ryoppippi/svelte-preprocess-import-css

svelte svelte-preprocess svelte-preprocessor

Last synced: about 18 hours ago
JSON representation

This is a Svelte preprocessor that allows you to import scoped CSS files into your Svelte components.

• Host: GitHub
• URL: https://github.com/ryoppippi/svelte-preprocess-import-css
• Owner: ryoppippi
• License: mit
• Created: 2024-08-01T14:44:40.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-18T09:05:33.000Z (7 days ago)
• Last Synced: 2024-09-18T14:54:16.437Z (7 days ago)
• Topics: svelte, svelte-preprocess, svelte-preprocessor
• Language: TypeScript
• Homepage: https://jsr.io/@ryoppippi/svelte-preprocess-import-css
• Size: 34.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-preprocess-import-css

[![JSR](https://jsr.io/badges/@ryoppippi/svelte-preprocess-import-css)](https://jsr.io/@ryoppippi/svelte-preprocess-import-css)

[![JSR](https://jsr.io/badges/@ryoppippi/svelte-preprocess-import-css/score)](https://jsr.io/@ryoppippi/svelte-preprocess-import-css)

This is a Svelte preprocessor that allows you to import scoped CSS files into your Svelte components.

Based on [this issue](https://github.com/sveltejs/svelte/issues/7125#issuecomment-1528965643)

## Usage

You can add it to your `svelte.config.js`, then add it to the preprocessor list:

```js

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:

```svelte

@import "./a.css" scoped;

@import "./b.css" scoped;

.another-style { display: block }

```

will get converted into:

```svelte

contents of a.css will be here

contents of b.css will be here

.another-style { display: block }

```

### Select Style Rules by Query Selector

You can select style rules by query selector.

For example, the following CSS and Svelte:

```css

/* a.css */

div { color: red; }

.message { color: blue; }

```

```svelte

 hello 

 world 


@import "./a.css?.message" scoped;

div { color: green; }

```

will get converted into:

```svelte

 hello 

 world 


.message { color: blue; }

div { color: green; }

```

### Rename Style Rules by Query Selector

You can rename style rules by query selector.

For example, the following CSS and Svelte:

```css

/* a.css */

div { color: red; }

.m0 { color: blue; }

```

```svelte

 world 


@import "./a.css?.m0=.m1" scoped;

div { color: green; }

```

will get converted into:

```svelte

 world 


.m1 { color: blue; }

div { color: green; }

```

## License

[MIT](./LICENSE)