You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Passing scoped className to child components](#passing-scoped-classname-to-child-components)
16
+
-[Scoped class on child components](#scoped-class-on-child-components)
17
17
-[Import styles from an external stylesheet](#import-styles-from-an-external-stylesheet)
18
18
-[Destructuring import](#destructuring-import)
19
19
-[kebab-case situation](#kebab-case-situation)
@@ -165,7 +165,7 @@ _generating_
165
165
166
166
Force a selector to be scoped within its component to prevent style inheritance on child components.
167
167
168
-
`:local()` is doing the opposite of `:global()` and can only be used with the `native` and `mixed` modes on ([see preprocessor modes](#preprocessor-modes)). The svelte scoping is applied to the selector inside `:local()`.
168
+
`:local()` is doing the opposite of `:global()` and can only be used with the `native` and `mixed` modes ([see preprocessor modes](#preprocessor-modes)). The svelte scoping is applied to the selector inside `:local()`.
169
169
170
170
```html
171
171
<!-- Parent Component -->
@@ -298,7 +298,7 @@ A scoped css variable, binding the declared statement, will be created on the co
298
298
</style>
299
299
```
300
300
301
-
An object property can also be targetted if wrapped with quotes.
301
+
An object property can also be targetted and must be wrapped with quotes.
302
302
303
303
```html
304
304
<script>
@@ -348,9 +348,9 @@ _generating_
348
348
</style>
349
349
```
350
350
351
-
### Passing scoped className to child components
351
+
### Scoped class on child components
352
352
353
-
CSS Modules allows you to pass a scoped className to a child component giving the possibility to style it from its parent. (Only with the `native` and `mixed` modes – [See preprocessor modes](#preprocessor-modes).
353
+
CSS Modules allows you to pass a scoped classname to a child component giving the possibility to style it from its parent. (Only with the `native` and `mixed` modes – [See preprocessor modes](#preprocessor-modes)).
354
354
355
355
```html
356
356
<!-- Child Component Button.svelte -->
@@ -424,7 +424,7 @@ _generating_
424
424
425
425
## Import styles from an external stylesheet
426
426
427
-
Alternatively, styles can be created into an external file and imported onto a svelte component. The name referring to the import can then be used on the markup to target any existing class name of the stylesheet.
427
+
Alternatively, styles can be created into an external file and imported onto a svelte component. The name referring to the import can then be used on the markup to target any existing classname of the stylesheet.
428
428
429
429
- The option `parseExternalStylesheet` need to be enabled.
430
430
- The css file must follow the convention `[FILENAME].module.css` in order to be processed.
@@ -542,7 +542,7 @@ The kebab-case class names are being transformed to a camelCase version to facil
542
542
543
543
### Unnamed import
544
544
545
-
If a css file is being imported without a name, the cssModules will still apply to the classes of the stylesheet.
545
+
If a css file is being imported without a name, CSS Modules will still apply to the classes of the stylesheet.
546
546
547
547
```css
548
548
/** style.module.css **/
@@ -719,7 +719,7 @@ Pros:
719
719
720
720
Cons:
721
721
722
-
- does not pass scoped class name to child components
722
+
- does not pass scoped classname to child components
723
723
724
724
### Comparative
725
725
@@ -930,7 +930,7 @@ The list of available keys are:
930
930
931
931
-`style` the content of the style tag (or the imported stylesheet)
932
932
-`filepath` the path of the component
933
-
-`classname` the local className
933
+
-`classname` the local classname
934
934
935
935
*Example of use: creating a common hash per component*
936
936
```js
@@ -1014,7 +1014,7 @@ Inspired by [webpack interpolateName](https://github.com/webpack/loader-utils#in
1014
1014
1015
1015
#### `useAsDefaultScoping`
1016
1016
1017
-
Globally replace the default svelte scoping by the cssModules scoping. As a result, the `module` attribute to `<style>` becomes unnecessary.
1017
+
Globally replace the default svelte scoping by the CSS Modules scoping. As a result, the `module` attribute to `<style>` becomes unnecessary.
0 commit comments