svelte-preprocess-cssmodules
Advanced tools
svelte-preprocess-cssmodules - npm Package Compare versions
Comparing version 2.0.0-rc.3 to 2.0.0
| # Svelte preprocess CSS Modules, changelog | ||
| ## 2.0.0 (May 1, 2021) | ||
| New public release | ||
| ## 2.0.0-rc.3 (April 20, 2021) | ||
@@ -4,0 +7,0 @@ |
@@ -71,3 +71,3 @@ "use strict"; | ||
| }); | ||
| const specifiers = `const { ${specifierNames.join(', ')} } = ${JSON.stringify(processor.importedCssModuleList)};`; | ||
| const specifiers = `const { ${specifierNames.join(', ')} } = ${JSON.stringify(Object.fromEntries(Object.entries(processor.importedCssModuleList).filter(([key]) => specifierNames.includes(key))))};`; | ||
| processor.magicContent.overwrite(node.start, node.end, specifiers); | ||
@@ -74,0 +74,0 @@ } |
| { | ||
| "name": "svelte-preprocess-cssmodules", | ||
| "version": "2.0.0-rc.3", | ||
| "version": "2.0.0", | ||
| "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
171
README.md
@@ -6,3 +6,3 @@ # Svelte preprocess CSS Modules | ||
| ```bash | ||
| npm install --save-dev svelte-preprocess-cssmodules@next | ||
| npm install --save-dev svelte-preprocess-cssmodules | ||
| ``` | ||
@@ -12,5 +12,4 @@ | ||
| - [Modes](#modes) | ||
| - [Target any classname format](#target-any-classname-format) | ||
| - [Work with class directive](#work-with-class-directive) | ||
| - [Local selector](#local-selector) | ||
| - [Local selector](#local-selector) | ||
| - [Import styles from an external stylesheet](#import-styles-from-an-external-stylesheet) | ||
@@ -25,2 +24,3 @@ - [Destructuring import](#destructuring-import) | ||
| - [Options](#options) | ||
| - [Migration from v1](#migration-from-v1) | ||
| - [Code example](#code-example) | ||
@@ -63,3 +63,3 @@ - [Why CSS Modules on Svelte](#why-css-modules-on-svelte) | ||
| *Mixed mode* | ||
| **Mixed mode** | ||
| ```html | ||
@@ -85,3 +85,3 @@ <style module="mixed"> | ||
| *Scoped mode* | ||
| **Scoped mode** | ||
| ```html | ||
@@ -107,34 +107,2 @@ <style module="scoped"> | ||
| ### Target any classname format | ||
| kebab-case or camelCase, name the classes the way you're more comfortable with. | ||
| *Before* | ||
| ```html | ||
| <style module> | ||
| .red { color: red; } | ||
| .red-crimson { color: crimson; } | ||
| .redMajenta { color: magenta; } | ||
| </style> | ||
| <span class="red">Red</span> | ||
| <span class="red-crimson">Crimson</span> | ||
| <span class="redMajenta">Majenta</span> | ||
| ``` | ||
| *After* | ||
| ```html | ||
| <style> | ||
| .red-2xTdmA { color: red; } | ||
| .red-crimson-1lu8Sg { color: crimson; } | ||
| .redMajenta-2wdRa3 { color: magenta; } | ||
| </style> | ||
| <span class="red-2xTdmA">Red</span> | ||
| <span class="red-crimson-1lu8Sg">Crimson</span> | ||
| <span class="redMajenta-2wdRa3">Majenta</span> | ||
| ``` | ||
| ### Work with class directive | ||
@@ -157,3 +125,3 @@ | ||
| *After* | ||
| *Generating* | ||
@@ -169,14 +137,14 @@ ```html | ||
| Use of shorthand | ||
| **Use of shorthand** | ||
| ```html | ||
| <script module> | ||
| let bold = true; | ||
| let active = true; | ||
| </script> | ||
| <style> | ||
| .bold { font-weight: bold; } | ||
| .active { font-weight: bold; } | ||
| </style> | ||
| <p class:bold>My bold text</p> | ||
| <p class:active>My active text</p> | ||
| ``` | ||
@@ -188,12 +156,14 @@ | ||
| <style> | ||
| .bold-2jIMhI { font-weight: bold; } | ||
| .active-2jIMhI { font-weight: bold; } | ||
| </style> | ||
| <p class="bold-2jIMhI">My bold text</p> | ||
| <p class="active-2jIMhI">My active text</p> | ||
| ``` | ||
| ### Local selector | ||
| ## Local selector | ||
| Force a selector to be scoped within the component to prevent style inheritance in child components. | ||
| Force a selector to be scoped within a component to prevent style inheritance on child components. | ||
| `:local()` is doing the opposite of `:global()` and can only be used with the `native` and `mixed` mode on. | ||
| ```html | ||
@@ -220,3 +190,3 @@ <!-- Parent Component--> | ||
| /** | ||
| * Not needed rule | ||
| * Not needed rule because of the use of :local() | ||
| .secondary strong { font-weight: 700 } | ||
@@ -247,3 +217,3 @@ */ | ||
| <style module> | ||
| <style> | ||
| .child-uhRt2j em { color: black; } | ||
@@ -511,6 +481,6 @@ </style> | ||
| | `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` | A rule using any available token | | ||
| | `hashSeeder` | `{Array}` | `['style', 'filepath', 'classname']` | An array of keys to base the hash on | | ||
| | `allowedAttributes` | `{Array}` | `[]` | An array of attributes to parse along with `class` | | ||
| | `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 | | ||
| | `hashSeeder` | `{Array}` | `['style', 'filepath', 'classname']` | An array of keys to base the hash on | | ||
| | `allowedAttributes` | `{Array}` | `[]` | An array of attributes to parse along with `class` | | ||
@@ -532,2 +502,77 @@ **`localIdentName`** | ||
| **`hashSeeder`** | ||
| Set the resource content of `[hash]` and `[contenthash]`. | ||
| The list of available keys are: | ||
| - `style` the content of the style tag (or the imported stylesheet) | ||
| - `filepath` the path of the component | ||
| - `classname` the local className | ||
| *Example of use* | ||
| ```js | ||
| // Preprocess config | ||
| ... | ||
| preprocess: [ | ||
| cssModules({ | ||
| hashSeeder: ['filepath'], | ||
| }) | ||
| ], | ||
| ... | ||
| ``` | ||
| ```html | ||
| <button class="success">Ok</button> | ||
| <button class="cancel">Cancel</button> | ||
| <style module> | ||
| .success { background-color: green; } | ||
| .cancel { background-color: gray; } | ||
| </style> | ||
| ``` | ||
| *Generating* | ||
| ```html | ||
| <button class="success-yr6RT">Ok</button> | ||
| <button class="cancel-yr6RT">Cancel</button> | ||
| <style> | ||
| .success-yr6RT { background-color: green; } | ||
| .cancel-yr6RT { background-color: gray; } | ||
| </style> | ||
| ``` | ||
| **`allowedAttributes`** | ||
| Add other attributes than `class` to be parsed by the preprocesser | ||
| ```js | ||
| // Preprocess config | ||
| ... | ||
| preprocess: [ | ||
| cssModules({ | ||
| allowedAttributes: ['data-color', 'classname'], | ||
| }) | ||
| ], | ||
| ... | ||
| ``` | ||
| ```html | ||
| <button class="red" data-color="red">Red</button> | ||
| <button class="red" classname="blue">Red or Blue</button> | ||
| <style module> | ||
| .red { background-color: red; } | ||
| .blue { background-color: blue; } | ||
| </style> | ||
| ``` | ||
| *Generating* | ||
| ```html | ||
| <button class="red-yr6RT" data-color="red-yr6RT">Red</button> | ||
| <button class="red-yr6RT" classname="blue-aE4qW">Red or Blue</button> | ||
| <style> | ||
| .red-yr6RT { background-color: red; } | ||
| .blue-aE4qW { background-color: blue; } | ||
| </style> | ||
| ``` | ||
| **`getLocalIdent`** | ||
@@ -591,9 +636,25 @@ | ||
| **`hashSeeder`** | ||
| The list of available keys are: | ||
| ## Migrating from v1 | ||
| If you want to migrate an existing project to `v2` keeping the approach of the 1st version, follow the steps below: | ||
| - `style` the content of the style tag (or the imported stylesheet) | ||
| - `filepath` the path of the component | ||
| - `classname` the local className | ||
| - Set the `mixed` mode from the global settings. | ||
| ```js | ||
| // Preprocess config | ||
| ... | ||
| preprocess: [ | ||
| cssModules([ | ||
| mode: 'mixed', | ||
| ]), | ||
| ], | ||
| ... | ||
| ``` | ||
| - Remove all `$style.` prefix from the html markup | ||
| - Add the attribute `module` to `<style>` within your components. | ||
| ```html | ||
| <style module> | ||
| ... | ||
| </style> | ||
| ``` | ||
| ## Code Example | ||
@@ -600,0 +661,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 by2.17%
64590
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by8.02%
822
No dependency changes