Merge branch 'release/1.2.0'

Author: Michael Vurchio

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Svelte preprocess CSS Modules, changelog
 
+## 1.2.0 (Sept 21, 2020) 
+- Add support for `getLocalIdent()` [issue #6](https://github.com/micantoine/svelte-preprocess-cssmodules/issues/6) - [pull request #7](https://github.com/micantoine/svelte-preprocess-cssmodules/pull/7)
+
 ## 1.1.1
 - Fix the use of `[path]` in the `localIdentName` rule.
 - Escape css on the classname

README.md

@@ -65,7 +65,65 @@ Pass an object of the following properties
 | ------------- | ------------- | ------------- | ------------- |
 | `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` |  A rule using any available token from [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename) |
 | `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
+| `getLocalIdent` | `Function` | `undefined`  | Generate the classname by specifying a function instead of using the built-in interpolation |
 
+#### `getLocalIdent`
+
+Function to generate the classname instead of the built-in function.
+
+```js
+function getLocalIdent(
+  context: {
+    context, // the context path
+    resourcePath, // path + filename
+  },
+  localIdentName: {
+    template, // the template rule
+    interpolatedName, // the built-in generated classname
+  },
+  className, // the classname string
+  content: { 
+    markup, // the markup content
+    style,  // the style content
+  }
+) {
+  return `your_generated_classname`;
+}
+```
+
+*Example of use*
+
+```bash
+# Directory
+SvelteApp
+└─ src
+   ├─ App.svelte
+   └─ components
+      └─ Button.svelte
+```
+```html
+<!-- Button.svelte -->
+<button class="$style.red">Ok</button>
+
+<style>
+  .red { background-color: red; }
+</style>
+```
+
+```js
+// Preprocess config
+...
+preprocess: [
+  cssModules({
+    localIdentName: '[path][name]__[local]',
+    getLocalIdent: (context, { interpolatedName }) => {
+      return interpolatedName.toLowerCase().replace('src_', '');
+      // svelteapp_components_button__red;
+    }
+  })
+],
+...
+```
 
 ## Usage on Svelte Component
 
@@ -290,7 +348,6 @@ export default {
     background-color: #fff;
     transform: translateX(-50%) translateY(-50%);
   }
-
   section {
     flex: 0 1 auto;
     flex-direction: column;
@@ -299,30 +356,17 @@ export default {
   }
   header {
     padding: 1rem;
-    font-size: 1.2rem;
-    font-weight: bold;
     border-bottom: 1px solid #d9d9d9;
   }
-
   .body {
     padding: 1rem;
     flex: 1 0 0;
-    min-height: 0;
-    max-height: 100%;
-    overflow: scroll;
-    -webkit-overflow-scrolling: touch;
   }
-
   footer {
     padding: 1rem;
-    text-align: right;
     border-top: 1px solid #d9d9d9;
   }
   button {
-    padding: .5em 1em;
-    min-width: 100px;
-    font-size: .8rem;
-    font-weight: 600;
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 5px;
@@ -360,7 +404,6 @@ export default {
     background-color: #fff;
     transform: translateX(-50%) translateY(-50%);
   }
-
   section {
     flex: 0 1 auto;
     flex-direction: column;
@@ -369,30 +412,17 @@ export default {
   }
   header {
     padding: 1rem;
-    font-size: 1.2rem;
-    font-weight: bold;
     border-bottom: 1px solid #d9d9d9;
   }
-
   ._1HPUBXtzNG {
     padding: 1rem;
     flex: 1 0 0;
-    min-height: 0;
-    max-height: 100%;
-    overflow: scroll;
-    -webkit-overflow-scrolling: touch;
   }
-
   footer {
     padding: 1rem;
-    text-align: right;
     border-top: 1px solid #d9d9d9;
   }
   button {
-    padding: .5em 1em;
-    min-width: 100px;
-    font-size: .8rem;
-    font-weight: 600;
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 5px;
@@ -420,7 +450,7 @@ export default {
 
 ## Why CSS Modules on Svelte
 
-While the native CSS Scoped system should be largely enough to avoid class conflict, it could find its limit when working on a hybrid project. On a non full javascript front-end where Svelte is used to enhance pieces of the page, the thought on the class naming is no less different than the one on a regular html page. For example, on the modal component above, It would have been wiser to namespace some of the classes such as `.modal-body` and `.modal-cancel` to avoid inheriting styles from other `.body` and `.cancel`.
+While the native CSS Scoped system should be largely enough to avoid class conflict, it could find its limit when working on a hybrid project. On a non full Svelte application where it is used to enhance pieces of the page; the thought on the class naming is no less different than the one on a regular html page to avoid conflict and unwilling inheritance. For example, on the modal component above, It would have been wiser to namespace some of the classes such as `.modal-body` and `.modal-cancel` to avoid inheriting styles from other `.body` and `.cancel`.
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",
   "keywords": [
     "svelte",