svelte-preprocess-cssmodules - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

dist/parsers/template.js

@@ -27,3 +27,3 @@ "use strict";
     var _a;
-    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((childNode) => {
+    (_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a.forEach((childNode) => {
         if (childNode.type === 'InlineComponent' ||
@@ -30,0 +30,0 @@ childNode.type === 'EachBlock' ||

dist/processors/mixed.js

@@ -36,2 +36,6 @@ "use strict";
             }
+            if (node.type === 'Atrule' && node.name === 'keyframes') {
+                processor.parseKeyframes(node);
+                this.skip();
+            }
             if (node.type === 'Selector') {
@@ -78,5 +82,6 @@ const classSelectors = node.children
                 }
-                processor.parsePseudoLocalSelectors(node);
             }
             processor.parseBoundVariables(node);
+            processor.parsePseudoLocalSelectors(node);
+            processor.storeAnimationProperties(node);
             if (node.type === 'ClassSelector') {
@@ -89,2 +94,3 @@ const generatedClassName = processor.createModuleClassname(node.name);
     });
+    processor.overwriteAnimationProperties();
 };
@@ -91,0 +97,0 @@ const mixedProcessor = (ast, content, filename, options) => __awaiter(void 0, void 0, void 0, function* () {

dist/processors/native.js

@@ -38,2 +38,6 @@ "use strict";
             }
+            if (node.type === 'Atrule' && node.name === 'keyframes') {
+                processor.parseKeyframes(node);
+                this.skip();
+            }
             if (node.type === 'Selector') {
@@ -65,5 +69,6 @@ let start = 0;
                 }
-                processor.parsePseudoLocalSelectors(node);
             }
             processor.parseBoundVariables(node);
+            processor.parsePseudoLocalSelectors(node);
+            processor.storeAnimationProperties(node);
             if (node.type === 'ClassSelector') {
@@ -76,2 +81,3 @@ const generatedClassName = processor.createModuleClassname(node.name);
     });
+    processor.overwriteAnimationProperties();
     selectorBoundaries.forEach((boundary) => {
@@ -78,0 +84,0 @@ processor.magicContent.appendLeft(boundary.start, ':global(');

dist/processors/processor.d.ts

@@ -10,2 +10,4 @@ import MagicString from 'magic-string';
     cssVarList: CSSModuleList;
+    cssKeyframeList: CSSModuleList;
+    cssAnimationProperties: TemplateNode[];
     importedCssModuleList: CSSModuleList;
@@ -24,5 +26,8 @@ ast: Ast;
     addModule: (name: string, value: string) => void;
+    parse: () => string;
     parseBoundVariables: (node: TemplateNode) => void;
+    parseKeyframes: (node: TemplateNode) => void;
     parsePseudoLocalSelectors: (node: TemplateNode) => void;
-    parse: () => string;
+    storeAnimationProperties: (node: TemplateNode) => void;
+    overwriteAnimationProperties: () => void;
 }

dist/processors/processor.js

@@ -13,2 +13,4 @@ "use strict";
         this.cssVarList = {};
+        this.cssKeyframeList = {};
+        this.cssAnimationProperties = [];
         this.importedCssModuleList = {};
@@ -26,2 +28,17 @@ this.isParsingImports = false;
         };
+        this.parse = () => {
+            if (this.options.parseStyleTag &&
+                (lib_1.hasModuleAttribute(this.ast) || (this.options.useAsDefaultScoping && this.ast.css))) {
+                this.isParsingImports = false;
+                this.styleParser(this);
+            }
+            if (this.options.parseExternalStylesheet && lib_1.hasModuleImports(this.rawContent)) {
+                this.isParsingImports = true;
+                parsers_1.parseImportDeclaration(this);
+            }
+            if (Object.keys(this.cssModuleList).length > 0 || Object.keys(this.cssVarList).length > 0) {
+                parsers_1.parseTemplate(this);
+            }
+            return this.magicContent.toString();
+        };
         this.parseBoundVariables = (node) => {
@@ -47,27 +64,38 @@ var _a, _b;
         };
+        this.parseKeyframes = (node) => {
+            const rulePrelude = node.prelude.children[0];
+            if (rulePrelude.name.indexOf('-global-') === -1) {
+                const animationName = this.createModuleClassname(rulePrelude.name);
+                this.magicContent.overwrite(rulePrelude.start, rulePrelude.end, `-global-${animationName}`);
+                this.cssKeyframeList[rulePrelude.name] = animationName;
+            }
+        };
         this.parsePseudoLocalSelectors = (node) => {
-            var _a, _b;
-            const pseudoLocalSelectors = (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.filter((item) => item.type === 'PseudoClassSelector' && item.name === 'local')) !== null && _b !== void 0 ? _b : [];
-            if (pseudoLocalSelectors.length > 0) {
-                pseudoLocalSelectors.forEach((item) => {
-                    this.magicContent.remove(item.start, item.start + `:local(`.length);
-                    this.magicContent.remove(item.end - 1, item.end);
-                });
+            if (node.type === 'PseudoClassSelector' && node.name === 'local') {
+                this.magicContent.remove(node.start, node.start + `:local(`.length);
+                this.magicContent.remove(node.end - 1, node.end);
             }
         };
-        this.parse = () => {
-            if (this.options.parseStyleTag &&
-                (lib_1.hasModuleAttribute(this.ast) || (this.options.useAsDefaultScoping && this.ast.css))) {
-                this.isParsingImports = false;
-                this.styleParser(this);
+        this.storeAnimationProperties = (node) => {
+            if (node.type === 'Declaration' && node.property === 'animation') {
+                let names = 0;
+                let properties = 0;
+                node.value.children.forEach((item) => {
+                    if (item.type === 'Identifier' && properties === names) {
+                        names += 1;
+                        this.cssAnimationProperties.push(item);
+                    }
+                    if (item.type === 'Operator' && item.value === ',') {
+                        properties += 1;
+                    }
+                });
             }
-            if (this.options.parseExternalStylesheet && lib_1.hasModuleImports(this.rawContent)) {
-                this.isParsingImports = true;
-                parsers_1.parseImportDeclaration(this);
-            }
-            if (Object.keys(this.cssModuleList).length > 0 || Object.keys(this.cssVarList).length > 0) {
-                parsers_1.parseTemplate(this);
-            }
-            return this.magicContent.toString();
         };
+        this.overwriteAnimationProperties = () => {
+            this.cssAnimationProperties.forEach((item) => {
+                if (item.name in this.cssKeyframeList) {
+                    this.magicContent.overwrite(item.start, item.end, this.cssKeyframeList[item.name]);
+                }
+            });
+        };
         this.filename = filename;
@@ -74,0 +102,0 @@ this.options = options;

package.json

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

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

107790

increased by3.63%

Lines of code

1710

increased by5.3%

No dependency changes