svelte-preprocess-cssmodules
Advanced tools
svelte-preprocess-cssmodules - npm Package Compare versions
Comparing version 2.1.0 to 2.1.1
| # Svelte preprocess CSS Modules, changelog | ||
| ## 2.1.1 (Oct 27, 2021) | ||
| - Fix readme | ||
| ## 2.1.0 (Oct 20, 2021) | ||
@@ -4,0 +8,0 @@ ### Features |
| { | ||
| "name": "svelte-preprocess-cssmodules", | ||
| "version": "2.1.0", | ||
| "version": "2.1.1", | ||
| "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -539,13 +539,13 @@ # Svelte preprocess CSS Modules | ||
| | ------------- | ------------- | ------------- | ------------- | | ||
| | `getLocalIdent` | `Function` | `undefined` | Generate the classname by specifying a function instead of using the built-in interpolation | | ||
| | `hashSeeder` | `{Array}` | `['style', 'filepath', 'classname']` | An array of keys to base the hash on | | ||
| | `includeAttributes` | `{Array}` | `[]` | An array of attributes to parse along with `class` | | ||
| | [`getLocalIdent`](#getlocalident) | `Function` | `undefined` | Generate the classname by specifying a function instead of using the built-in interpolation | | ||
| | [`hashSeeder`](#hashseeder) | `{Array}` | `['style', 'filepath', 'classname']` | An array of keys to base the hash on | | ||
| | [`includeAttributes`](#includeattributes) | `{Array}` | `[]` | An array of attributes to parse along with `class` | | ||
| | `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed | | ||
| | `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` | A rule using any available token | | ||
| | [`localIdentName`](#localidentname) | `{String}` | `"[local]-[hash:base64:6]"` | A rule using any available token | | ||
| | `mode` | `native\|mixed\|scoped` | `native` | The preprocess mode to use | ||
| | `parseExternalStylesheet` | `{Boolean}` | `false` | Enable parsing on imported external stylesheet | | ||
| | `parseStyleTag` | `{Boolean}` | `true` | Enable parsing on style tag | | ||
| | `useAsDefaultScoping` | `{Boolean}` | `false` | Replace svelte scoping globally | | ||
| | [`useAsDefaultScoping`](#useasdefaultscoping) | `{Boolean}` | `false` | Replace svelte scoping globally | | ||
| **`getLocalIdent`** | ||
| #### `getLocalIdent` | ||
@@ -574,4 +574,39 @@ Customize the creation of the classname instead of relying on the built-in function. | ||
| **`hashSeeder`** | ||
| *Example of use* | ||
| ```bash | ||
| # Directory | ||
| SvelteApp | ||
| └─ src | ||
| ├─ App.svelte | ||
| └─ components | ||
| └─ Button.svelte | ||
| ``` | ||
| ```html | ||
| <!-- Button.svelte --> | ||
| <button class="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; | ||
| } | ||
| }) | ||
| ], | ||
| ... | ||
| ``` | ||
| #### `hashSeeder` | ||
| Set the source to create the hash from (when using `[hash]` / `[contenthash]`). | ||
@@ -616,3 +651,3 @@ | ||
| **`includeAttributes`** | ||
| #### `includeAttributes` | ||
@@ -651,39 +686,4 @@ Add other attributes than `class` to be parsed by the preprocesser | ||
| #### `localIdentName` | ||
| *Example of use* | ||
| ```bash | ||
| # Directory | ||
| SvelteApp | ||
| └─ src | ||
| ├─ App.svelte | ||
| └─ components | ||
| └─ Button.svelte | ||
| ``` | ||
| ```html | ||
| <!-- Button.svelte --> | ||
| <button class="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; | ||
| } | ||
| }) | ||
| ], | ||
| ... | ||
| ``` | ||
| **`localIdentName`** | ||
| Inspired by [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename), here is the list of tokens: | ||
@@ -702,3 +702,3 @@ | ||
| **`useAsDefaultScoping`** | ||
| #### `useAsDefaultScoping` | ||
@@ -705,0 +705,0 @@ Globally replace the default svelte scoping by the cssModules scoping. As a result, the `module` attribute to `<style>` becomes unnecessary. |
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
Improved metrics
- Total package byte prevSize
- increased by0.15%
91847