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

use css modules in svelte
https://github.com/ryoppippi/svelte-preprocess-css-mods

css-modules cssmodules svelte svelte-preprocessor sveltekit

Last synced: about 16 hours ago
JSON representation

use css modules in svelte

• Host: GitHub
• URL: https://github.com/ryoppippi/svelte-preprocess-css-mods
• Owner: ryoppippi
• License: mit
• Created: 2024-08-06T10:14:55.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-23T11:23:27.000Z (1 day ago)
• Last Synced: 2024-09-23T14:31:07.040Z (1 day ago)
• Topics: css-modules, cssmodules, svelte, svelte-preprocessor, sveltekit
• Language: TypeScript
• Homepage:
• Size: 423 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-preprocess-css-mods

[![npm version](https://img.shields.io/npm/v/svelte-preprocess-css-mods?color=yellow)](https://npmjs.com/package/svelte-preprocess-css-mods)

[![npm downloads](https://img.shields.io/npm/dm/svelte-preprocess-css-mods?color=yellow)](https://npmjs.com/package/svelte-preprocess-css-mods)

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

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

Successor of [svelte-preprocess-cssmodules](https://github.com/micantoine/svelte-preprocess-cssmodules)

## Installation

```bash

npx nypm add -D svelte-preprocess-css-mods

```

## Usage

### Config

```javascript

// svelte.config.js

import { cssModules } from 'svelte-preprocess-css-mods';

export default {

	preprocess: cssModules({/* options */}),

};

```

See [options](./src/options.ts) for more information.

### Svelte

```svelte

	import styles from './App.module.css';



	
Hello World!



```


```css

/* App.module.css */

.container {

	display: flex;

	justify-content: center;

	align-items: center;

}

.title {

	color: red;

}

```

get converted into:

```svelte

	const styles = {

		container: 'App_module_container',

		title: 'App_module_title',

	};



	
Hello World!



  .App_module_container {

    display: flex;

    justify-content: center;

    align-items: center;

  }

  .App_module_title {

    color: red;

  }

```

## Related Works

- [svelte-true-css-modules](https://github.com/naumstory/svelte-true-css-modules)

- [svelte-preprocess-cssmodules](https://github.com/micantoine/svelte-preprocess-cssmodules)

  - [I forked this project](https://github.com/ryoppippi/svelte-preprocess-cssmodules), but I gave it up

## License

[MIT](./LICENSE)