@stylable/core - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

cjs/functions.d.ts

@@ -18,4 +18,2 @@ import * as postcss from 'postcss';
     UNKNOWN_VAR: (name: string) => string;
-    UNKNOWN_CSS_VAR_USE(name: string): string;
-    ILLEGAL_CSS_VAR_USE(name: string): string;
 };
@@ -22,0 +20,0 @@ export declare function resolveArgumentsValue(options: Pojo<string>, transformer: StylableTransformer, meta: StylableMeta, diagnostics: Diagnostics, node: postcss.Node, variableOverride?: Pojo<string>, path?: string[], cssVarsMapping?: Pojo<string>): Pojo<string>;

cjs/functions.js

@@ -17,5 +17,3 @@ "use strict";
     UNKNOWN_FORMATTER: function (name) { return "cannot find native function or custom formatter called " + name; },
-    UNKNOWN_VAR: function (name) { return "unknown var \"" + name + "\""; },
-    UNKNOWN_CSS_VAR_USE: function (name) { return "unknown custom property \"" + name + "\""; },
-    ILLEGAL_CSS_VAR_USE: function (name) { return "a custom css property must begin with \"--\" (double-dash), but received \"" + name + "\""; }
+    UNKNOWN_VAR: function (name) { return "unknown var \"" + name + "\""; }
 };
@@ -147,9 +145,3 @@ /* tslint:enable:max-line-length */
                             }
-                            else if (diagnostics) {
-                                diagnostics.warn(node, exports.functionWarnings.UNKNOWN_CSS_VAR_USE(varWithPrefix), { word: varWithPrefix });
-                            }
                         }
-                        else if (diagnostics) {
-                            diagnostics.warn(node, exports.functionWarnings.ILLEGAL_CSS_VAR_USE(varWithPrefix), { word: varWithPrefix });
-                        }
                         // handle default values
@@ -156,0 +148,0 @@ if (parsedNode.nodes.length > 2) {

cjs/stylable-processor.d.ts

@@ -33,2 +33,3 @@ import * as postcss from 'postcss';
     GLOBAL_CSS_VAR_MISSING_COMMA(name: string): string;
+    ILLEGAL_CSS_VAR_USE(name: string): string;
 };
@@ -50,3 +51,5 @@ export declare class StylableProcessor {
     protected addVarSymbols(rule: postcss.Rule): void;
-    protected addCSSVars(decl: postcss.Declaration): void;
+    protected handleCSSVarUse(decl: postcss.Declaration): void;
+    protected addCSSVarFromProp(decl: postcss.Declaration): void;
+    protected addCSSVar(varName: string, decl: postcss.Declaration): void;
     protected handleDirectives(rule: SRule, decl: postcss.Declaration): void;
@@ -53,0 +56,0 @@ protected setClassGlobalMapping(decl: postcss.Declaration, rule: postcss.Rule): void;

cjs/stylable-processor.js

@@ -27,2 +27,3 @@ "use strict";
 __export(require("./stylable-meta")); /* TEMP EXPORT */
+var valueParser = require('postcss-value-parser');
 var parseNamed = stylable_value_parsers_1.SBTypesParsers[stylable_value_parsers_1.valueMapping.named];
@@ -60,3 +61,4 @@ var parseMixin = stylable_value_parsers_1.SBTypesParsers[stylable_value_parsers_1.valueMapping.mixin];
     ILLEGAL_GLOBAL_CSS_VAR: function (name) { return "\"@st-global-custom-property\" received the value \"" + name + "\", but it must begin with \"--\" (double-dash)"; },
-    GLOBAL_CSS_VAR_MISSING_COMMA: function (name) { return "\"@st-global-custom-property\" received the value \"" + name + "\", but its values must be comma separated"; }
+    GLOBAL_CSS_VAR_MISSING_COMMA: function (name) { return "\"@st-global-custom-property\" received the value \"" + name + "\", but its values must be comma separated"; },
+    ILLEGAL_CSS_VAR_USE: function (name) { return "a custom css property must begin with \"--\" (double-dash), but received \"" + name + "\""; }
 };
@@ -87,4 +89,7 @@ /* tslint:enable:max-line-length */
             else if (stylable_utils_1.isCSSVarProp(decl.prop)) {
-                _this.addCSSVars(decl);
+                _this.addCSSVarFromProp(decl);
             }
+            if (decl.value.includes('var(')) {
+                _this.handleCSSVarUse(decl);
+            }
             stylable_assets_1.processDeclarationUrls(decl, function (node) {
@@ -347,12 +352,32 @@ _this.meta.urls.push(node.url);
     };
-    StylableProcessor.prototype.addCSSVars = function (decl) {
+    StylableProcessor.prototype.handleCSSVarUse = function (decl) {
+        var _this = this;
+        var parsed = valueParser(decl.value);
+        parsed.walk(function (node) {
+            if (node.type === 'function' && node.value === 'var' && node.nodes) {
+                var varName = stylable_value_parsers_1.groupValues(node.nodes)[0];
+                _this.addCSSVar(valueParser.stringify(varName).trim(), decl);
+            }
+        });
+    };
+    StylableProcessor.prototype.addCSSVarFromProp = function (decl) {
         var varName = decl.prop.trim();
-        if (!this.meta.cssVars[varName]) {
-            var cssVarSymbol = {
-                _kind: 'cssVar',
-                name: varName
-            };
-            this.meta.cssVars[varName] = cssVarSymbol;
-            this.meta.mappedSymbols[varName] = cssVarSymbol;
+        this.addCSSVar(varName, decl);
+    };
+    StylableProcessor.prototype.addCSSVar = function (varName, decl) {
+        if (stylable_utils_1.isCSSVarProp(varName)) {
+            if (!this.meta.cssVars[varName]) {
+                var cssVarSymbol = {
+                    _kind: 'cssVar',
+                    name: varName
+                };
+                this.meta.cssVars[varName] = cssVarSymbol;
+                if (!this.meta.mappedSymbols[varName]) {
+                    this.meta.mappedSymbols[varName] = cssVarSymbol;
+                }
+            }
         }
+        else {
+            this.diagnostics.warn(decl, exports.processorWarnings.ILLEGAL_CSS_VAR_USE(varName), { word: varName });
+        }
     };
@@ -359,0 +384,0 @@ StylableProcessor.prototype.handleDirectives = function (rule, decl) {

cjs/stylable-transformer.js

@@ -217,4 +217,4 @@ "use strict";
                         cssVarsMapping[symbolName] = importedVar.symbol.global ?
-                            symbolName :
-                            stylable_utils_1.generateScopedCSSVar(importedVar.meta.namespace, symbolName.slice(2));
+                            importedVar.symbol.name :
+                            stylable_utils_1.generateScopedCSSVar(importedVar.meta.namespace, importedVar.symbol.name.slice(2));
                     }
@@ -228,5 +228,7 @@ }
             var cssVar = meta.cssVars[localVarName];
-            cssVarsMapping[localVarName] = cssVar.global ?
-                localVarName :
-                stylable_utils_1.generateScopedCSSVar(meta.namespace, localVarName.slice(2));
+            if (!cssVarsMapping[localVarName]) {
+                cssVarsMapping[localVarName] = cssVar.global ?
+                    localVarName :
+                    stylable_utils_1.generateScopedCSSVar(meta.namespace, localVarName.slice(2));
+            }
         }
@@ -233,0 +235,0 @@ return cssVarsMapping;

cjs/stylable-utils.js

@@ -165,3 +165,3 @@ "use strict";
                 : selector_utils_1.parseSelector(node.selector);
-            var matchesSelectors = isRoot ? ast.nodes : ast.nodes.filter(containsPrefix);
+            var matchesSelectors = isRoot ? ast.nodes : ast.nodes.filter(function (node) { return containsPrefix(node); });
             if (matchesSelectors.length) {
@@ -168,0 +168,0 @@ var selector = selector_utils_1.stringifySelector(__assign({}, ast, { nodes: matchesSelectors.map(function (selectorNode) {

package.json

 {
   "name": "@stylable/core",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "CSS for Components",
@@ -50,3 +50,3 @@ "main": "./cjs/index.js",
   "license": "BSD-3-Clause",
-  "gitHead": "b186851d1bcd0f553cd9944503db65d1dd63a82c"
+  "gitHead": "96ec3cf66c2576727841de0ee7b66537262d310f"
 }

src/functions.ts

@@ -25,5 +25,3 @@ import * as postcss from 'postcss';
     UNKNOWN_FORMATTER: (name: string) => `cannot find native function or custom formatter called ${name}`,
-    UNKNOWN_VAR: (name: string) => `unknown var "${name}"`,
-    UNKNOWN_CSS_VAR_USE(name: string) { return `unknown custom property "${name}"`; },
-    ILLEGAL_CSS_VAR_USE(name: string) { return `a custom css property must begin with "--" (double-dash), but received "${name}"`; }
+    UNKNOWN_VAR: (name: string) => `unknown var "${name}"`
 };
@@ -225,9 +223,3 @@ /* tslint:enable:max-line-length */
                                 parsedNode.nodes[0].value = cssVarsMapping[varWithPrefix];
-                            } else if (diagnostics) {
-                                diagnostics.warn(
-                                    node, functionWarnings.UNKNOWN_CSS_VAR_USE(varWithPrefix), { word: varWithPrefix });
                             }
-                        } else if (diagnostics) {
-                            diagnostics.warn(
-                                node, functionWarnings.ILLEGAL_CSS_VAR_USE(varWithPrefix), { word: varWithPrefix });
                         }
@@ -234,0 +226,0 @@

src/stylable-processor.ts

@@ -27,5 +27,7 @@ import hash from 'murmurhash';
 import { CUSTOM_SELECTOR_RE, expandCustomSelectors, getAlias, isCSSVarProp } from './stylable-utils';
-import { rootValueMapping, SBTypesParsers, stValuesMap, valueMapping } from './stylable-value-parsers';
+import { groupValues, rootValueMapping, SBTypesParsers, stValuesMap, valueMapping } from './stylable-value-parsers';
+import { ParsedValue } from './types';
 import { deprecated, filename2varname, stripQuotation } from './utils';
 export * from './stylable-meta'; /* TEMP EXPORT */
+const valueParser = require('postcss-value-parser');
 
@@ -65,3 +67,4 @@ const parseNamed = SBTypesParsers[valueMapping.named];
     ILLEGAL_GLOBAL_CSS_VAR(name: string) { return `"@st-global-custom-property" received the value "${name}", but it must begin with "--" (double-dash)`; },
-    GLOBAL_CSS_VAR_MISSING_COMMA(name: string) { return `"@st-global-custom-property" received the value "${name}", but its values must be comma separated`; }
+    GLOBAL_CSS_VAR_MISSING_COMMA(name: string) { return `"@st-global-custom-property" received the value "${name}", but its values must be comma separated`; },
+    ILLEGAL_CSS_VAR_USE(name: string) { return `a custom css property must begin with "--" (double-dash), but received "${name}"`; }
 };
@@ -92,5 +95,9 @@ /* tslint:enable:max-line-length */
             } else if (isCSSVarProp(decl.prop)) {
-                this.addCSSVars(decl);
+                this.addCSSVarFromProp(decl);
             }
 
+            if (decl.value.includes('var(')) {
+                this.handleCSSVarUse(decl);
+            }
+
             processDeclarationUrls(decl, node => {
@@ -369,13 +376,33 @@ this.meta.urls.push(node.url!);
 
-    protected addCSSVars(decl: postcss.Declaration) {
+    protected handleCSSVarUse(decl: postcss.Declaration) {
+        const parsed = valueParser(decl.value);
+        parsed.walk((node: ParsedValue) => {
+            if (node.type === 'function' && node.value === 'var' && node.nodes) {
+                const varName = groupValues(node.nodes)[0];
+                this.addCSSVar(valueParser.stringify(varName).trim(), decl);
+            }
+        });
+    }
+
+    protected addCSSVarFromProp(decl: postcss.Declaration) {
         const varName = decl.prop.trim();
+        this.addCSSVar(varName, decl);
+    }
 
-        if (!this.meta.cssVars[varName]) {
-            const cssVarSymbol: CSSVarSymbol = {
-                _kind: 'cssVar',
-                name: varName
-            };
-            this.meta.cssVars[varName] = cssVarSymbol;
-            this.meta.mappedSymbols[varName] = cssVarSymbol;
+    protected addCSSVar(varName: string, decl: postcss.Declaration) {
+        if (isCSSVarProp(varName)) {
+            if (!this.meta.cssVars[varName]) {
+                const cssVarSymbol: CSSVarSymbol = {
+                    _kind: 'cssVar',
+                    name: varName
+                };
+                this.meta.cssVars[varName] = cssVarSymbol;
+                if (!this.meta.mappedSymbols[varName]) {
+                    this.meta.mappedSymbols[varName] = cssVarSymbol;
+                }
+            }
+        } else {
+            this.diagnostics.warn(decl, processorWarnings.ILLEGAL_CSS_VAR_USE(varName), { word: varName });
         }
+
     }
@@ -382,0 +409,0 @@

src/stylable-transformer.ts

@@ -367,4 +367,4 @@ import cloneDeep from 'lodash.clonedeep';
                         cssVarsMapping[symbolName] = importedVar.symbol.global ?
-                            symbolName :
-                            generateScopedCSSVar(importedVar.meta.namespace, symbolName.slice(2));
+                            importedVar.symbol.name :
+                            generateScopedCSSVar(importedVar.meta.namespace, importedVar.symbol.name.slice(2));
                     }
@@ -378,5 +378,8 @@ }
             const cssVar = meta.cssVars[localVarName];
-            cssVarsMapping[localVarName] = cssVar.global ?
-                localVarName :
-                generateScopedCSSVar(meta.namespace, localVarName.slice(2));
+
+            if (!cssVarsMapping[localVarName]) {
+                cssVarsMapping[localVarName] = cssVar.global ?
+                    localVarName :
+                    generateScopedCSSVar(meta.namespace, localVarName.slice(2));
+            }
         }
@@ -383,0 +386,0 @@

src/stylable-utils.ts

@@ -190,3 +190,3 @@ import cloneDeep from 'lodash.clonedeep';
 
-            const matchesSelectors = isRoot ? ast.nodes : ast.nodes.filter(containsPrefix);
+            const matchesSelectors = isRoot ? ast.nodes : ast.nodes.filter(node => containsPrefix(node));
 
@@ -193,0 +193,0 @@ if (matchesSelectors.length) {

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

542806

increased by0.41%

Lines of code

8845

increased by0.43%

No dependency changes