svelte-preprocess-cssmodules - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

CHANGELOG.md

 # Svelte preprocess CSS Modules, changelog
 
+## 2.0.2 (May 26, 2021)
+- Fix Readme
+
 ## 2.0.1 (May 6, 2021)
@@ -4,0 +7,0 @@ - Fix shorthand directive breaking regular directive

package.json

 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -21,2 +21,3 @@ # Svelte preprocess CSS Modules
   - [Webpack](#webpack)
+  - [Svelte Preprocess](#svelte-preprocess)
   - [Options](#options)
@@ -59,3 +60,3 @@ - [Migrating from v1](#migrating-from-v1)
 
-The mode can be set globally from the preprocessor options or locally to override the global settings per component.
+The mode can be **set globally from the preprocessor options** or **locally to override the global settings** per component.
 
@@ -109,7 +110,7 @@ **Mixed mode**
 ```html
-<script module>
+<script>
   let isActive = true;
 </script>
 
-<style>
+<style module>
   .bold { font-weight: bold; }
@@ -136,7 +137,7 @@ </style>
 ```html
-<script module>
+<script>
   let active = true;
 </script>
 
-<style>
+<style module>
   .active { font-weight: bold; }
@@ -186,3 +187,3 @@ </style>
    * Not needed rule because of the use of :local()
-   .secondary strong { font-weight: 700 }
+   .child strong { font-weight: 700 }
    */
@@ -449,2 +450,7 @@ </style>
 
+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)
+
+
+In that situation, we recommend the use of the package [`svelte-as-markup-preprocessor`](https://github.com/firefish5000/svelte-as-markup-preprocessor).
+
 ```bash
@@ -454,9 +460,16 @@ npm install --save-dev svelte-as-markup-preprocessor
 
+**Example with typescript**
+
 ```js
-const asMarkupPreprocessor = require('svelte-as-markup-preprocessor');
+// import packages
+const { typescript } = require('svelte-preprocess');
+const { asMarkupPreprocessor } = require('svelte-as-markup-preprocessor');
+const cssModules = require('svelte-preprocess-cssmodules');
 
 ...
+
+// svelte config
   preprocess: [
     asMarkupPreprocessor([
-      sveltePreprocess()
+      typescript()
     ]),
@@ -468,4 +481,2 @@ cssModules()
 
-Explanation on why svelte-as-markup-preprocessor is needed: [read here](https://github.com/firefish5000/svelte-as-markup-preprocessor#motivation):
-
 ### Options
@@ -472,0 +483,0 @@ Pass an object of the following properties

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60278

increased by0.93%

Number of lines in readme file

833

increased by1.34%

No dependency changes