Skip to content

Commit 8d5a5f3

Browse files
author
Michael Vurchio
committed
Update readme
1 parent 8a51181 commit 8d5a5f3

File tree

1 file changed

+74
-1
lines changed

1 file changed

+74
-1
lines changed

README.md

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ npm install --save-dev svelte-preprocess-cssmodules
88

99
## Rollup Configuration
1010

11-
To be used with the plugin `rollup-plugin-svelte`.
11+
To be used with the plugin [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte).
1212

1313
```js
1414
import svelte from 'rollup-plugin-svelte';
@@ -27,6 +27,37 @@ export default {
2727
}
2828
```
2929

30+
## Webpack Configuration
31+
32+
To be used with the loader [`svelte-loader`](https://github.com/sveltejs/svelte-loader).
33+
34+
```js
35+
const cssModules = require('svelte-preprocess-cssmodules');
36+
37+
module.exports = {
38+
...
39+
module: {
40+
rules: [
41+
{
42+
test: /\.svelte$/,
43+
exclude: /node_modules/,
44+
use: [
45+
{
46+
loader: 'svelte-loader',
47+
options: {
48+
preprocess: [
49+
cssModules(),
50+
]
51+
}
52+
}
53+
]
54+
}
55+
]
56+
}
57+
...
58+
}
59+
```
60+
3061
## Options
3162
Pass an object of the following properties
3263

@@ -36,6 +67,7 @@ Pass an object of the following properties
3667
| `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
3768

3869

70+
3971
## Usage on Svelte Component
4072

4173
**On the HTML markup** (not the CSS), Prefix any class name that require CSS Modules by *$style.* => `$style.My_CLASSNAME`
@@ -144,6 +176,47 @@ kebab-case or camelCase, name the classes the way you're more comfortable with.
144176
<span class="redMajenta-2wdRa3">Majenta</span>
145177
```
146178

179+
### Use class multiple times
180+
A class can be naturally used on multiple elements.
181+
182+
*Before*
183+
184+
```html
185+
<style>
186+
.red { color: red; }
187+
.blue { color: blue; }
188+
.bold { font-weight: bold; }
189+
</style>
190+
191+
<p class="$style.red $style.bold">My red text</p>
192+
<p class="$style.blue $style.bold">My blue text</p>
193+
```
194+
195+
*After*
196+
197+
```html
198+
<style>
199+
.red-en-6pb { color: red; }
200+
.blue-oVk-n1 { color: blue; }
201+
.bold-2jIMhI { font-weight: bold; }
202+
</style>
203+
204+
<p class="red-en-6pb bold-2jIMhI">My red text</p>
205+
<p class="blue-oVk-n1 bold-2jIMhI">My blue text</p>
206+
```
207+
208+
### Work with class directives
209+
Toggling a class on an element.
210+
211+
```html
212+
<style>
213+
.bold { font-weight: bold; }
214+
</style>
215+
216+
<p class:$style.bold={isActive}>My red text</p>
217+
<p class="{isActive ? '$style.bold' : ''}">My blue text</p>
218+
```
219+
147220
## Example
148221

149222
*Rollup Config*

0 commit comments

Comments
 (0)