Skip to content

Commit 1acef43

Browse files
author
Michael Vurchio
committed
Update Readme
1 parent afc8128 commit 1acef43

File tree

1 file changed

+69
-0
lines changed

1 file changed

+69
-0
lines changed

README.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,76 @@ Pass an object of the following properties
6565
| ------------- | ------------- | ------------- | ------------- |
6666
| `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` | A rule using any available token from [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename) |
6767
| `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
68+
| `getLocalIdent` | `Function` | `undefined` | Generate the classname by specifying a function instead of using the built-in interpolation |
6869

70+
### `getLocalIdent`
71+
72+
Function to generate the classname instead of the built-in function.
73+
74+
```js
75+
function getLocalIdent(
76+
context: {
77+
context, // the context path
78+
resourcePath, // path + filename
79+
},
80+
localIdentName: {
81+
template, // the template rule
82+
interpolatedName, // the built-in generated classname
83+
},
84+
className, // the classname string
85+
content: {
86+
markup, // the markup content
87+
style, // the style content
88+
}
89+
) {
90+
return `your_generated_classname`;
91+
}
92+
```
93+
94+
*Example of use*
95+
96+
```bash
97+
# Directory
98+
SvelteApp
99+
└─ src
100+
├─ App.svelte
101+
└─ components
102+
└─ Button.svelte
103+
```
104+
```html
105+
<!-- Button.svelte -->
106+
<button class="$style.red">Ok</button>
107+
108+
<style>
109+
.red { background-color: red; }
110+
</style>
111+
```
112+
113+
```js
114+
// Preprocess config
115+
...
116+
preprocess: [
117+
cssModules({
118+
localIdentName: '[path][name]__[local]',
119+
getLocalIdent: (
120+
{
121+
context, // SvelteApp/src/components
122+
resourcePath // SvelteApp/src/components/Button.svelte
123+
},
124+
{
125+
template, // [path][name]__[local]
126+
interpolatedName // SvelteApp_src_components_Button__red
127+
},
128+
className, // red
129+
{ style } // <style>.red { background-color: red; }</style>
130+
) => {
131+
return interpolatedName.toLowerCase().replace('src_', '');
132+
// svelteapp_components_button__red;
133+
}
134+
})
135+
],
136+
...
137+
```
69138

70139
## Usage on Svelte Component
71140

0 commit comments

Comments
 (0)