@@ -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
187240Alternatively, 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