File tree 3 files changed +40
-36
lines changed 3 files changed +40
-36
lines changed Original file line number Diff line number Diff line change 1
1
# Svelte preprocess CSS Modules, changelog
2
2
3
+ ## 2.1.1 (Oct 27, 2021)
4
+
5
+ - Fix readme
6
+
3
7
## 2.1.0 (Oct 20, 2021)
4
8
### Features
5
9
- SvelteKit support
Original file line number Diff line number Diff line change @@ -570,6 +570,41 @@ function getLocalIdent(
570
570
}
571
571
```
572
572
573
+
574
+ * Example of use*
575
+
576
+ ``` bash
577
+ # Directory
578
+ SvelteApp
579
+ └─ src
580
+ ├─ App.svelte
581
+ └─ components
582
+ └─ Button.svelte
583
+ ```
584
+ ``` html
585
+ <!-- Button.svelte -->
586
+ <button class =" red" >Ok</button >
587
+
588
+ <style >
589
+ .red { background-color : red ; }
590
+ </style >
591
+ ```
592
+
593
+ ``` js
594
+ // Preprocess config
595
+ ...
596
+ preprocess: [
597
+ cssModules ({
598
+ localIdentName: ' [path][name]__[local]' ,
599
+ getLocalIdent : (context , { interpolatedName }) => {
600
+ return interpolatedName .toLowerCase ().replace (' src_' , ' ' );
601
+ // svelteapp_components_button__red;
602
+ }
603
+ })
604
+ ],
605
+ ...
606
+ ```
607
+
573
608
** ` hashSeeder ` **
574
609
575
610
Set the source to create the hash from (when using ` [hash] ` / ` [contenthash] ` ).
@@ -645,41 +680,6 @@ preprocess: [
645
680
</style >
646
681
```
647
682
648
-
649
- * Example of use*
650
-
651
- ``` bash
652
- # Directory
653
- SvelteApp
654
- └─ src
655
- ├─ App.svelte
656
- └─ components
657
- └─ Button.svelte
658
- ```
659
- ``` html
660
- <!-- Button.svelte -->
661
- <button class =" red" >Ok</button >
662
-
663
- <style >
664
- .red { background-color : red ; }
665
- </style >
666
- ```
667
-
668
- ``` js
669
- // Preprocess config
670
- ...
671
- preprocess: [
672
- cssModules ({
673
- localIdentName: ' [path][name]__[local]' ,
674
- getLocalIdent : (context , { interpolatedName }) => {
675
- return interpolatedName .toLowerCase ().replace (' src_' , ' ' );
676
- // svelteapp_components_button__red;
677
- }
678
- })
679
- ],
680
- ...
681
- ```
682
-
683
683
** ` localIdentName ` **
684
684
685
685
Inspired by [ webpack interpolateName] ( https://github.com/webpack/loader-utils#interpolatename ) , here is the list of tokens:
Original file line number Diff line number Diff line change 1
1
{
2
2
"name" : " svelte-preprocess-cssmodules" ,
3
- "version" : " 2.1.0 " ,
3
+ "version" : " 2.1.1 " ,
4
4
"description" : " Svelte preprocessor to generate CSS Modules classname on Svelte components" ,
5
5
"keywords" : [
6
6
" svelte" ,
You can’t perform that action at this time.
0 commit comments