Update Readme

Author: micantoine

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Svelte preprocess CSS Modules, changelog
 
+## 2.1.0-rc.1 (Oct 6, 2021)
+- Add ESM distribution
+
 ## 2.0.2 (May 26, 2021)
 - Fix Readme
 

README.md

@@ -18,6 +18,7 @@ npm install --save-dev svelte-preprocess-cssmodules
 - [Configuration](#configuration)
   - [Rollup](#rollup)
   - [Webpack](#webpack)
+  - [SvelteKit](#sveltekit)
   - [Svelte Preprocess](#svelte-preprocess)
   - [Options](#options)
 - [Migrating from v1](#migrating-from-v1)
@@ -440,6 +441,26 @@ module.exports = {
 }
 ```
 
+### SvelteKit
+
+As the module distribution is targetting `esnext`, `Node.js 14` or above is required 
+in order to work. 
+
+```js
+// svelte.config.js
+
+import cssModules from 'svelte-preprocess-cssmodules';
+
+const config = {
+  ...
+  preprocess: [
+    cssModules(),
+  ]
+};
+
+export default config;
+```
+
 ### Svelte Preprocess
 
 Chaining several preprocessors may lead to errors if the svelte parser and walker is being manipulated multiple time. This issue is due to the way svelte runs its preprocessor in two phases. [Read more here](https://github.com/firefish5000/svelte-as-markup-preprocessor#motivation)
@@ -681,54 +702,36 @@ export default {
 <style module>
   .modal {
     position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 10;
-    width: 400px;
-    height: 80%;
-    background-color: #fff;
-    transform: translateX(-50%) translateY(-50%);
-  }
-  section {
-    flex: 0 1 auto;
-    flex-direction: column;
-    display: flex;
-    height: 100%;
+    ...
   }
   header {
-    padding: 1rem;
-    border-bottom: 1px solid #d9d9d9;
+    ...
   }
   .body {
-    padding: 1rem;
     flex: 1 0 0;
+    ...
   }
   footer {
-    padding: 1rem;
-    border-top: 1px solid #d9d9d9;
+    ...
   }
   button {
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    ...
   }
   .cancel {
     background-color: #f2f2f2;
   }
 </style>
 
-<div class="modal">
-  <section>
-    <header>My Modal Title</header>
-    <div class="body">
-      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
-    </div>
-    <footer>
-      <button>Ok</button>
-      <button class="cancel">Cancel</button>
-    </footer>
-  </section>
-</div>
+<section class="modal">
+  <header>My Modal Title</header>
+  <div class="body">
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
+  </div>
+  <footer>
+    <button>Ok</button>
+    <button class="cancel">Cancel</button>
+  </footer>
+</section>
 ```
 
 ***OR** Svelte Component using `import`*
@@ -737,13 +740,7 @@ export default {
 /** style.module.css */
 .modal {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 10;
-  width: 400px;
-  height: 80%;
-  background-color: #fff;
-  transform: translateX(-50%) translateY(-50%);
+  ...
 }
 
 [...]
@@ -753,18 +750,16 @@ export default {
   import style from './style.module.css';
 </script>
 
-<div class={style.modal}>
-  <section>
-    <header>My Modal Title</header>
-    <div class={style.body}>
-      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
-    </div>
-    <footer>
-      <button>Ok</button>
-      <button class={style.cancel}>Cancel</button>
-    </footer>
-  </section>
-</div>
+<section class={style.modal}>
+  <header>My Modal Title</header>
+  <div class={style.body}>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
+  </div>
+  <footer>
+    <button>Ok</button>
+    <button class={style.cancel}>Cancel</button>
+  </footer>
+</section>
 ```
 
 *Final html code generated by svelte*
@@ -773,54 +768,36 @@ export default {
 <style>
   ._329TyLUs9c {
     position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 10;
-    width: 400px;
-    height: 80%;
-    background-color: #fff;
-    transform: translateX(-50%) translateY(-50%);
-  }
-  section {
-    flex: 0 1 auto;
-    flex-direction: column;
-    display: flex;
-    height: 100%;
+    ...
   }
   header {
-    padding: 1rem;
-    border-bottom: 1px solid #d9d9d9;
+    ...
   }
   ._1HPUBXtzNG {
-    padding: 1rem;
     flex: 1 0 0;
+    ...
   }
   footer {
-    padding: 1rem;
-    border-top: 1px solid #d9d9d9;
+    ...
   }
   button {
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    ...
   }
   ._1xhJxRwWs7 {
     background-color: #f2f2f2;
   }
 </style>
 
-<div class="_329TyLUs9c">
-  <section>
-    <header>My Modal Title</header>
-    <div class="_1HPUBXtzNG">
-      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
-    </div>
-    <footer>
-      <button>Ok</button>
-      <button class="_1xhJxRwWs7">Cancel</button>
-    </footer>
-  </section>
-</div>
+<section class="_329TyLUs9c">
+  <header>My Modal Title</header>
+  <div class="_1HPUBXtzNG">
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
+  </div>
+  <footer>
+    <button>Ok</button>
+    <button class="_1xhJxRwWs7">Cancel</button>
+  </footer>
+</section>
 ```
 
 ## Why CSS Modules on Svelte

package.json

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

tsconfig.json

@@ -26,6 +26,7 @@
   ],
   "exclude": [
     "node_modules",
-    "dist"
+    "dist",
+    "tasks"
   ]
 }