svelte-preprocess-cssmodules - npm Package Compare versions

Comparing version 2.0.0-rc.2 to 2.0.0-rc.3

CHANGELOG.md

 # Svelte preprocess CSS Modules, changelog
 
+## 2.0.0-rc.3 (April 20, 2021)
+
+### Features
+- Add `:local()` selector
+### Fixes
+- Fix native parsing
+
 ## 2.0.0-rc.2 (April 16, 2021)
@@ -4,0 +11,0 @@

dist/processors/mixed.js

@@ -83,2 +83,3 @@ "use strict";
                 }
+                processor.parsePseudoLocalSelectors(node);
             }
@@ -85,0 +86,0 @@ if (node.type === 'ClassSelector') {

dist/processors/native.js

@@ -43,3 +43,2 @@ "use strict";
     let selectorBoundaries = [];
-    let globalSelectors = [];
     compiler_1.walk(processor.ast, {
@@ -51,6 +50,2 @@ enter(node) {
             if (node.type === 'Selector') {
-                globalSelectors = [
-                    ...globalSelectors,
-                    ...node.children.filter((item) => item.name === 'global' && item.type === 'PseudoClassSelector'),
-                ];
                 let start = 0;
@@ -60,4 +55,5 @@ let end = 0;
                     let hasPushed = false;
-                    if (item.name === 'global' && item.type === 'PseudoClassSelector') {
-                        if (start > 0) {
+                    if ((item.name === 'global' || item.name === 'local') &&
+                        item.type === 'PseudoClassSelector') {
+                        if (start > 0 && end > 0) {
                             selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
@@ -69,3 +65,3 @@ hasPushed = true;
                     }
-                    else {
+                    else if (item.start && item.end) {
                         if (start === 0) {
@@ -76,6 +72,7 @@ start = item.start;
                     }
-                    if (!hasPushed && index === node.children.length - 1) {
+                    if (!hasPushed && index === node.children.length - 1 && end > 0) {
                         selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
                     }
                 });
+                processor.parsePseudoLocalSelectors(node);
             }
@@ -90,7 +87,4 @@ if (node.type === 'ClassSelector') {
     selectorBoundaries.forEach((boundary) => {
-        const hasClassSelector = globalSelectors.filter((item) => boundary.start <= item.start && boundary.end >= item.end);
-        if (hasClassSelector.length < 1) {
-            processor.magicContent.appendLeft(boundary.start, ':global(');
-            processor.magicContent.appendRight(boundary.end, ')');
-        }
+        processor.magicContent.appendLeft(boundary.start, ':global(');
+        processor.magicContent.appendRight(boundary.end, ')');
     });
@@ -97,0 +91,0 @@ };

dist/processors/processor.d.ts

 import MagicString from 'magic-string';
-import type { Ast, Style } from 'svelte/types/compiler/interfaces.d';
+import type { Ast, Style, TemplateNode } from 'svelte/types/compiler/interfaces.d';
 import { CSSModuleList, PluginOptions } from '../types';
@@ -33,2 +33,7 @@ export default class Processor {
     /**
+     * Parse pseudo selector :local()
+     * @param node The ast "Selector" node to parse
+     */
+    parsePseudoLocalSelectors: (node: TemplateNode) => void;
+    /**
      * Parse component
@@ -35,0 +40,0 @@ * @returns The CssModule updated component

dist/processors/processor.js

@@ -36,2 +36,15 @@ "use strict";
         /**
+         * Parse pseudo selector :local()
+         * @param node The ast "Selector" node to parse
+         */
+        this.parsePseudoLocalSelectors = (node) => {
+            const pseudoLocalSelectors = node.children.filter((item) => item.type === 'PseudoClassSelector' && item.name === 'local');
+            if (pseudoLocalSelectors.length > 0) {
+                pseudoLocalSelectors.forEach((item) => {
+                    this.magicContent.remove(item.start, item.start + `:local(`.length);
+                    this.magicContent.remove(item.end - 1, item.end);
+                });
+            }
+        };
+        /**
          * Parse component
@@ -38,0 +51,0 @@ * @returns The CssModule updated component

package.json

 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.3",
   "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -13,2 +13,3 @@ # Svelte preprocess CSS Modules
   - [Work with class directive](#work-with-class-directive)
+  - [Local selector](#local-selector)
 - [Import styles from an external stylesheet](#import-styles-from-an-external-stylesheet)
@@ -176,3 +177,3 @@ - [Destructuring import](#destructuring-import)
 
-*After*
+*Generating*
 
@@ -187,2 +188,60 @@ ```html
 
+### Local selector
+
+Force a selector to be scoped within the component to prevent style inheritance in child components.
+
+```html
+<!-- Parent Component-->
+
+<style module>
+  .main em { color: grey; }
+  .main :local(strong) { font-weight: 900; }
+</style>
+
+<div class="main">
+  <p>My <em>main</em> lorem <strong>ipsum tuye</strong></p>
+  <ChildComponent />
+</div>
+```
+```html
+<!-- Child Component-->
+
+<style module>
+  /** Rule to override parent style **/
+  .child em { color: black; }
+
+  /** 
+   * Not needed rule
+   .secondary strong { font-weight: 700 }
+   */
+</style>
+
+<p class="child">My <em>secondary</em> lorem <strong>ipsum tuye</strong></p>
+```
+
+*Generating*
+
+```html
+<!-- Parent Component-->
+
+<style>
+  .main-Yu78Wr em { color: grey; }
+  .main-Yu78Wr strong.svelte-ery8ts { font-weight: 900; }
+</style>
+
+<div class="main-Yu78Wr">
+  <p>My <em>main</em> lorem <strong class="svelte-ery8ts">ipsum tuye</strong></p>
+  <ChildComponent />
+</div>
+```
+```html
+<!-- Child Component-->
+
+<style module>
+  .child-uhRt2j em { color: black; }
+</style>
+
+<p class="child-uhRt2j">My <em>secondary</em> lorem <strong>ipsum tuye</strong></p>
+```
+
 ## Import styles from an external stylesheet
@@ -189,0 +248,0 @@

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

63217

increased by3.05%

Lines of code

929

increased by1.42%

Number of lines in readme file

761

increased by8.4%

No dependency changes