@stylable/core - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

dist/stylable-processor.d.ts

@@ -40,2 +40,3 @@ import * as postcss from 'postcss';
     ILLEGAL_CSS_VAR_ARGS(name: string): string;
+    INVALID_CUSTOM_PROPERTY_AS_VALUE(name: string, as: string): string;
 };
@@ -52,2 +53,3 @@ export declare class StylableProcessor {
     protected handleAtRules(root: postcss.Root): void;
+    private collectUrls;
     private handleNamespaceReference;
@@ -63,4 +65,4 @@ protected handleRule(rule: SRule, inStScope?: boolean): void;
     protected handleCSSVarUse(decl: postcss.Declaration): void;
-    protected addCSSVarFromProp(decl: postcss.Declaration): void;
-    protected addCSSVar(varName: string, decl: postcss.Declaration): void;
+    protected addCSSVarDefinition(node: postcss.Declaration | postcss.AtRule): void;
+    protected addCSSVar(varName: string, node: postcss.Declaration | postcss.AtRule): void;
     protected handleDirectives(rule: SRule, decl: postcss.Declaration): void;
@@ -72,2 +74,3 @@ protected setClassGlobalMapping(decl: postcss.Declaration, rule: postcss.Rule): void;
     private handleScope;
+    private checkForInvalidAsUsage;
 }
@@ -74,0 +77,0 @@ export declare function validateScopingSelector(atRule: postcss.AtRule, { selector: scopingSelector }: SRule, diagnostics: Diagnostics): void;

dist/stylable-processor.js

@@ -144,4 +144,7 @@ "use strict";
     ILLEGAL_CSS_VAR_ARGS(name) {
-        return `css variable "${name}" usage (var()) must receive comma separated values`;
+        return `custom property "${name}" usage (var()) must receive comma separated values`;
     },
+    INVALID_CUSTOM_PROPERTY_AS_VALUE(name, as) {
+        return `invalid alias for custom property "${name}" as "${as}"; custom properties must be prefixed with "--" (double-dash)`;
+    },
 };
@@ -169,3 +172,3 @@ class StylableProcessor {
             else if (stylable_utils_1.isCSSVarProp(decl.prop)) {
-                this.addCSSVarFromProp(decl);
+                this.addCSSVarDefinition(decl);
             }
@@ -175,5 +178,3 @@ if (decl.value.includes('var(')) {
             }
-            stylable_assets_1.processDeclarationUrls(decl, (node) => {
-                this.meta.urls.push(node.url);
-            }, false);
+            this.collectUrls(decl);
         });
@@ -262,2 +263,5 @@ stubs.forEach((s) => s && s.remove());
                     break;
+                case 'property':
+                    this.addCSSVarDefinition(atRule);
+                    break;
                 case 'st-global-custom-property': {
@@ -298,2 +302,7 @@ const cssVarsByComma = atRule.params.split(',');
     }
+    collectUrls(decl) {
+        stylable_assets_1.processDeclarationUrls(decl, (node) => {
+            this.meta.urls.push(node.url);
+        }, false);
+    }
     handleNamespaceReference(namespace) {
@@ -485,2 +494,3 @@ let pathToSource;
     addImportSymbols(importDef) {
+        this.checkForInvalidAsUsage(importDef);
         if (importDef.defaultExport) {
@@ -519,2 +529,3 @@ this.checkRedeclareSymbol(importDef.defaultExport, importDef.rule);
         rule.walkDecls((decl) => {
+            this.collectUrls(decl);
             this.checkRedeclareSymbol(decl.prop, decl);
@@ -557,7 +568,7 @@ let type = null;
     }
-    addCSSVarFromProp(decl) {
-        const varName = decl.prop.trim();
-        this.addCSSVar(varName, decl);
+    addCSSVarDefinition(node) {
+        const varName = node.type === 'atrule' ? node.params : node.prop;
+        this.addCSSVar(varName.trim(), node);
     }
-    addCSSVar(varName, decl) {
+    addCSSVar(varName, node) {
         if (stylable_utils_1.isCSSVarProp(varName)) {
@@ -576,3 +587,3 @@ if (!this.meta.cssVars[varName]) {
         else {
-            this.diagnostics.warn(decl, exports.processorWarnings.ILLEGAL_CSS_VAR_USE(varName), {
+            this.diagnostics.warn(node, exports.processorWarnings.ILLEGAL_CSS_VAR_USE(varName), {
                 word: varName,
@@ -803,2 +814,9 @@ });
     }
+    checkForInvalidAsUsage(importDef) {
+        for (const [local, imported] of Object.entries(importDef.named)) {
+            if (stylable_utils_1.isCSSVarProp(imported) && !stylable_utils_1.isCSSVarProp(local)) {
+                this.diagnostics.warn(importDef.rule, exports.processorWarnings.INVALID_CUSTOM_PROPERTY_AS_VALUE(imported, local));
+            }
+        }
+    }
 }
@@ -805,0 +823,0 @@ exports.StylableProcessor = StylableProcessor;

dist/stylable-transformer.js

@@ -98,4 +98,11 @@ "use strict";
         });
-        ast.walkAtRules(/media$/, (atRule) => {
-            atRule.params = functions_1.evalDeclarationValue(this.resolver, atRule.params, meta, atRule, variableOverride, this.replaceValueHook, this.diagnostics, path.slice(), undefined, undefined);
+        ast.walkAtRules((atRule) => {
+            var _a;
+            const { name } = atRule;
+            if (name === 'media') {
+                atRule.params = functions_1.evalDeclarationValue(this.resolver, atRule.params, meta, atRule, variableOverride, this.replaceValueHook, this.diagnostics, path.slice(), undefined, undefined);
+            }
+            else if (name === 'property') {
+                atRule.params = (_a = cssVarsMapping[atRule.params]) !== null && _a !== void 0 ? _a : atRule.params;
+            }
         });
@@ -102,0 +109,0 @@ ast.walkDecls((decl) => {

package.json

 {
   "name": "@stylable/core",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "CSS for Components",
@@ -19,5 +19,5 @@ "main": "dist/index.js",
     "lodash.clonedeepwith": "^4.5.0",
-    "postcss": "^8.2.6",
+    "postcss": "^8.2.8",
     "postcss-js": "^3.0.3",
-    "postcss-nested": "^5.0.3",
+    "postcss-nested": "^5.0.5",
     "postcss-safe-parser": "^5.0.2",
@@ -24,0 +24,0 @@ "postcss-selector-matches": "^4.0.0",

src/stylable-processor.ts

@@ -149,4 +149,7 @@ import { murmurhash3_32_gc } from './murmurhash';
     ILLEGAL_CSS_VAR_ARGS(name: string) {
-        return `css variable "${name}" usage (var()) must receive comma separated values`;
+        return `custom property "${name}" usage (var()) must receive comma separated values`;
     },
+    INVALID_CUSTOM_PROPERTY_AS_VALUE(name: string, as: string) {
+        return `invalid alias for custom property "${name}" as "${as}"; custom properties must be prefixed with "--" (double-dash)`;
+    },
 };
@@ -181,3 +184,3 @@
             } else if (isCSSVarProp(decl.prop)) {
-                this.addCSSVarFromProp(decl);
+                this.addCSSVarDefinition(decl);
             }
@@ -189,9 +192,3 @@
 
-            processDeclarationUrls(
-                decl,
-                (node) => {
-                    this.meta.urls.push(node.url!);
-                },
-                false
-            );
+            this.collectUrls(decl);
         });
@@ -284,2 +281,5 @@
                     break;
+                case 'property':
+                    this.addCSSVarDefinition(atRule);
+                    break;
                 case 'st-global-custom-property': {
@@ -330,3 +330,11 @@ const cssVarsByComma = atRule.params.split(',');
     }
-
+    private collectUrls(decl: postcss.Declaration) {
+        processDeclarationUrls(
+            decl,
+            (node) => {
+                this.meta.urls.push(node.url!);
+            },
+            false
+        );
+    }
     private handleNamespaceReference(namespace: string): string {
@@ -547,2 +555,3 @@ let pathToSource: string | undefined;
     protected addImportSymbols(importDef: Imported) {
+        this.checkForInvalidAsUsage(importDef);
         if (importDef.defaultExport) {
@@ -582,2 +591,3 @@ this.checkRedeclareSymbol(importDef.defaultExport, importDef.rule);
         rule.walkDecls((decl) => {
+            this.collectUrls(decl);
             this.checkRedeclareSymbol(decl.prop, decl);
@@ -625,8 +635,8 @@ let type = null;
 
-    protected addCSSVarFromProp(decl: postcss.Declaration) {
-        const varName = decl.prop.trim();
-        this.addCSSVar(varName, decl);
+    protected addCSSVarDefinition(node: postcss.Declaration | postcss.AtRule) {
+        const varName = node.type === 'atrule' ? node.params : node.prop;
+        this.addCSSVar(varName.trim(), node);
     }
 
-    protected addCSSVar(varName: string, decl: postcss.Declaration) {
+    protected addCSSVar(varName: string, node: postcss.Declaration | postcss.AtRule) {
         if (isCSSVarProp(varName)) {
@@ -644,3 +654,3 @@ if (!this.meta.cssVars[varName]) {
         } else {
-            this.diagnostics.warn(decl, processorWarnings.ILLEGAL_CSS_VAR_USE(varName), {
+            this.diagnostics.warn(node, processorWarnings.ILLEGAL_CSS_VAR_USE(varName), {
                 word: varName,
@@ -926,2 +936,12 @@ });
     }
+    private checkForInvalidAsUsage(importDef: Imported) {
+        for (const [local, imported] of Object.entries(importDef.named)) {
+            if (isCSSVarProp(imported) && !isCSSVarProp(local)) {
+                this.diagnostics.warn(
+                    importDef.rule,
+                    processorWarnings.INVALID_CUSTOM_PROPERTY_AS_VALUE(imported, local)
+                );
+            }
+        }
+    }
 }
@@ -928,0 +948,0 @@

src/stylable-transformer.ts

@@ -193,15 +193,20 @@ import { basename } from 'path';
 
-        ast.walkAtRules(/media$/, (atRule) => {
-            atRule.params = evalDeclarationValue(
-                this.resolver,
-                atRule.params,
-                meta,
-                atRule,
-                variableOverride,
-                this.replaceValueHook,
-                this.diagnostics,
-                path.slice(),
-                undefined,
-                undefined
-            );
+        ast.walkAtRules((atRule) => {
+            const { name } = atRule;
+            if (name === 'media') {
+                atRule.params = evalDeclarationValue(
+                    this.resolver,
+                    atRule.params,
+                    meta,
+                    atRule,
+                    variableOverride,
+                    this.replaceValueHook,
+                    this.diagnostics,
+                    path.slice(),
+                    undefined,
+                    undefined
+                );
+            } else if (name === 'property') {
+                atRule.params = cssVarsMapping[atRule.params] ?? atRule.params;
+            }
         });
@@ -208,0 +213,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

689946

increased by0.51%

Lines of code

11870

increased by0.46%

Dependency changes

• Updatedpostcss@^8.2.8

• Updatedpostcss-nested@^5.0.5