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: 5 months ago
JSON representation
use css modules in svelte
- Host: GitHub
- URL: https://github.com/ryoppippi/svelte-preprocess-css-mods
- Owner: ryoppippi
- License: mit
- Archived: true
- Created: 2024-08-06T10:14:55.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-24T03:20:46.000Z (9 months ago)
- Last Synced: 2025-01-13T01:44:36.993Z (6 months ago)
- Topics: css-modules, cssmodules, svelte, svelte-preprocessor, sveltekit
- Language: TypeScript
- Homepage:
- Size: 268 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-preprocess-css-mods
[](https://npmjs.com/package/svelte-preprocess-css-mods)
[](https://npmjs.com/package/svelte-preprocess-css-mods)[](https://jsr.io/@ryoppippi/svelte-preprocess-css-mods)
[](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.jsimport { 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)