svelte-preprocess-cssmodules
Advanced tools
svelte-preprocess-cssmodules - npm Package Compare versions
Comparing version 2.1.0-rc.2 to 2.1.0
| # Svelte preprocess CSS Modules, changelog | ||
| ## 2.1.0 (Oct 20, 2021) | ||
| ### Features | ||
| - SvelteKit support | ||
| - `useAsDefaultScoping` option | ||
| - `parseExternalStylesheet` option | ||
| ### Breaking changes | ||
| - Rename option `allowedAttributes` to `includeAttributes` | ||
| - External cssModules stylesheets are not being processed automatically. | ||
| ## 2.1.0-rc.2 (Oct 7, 2021) | ||
@@ -4,0 +14,0 @@ ### Features |
| { | ||
| "name": "svelte-preprocess-cssmodules", | ||
| "version": "2.1.0-rc.2", | ||
| "version": "2.1.0", | ||
| "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
100
README.md
@@ -549,6 +549,29 @@ # Svelte preprocess CSS Modules | ||
| **`getLocalIdent`** | ||
| Customize the creation of the classname instead of relying on the built-in function. | ||
| ```ts | ||
| function getLocalIdent( | ||
| context: { | ||
| context: string, // the context path | ||
| resourcePath: string, // path + filename | ||
| }, | ||
| localIdentName: { | ||
| template: string, // the template rule | ||
| interpolatedName: string, // the built-in generated classname | ||
| }, | ||
| className: string, // the classname string | ||
| content: { | ||
| markup: string, // the markup content | ||
| style: string, // the style content | ||
| } | ||
| ): string { | ||
| return `your_generated_classname`; | ||
| } | ||
| ``` | ||
| **`hashSeeder`** | ||
| Set the resource content of `[hash]` and `[contenthash]`. | ||
| Set the source to create the hash from (when using `[hash]` / `[contenthash]`). | ||
@@ -592,26 +615,2 @@ The list of available keys are: | ||
| **`getLocalIdent`** | ||
| Customize the creation of the classname instead of relying on the built-in function. | ||
| ```ts | ||
| function getLocalIdent( | ||
| context: { | ||
| context: string, // the context path | ||
| resourcePath: string, // path + filename | ||
| }, | ||
| localIdentName: { | ||
| template: string, // the template rule | ||
| interpolatedName: string, // the built-in generated classname | ||
| }, | ||
| className: string, // the classname string | ||
| content: { | ||
| markup: string, // the markup content | ||
| style: string, // the style content | ||
| } | ||
| ): string { | ||
| return `your_generated_classname`; | ||
| } | ||
| ``` | ||
| **`includeAttributes`** | ||
@@ -705,2 +704,3 @@ | ||
| ```js | ||
@@ -731,2 +731,20 @@ // Preprocess config | ||
| ``` | ||
| **Beware** | ||
| The enabled option will applied cssModules scoping to all imported Svelte files, even the ones coming from `node_modules`. When using a third party library, make sure the compiled version is being imported. In the case of a raw svelte file, it might break its styling. | ||
| To prevent any scoping conflict, it is recommended to associate the option `useAsDefaultScoping` with `includePaths`. | ||
| ```js | ||
| // Preprocess config | ||
| ... | ||
| preprocess: [ | ||
| cssModules([ | ||
| useAsDefaultScoping: true, | ||
| includePaths: ['./src'], | ||
| ]), | ||
| ], | ||
| ... | ||
| ``` | ||
| ## Migrating from v1 | ||
@@ -775,3 +793,3 @@ If you want to migrate an existing project to `v2` keeping the approach of the 1st version, follow the steps below: | ||
| *Svelte Component using `<style>`* | ||
| *Svelte Component* | ||
@@ -789,3 +807,3 @@ ```html | ||
| } | ||
| button { | ||
| .modal button { | ||
| background-color: white; | ||
@@ -810,28 +828,2 @@ } | ||
| ***OR** Svelte Component importing external stylesheet* | ||
| ```css | ||
| /** style.module.css */ | ||
| .modal { | ||
| position: fixed; | ||
| } | ||
| ... | ||
| ``` | ||
| ```html | ||
| <script> | ||
| import style from './style.module.css'; | ||
| </script> | ||
| <section class={style.modal}> | ||
| <header class={style.wrapper}>My Modal Title</header> | ||
| <div class="{style.body} {style.wrapper}"> | ||
| <p>Lorem ipsum dolor sit, amet consectetur.</p> | ||
| </div> | ||
| <footer class={style.wrapper}> | ||
| <button>Ok</button> | ||
| <button class={style.cancel}>Cancel</button> | ||
| </footer> | ||
| </section> | ||
| ``` | ||
| *Final html code generated by svelte* | ||
@@ -850,3 +842,3 @@ | ||
| } | ||
| button { | ||
| ._329TyLUs9c button { | ||
| background-color: white; | ||
@@ -853,0 +845,0 @@ } |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.35%
91705
- Number of low quality alerts
- decreased by-100%
0
Worsened metrics
- Number of lines in readme file
- decreased by-0.92%
862