Skip to content

Commit a3158db

Browse files
author
Michael Vurchio
committed
Update Readme
1 parent 2a30bfd commit a3158db

File tree

1 file changed

+54
-1
lines changed

1 file changed

+54
-1
lines changed

README.md

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ npm install --save-dev svelte-preprocess-cssmodules@next
1010
- [Modes](#modes)
1111
- [Target any classname format](#target-any-classname-format)
1212
- [Work with class directive](#work-with-class-directive)
13+
- [Local selector](#local-selector)
1314
- [Import styles from an external stylesheet](#import-styles-from-an-external-stylesheet)
1415
- [Destructuring import](#destructuring-import)
1516
- [kebab-case situation](#kebab-case-situation)
@@ -172,7 +173,7 @@ Use of shorthand
172173
<p class:bold>My bold text</p>
173174
```
174175

175-
*After*
176+
*Generating*
176177

177178
```html
178179
<style>
@@ -182,6 +183,58 @@ Use of shorthand
182183
<p class="bold-2jIMhI">My bold text</p>
183184
```
184185

186+
### Local selector
187+
188+
Force a selector to be scoped within the component to prevent style inheritance in child components.
189+
190+
```html
191+
<!-- Parent Component-->
192+
<style module>
193+
.main em { color: grey; }
194+
.main :local(strong) { font-weight: 900; }
195+
</style>
196+
197+
<div class="main">
198+
<p>My <em>main</em> lorem <strong>ipsum tuye</strong></p>
199+
<ChildComponent />
200+
</div>
201+
202+
<!-- Child Component-->
203+
<style module>
204+
/** Rule to override parent style **/
205+
.child em { color: black; }
206+
207+
/**
208+
* Not needed rule
209+
.secondary strong { font-weight: 700 }
210+
*/
211+
</style>
212+
213+
<p class="child">My <em>secondary</em> lorem <strong>ipsum tuye</strong></p>
214+
```
215+
216+
*Generating*
217+
218+
```html
219+
<!-- Parent Component-->
220+
<style>
221+
.main-Yu78Wr em { color: grey; }
222+
.main-Yu78Wr strong.svelte-ery8ts { font-weight: 900; }
223+
</style>
224+
225+
<div class="main-Yu78Wr">
226+
<p>My <em>main</em> lorem <strong class="svelte-ery8ts">ipsum tuye</strong></p>
227+
<ChildComponent />
228+
</div>
229+
230+
<!-- Child Component-->
231+
<style module>
232+
.child-uhRt2j em { color: black; }
233+
</style>
234+
235+
<p class="child-uhRt2j">My <em>secondary</em> lorem <strong>ipsum tuye</strong></p>
236+
```
237+
185238
## Import styles from an external stylesheet
186239

187240
Alternatively, styles can be created into an external file and imported onto a svelte component from the `<script>` tag. The name referring to the import can then be used in the markup targetting any existing classname of the stylesheet.

0 commit comments

Comments
 (0)