Skip to content
This repository was archived by the owner on Sep 25, 2024. It is now read-only.

Commit 171eb38

Browse files
committed
feat: add readme
1 parent bebb050 commit 171eb38

File tree

1 file changed

+82
-0
lines changed

1 file changed

+82
-0
lines changed

README.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# svelte-preprocess-css-modules
2+
3+
Successor of [svelte-preprocess-cssmodules](https://github.com/micantoine/svelte-preprocess-cssmodules)
4+
5+
## Installation
6+
7+
```bash
8+
npx nypm add -D svelte-preprocess-css-modules
9+
```
10+
11+
## Usage
12+
13+
### Config
14+
15+
```javascript
16+
// svelte.config.js
17+
18+
import cssModules from 'svelte-preprocess-css-modules';
19+
20+
export default {
21+
preprocess: cssModules({/* options */}),
22+
};
23+
```
24+
25+
See [options](./src/options.ts) for more information.
26+
27+
### Svelte
28+
29+
```svelte
30+
<!-- App.svelte -->
31+
<script>
32+
import styles from './App.module.css';
33+
</script>
34+
35+
<div class={styles.container}>
36+
<h1 class={styles.title}>Hello World!</h1>
37+
</div>
38+
```
39+
40+
```css
41+
/* App.module.css */
42+
.container {
43+
display: flex;
44+
justify-content: center;
45+
align-items: center;
46+
}
47+
48+
.title {
49+
color: red;
50+
}
51+
```
52+
53+
get converted into:
54+
55+
```svelte
56+
<script>
57+
const styles = {
58+
container: 'App_module_container',
59+
title: 'App_module_title',
60+
};
61+
</script>
62+
63+
<div class={styles.container}>
64+
<h1 class={styles.title}>Hello World!</h1>
65+
</div>
66+
67+
<style>
68+
.App_module_container {
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
}
73+
74+
.App_module_title {
75+
color: red;
76+
}
77+
</style>
78+
```
79+
80+
## License
81+
82+
[MIT](./LICENSE)

0 commit comments

Comments
 (0)