stylable - npm Package Compare versions

Comparing version 4.0.6 to 4.0.7

dist/src/index.d.ts

 export { safeParse } from "./parser";
 export { cachedProcessFile, FileProcessor } from "./cached-process-file";
-export { createEmptyMeta, StylableMeta, process, SDecl, SRule } from "./stylable-processor";
+export { createEmptyMeta, StylableMeta, process, SDecl, SRule, ClassSymbol, ElementSymbol, Imported, ImportSymbol, VarSymbol } from "./stylable-processor";
 export { StylableTransformer, StylableResults } from "./stylable-transformer";
@@ -5,0 +5,0 @@ export { CSSResolve, JSResolve, StylableResolver } from "./postcss-resolver";

dist/src/stylable-transformer.d.ts

 import * as postcss from 'postcss';
-import { StylableMeta, SRule, ClassSymbol, StylableSymbol } from './stylable-processor';
+import { StylableMeta, SRule, ClassSymbol, StylableSymbol, ElementSymbol } from './stylable-processor';
 import { FileProcessor } from "./cached-process-file";
@@ -39,3 +39,3 @@ import { SelectorAstNode } from "./selector-utils";
     handlePseudoElement(meta: StylableMeta, node: SelectorAstNode, name: string): CSSResolve;
-    handlePseudoClass(meta: StylableMeta, node: SelectorAstNode, name: string, symbol: StylableSymbol): StylableMeta;
+    handlePseudoClass(meta: StylableMeta, node: SelectorAstNode, name: string, symbol: StylableSymbol, origin: StylableMeta, originSymbol: ClassSymbol | ElementSymbol): StylableMeta;
     autoStateAttrName(stateName: string, namespace: string): string;
@@ -42,0 +42,0 @@ cssStates(stateMapping: Pojo<boolean> | null | undefined, namespace: string): Pojo<boolean>;

dist/src/stylable-transformer.js

@@ -281,2 +281,3 @@ "use strict";
         var symbol;
+        var originSymbol;
         var selectorAst = selector_utils_1.parseSelector(rule.selector); //.selectorAst;
@@ -288,5 +289,7 @@ selector_utils_1.traverseNode(selectorAst, function (node) {
                 symbol = meta.classes[meta.root];
+                originSymbol = symbol;
             }
             else if (type === 'class') {
                 var next = _this.handleClass(current, node, name, metaExports);
+                originSymbol = current.classes[name];
                 symbol = next.symbol;
@@ -297,2 +300,3 @@ current = next.meta;
                 var next = _this.handleElement(current, node, name);
+                originSymbol = current.elements[name];
                 symbol = next.symbol;
@@ -307,3 +311,3 @@ current = next.meta;
             else if (type === 'pseudo-class') {
-                current = _this.handlePseudoClass(current, node, name, symbol);
+                current = _this.handlePseudoClass(current, node, name, symbol, meta, originSymbol);
             }
@@ -428,5 +432,19 @@ else if (type === 'nested-pseudo-class') {
     };
-    StylableTransformer.prototype.handlePseudoClass = function (meta, node, name, symbol) {
+    StylableTransformer.prototype.handlePseudoClass = function (meta, node, name, symbol, origin, originSymbol) {
         var current = meta;
         var currentSymbol = symbol;
+        if (symbol !== originSymbol) {
+            var states = originSymbol[stylable_value_parsers_1.valueMapping.states];
+            if (states && states.hasOwnProperty(name)) {
+                if (states[name] === null) {
+                    node.type = 'attribute';
+                    node.content = this.autoStateAttrName(name, origin.namespace);
+                }
+                else {
+                    node.type = 'invalid'; // simply concat global mapped selector - ToDo: maybe change to 'selector'
+                    node.value = states[name];
+                }
+                return current;
+            }
+        }
         while (current && currentSymbol) {
@@ -433,0 +451,0 @@ if (currentSymbol && currentSymbol._kind === 'class') {

dist/tests/stylable-transformer/scoping.spec.js

@@ -333,2 +333,18 @@ "use strict";
         });
+        it('custom states lookup order', function () {
+            var result = generate_test_util_1.generateStylableRoot({
+                entry: "/entry.st.css",
+                files: {
+                    '/entry.st.css': {
+                        namespace: 'entry',
+                        content: "\n                            :import {\n                                -st-from: \"./inner.st.css\";\n                                -st-default: Inner;\n                            }\n                            .my-class { \n                                -st-states: my-state;\n                                -st-extends: Inner;\n                            }\n                            .my-class:my-state {}\n                        "
+                    },
+                    '/inner.st.css': {
+                        namespace: 'inner',
+                        content: "\n                            .root { \n                                -st-states: my-state;\n                            }\n                        "
+                    }
+                }
+            });
+            chai_1.expect(result.nodes[1].selector).to.equal('.entry--root .entry--my-class.inner--root[data-entry-my-state]');
+        });
         it('custom states from imported type', function () {
@@ -335,0 +351,0 @@ var result = generate_test_util_1.generateStylableRoot({

dist/tests/utils/generate-test-util.js

@@ -18,10 +18,6 @@ "use strict";
 var value_template_1 = require("../../src/value-template");
-var deindent = require('deindent');
+var memory_minimal_fs_1 = require("../../src/memory-minimal-fs");
 function generateFromMock(config) {
     var files = config.files;
-    for (var file in files) {
-        if (files[file].mtime === undefined) {
-            files[file].mtime = new Date();
-        }
-    }
+    var _a = memory_minimal_fs_1.createMinimalFS(config), fs = _a.fs, requireModule = _a.requireModule;
     var fileProcessor = cached_process_file_1.cachedProcessFile(function (from, content) {
@@ -31,24 +27,3 @@ var meta = stylable_processor_1.process(postcss.parse(content, { from: from }));
         return meta;
-    }, {
-        readFileSync: function (path) {
-            return deindent(files[path].content).trim();
-        },
-        statSync: function (path) {
-            return {
-                mtime: files[path].mtime
-            };
-        }
-    });
-    function requireModule(path) {
-        if (!path.match(/\.js$/)) {
-            path += '.js';
-        }
-        var fn = new Function("module", "exports", files[path].content);
-        var _module = {
-            id: path,
-            exports: {}
-        };
-        fn(_module, _module.exports);
-        return _module.exports;
-    }
+    }, fs);
     var t = new stylable_transformer_1.StylableTransformer({
@@ -55,0 +30,0 @@ fileProcessor: fileProcessor,

package.json

 {
   "name": "stylable",
-  "version": "4.0.6",
+  "version": "4.0.7",
   "description": "",
@@ -5,0 +5,0 @@ "main": "./dist/src/index.js",

src/index.ts

 export { safeParse } from "./parser";
 export { cachedProcessFile, FileProcessor } from "./cached-process-file";
-export { createEmptyMeta, StylableMeta, process, SDecl, SRule } from "./stylable-processor";
+export { createEmptyMeta, StylableMeta, process, SDecl, SRule, ClassSymbol, ElementSymbol, Imported, ImportSymbol, VarSymbol } from "./stylable-processor";
 export { StylableTransformer, StylableResults } from "./stylable-transformer";
@@ -5,0 +5,0 @@ export { CSSResolve, JSResolve, StylableResolver } from "./postcss-resolver";

src/stylable-transformer.ts

 import * as postcss from 'postcss';
-import { StylableMeta, SRule, ClassSymbol, StylableSymbol, SAtRule, SDecl } from './stylable-processor';
+import { StylableMeta, SRule, ClassSymbol, StylableSymbol, SAtRule, SDecl, ElementSymbol } from './stylable-processor';
 import { FileProcessor } from "./cached-process-file";
@@ -302,2 +302,3 @@ import { traverseNode, stringifySelector, SelectorAstNode, parseSelector } from "./selector-utils";
         let symbol: StylableSymbol;
+        let originSymbol: ClassSymbol | ElementSymbol;
 
@@ -310,4 +311,6 @@ let selectorAst = parseSelector(rule.selector) //.selectorAst;
                 symbol = meta.classes[meta.root];
+                originSymbol = symbol;
             } else if (type === 'class') {
                 const next = this.handleClass(current, node, name, metaExports);
+                originSymbol = current.classes[name];
                 symbol = next.symbol;
@@ -317,2 +320,3 @@ current = next.meta;
                 const next = this.handleElement(current, node, name);
+                originSymbol = current.elements[name];
                 symbol = next.symbol;
@@ -325,3 +329,3 @@ current = next.meta;
             } else if (type === 'pseudo-class') {
-                current = this.handlePseudoClass(current, node, name, symbol);
+                current = this.handlePseudoClass(current, node, name, symbol, meta, originSymbol);
             } else if (type === 'nested-pseudo-class') {
@@ -377,3 +381,3 @@ if (name === 'global') {
         }
-        
+
         const scopedName = this.exportClass(meta, name, symbol, metaExports);
@@ -419,3 +423,3 @@
 
-        return {meta, symbol: tRule};
+        return { meta, symbol: tRule };
     }
@@ -440,3 +444,3 @@ handlePseudoElement(meta: StylableMeta, node: SelectorAstNode, name: string): CSSResolve {
             if (symbol._kind === 'class') {
-    
+
                 node.type = 'class';
@@ -447,3 +451,3 @@ node.before = symbol[valueMapping.root] ? '' : ' ';
                 let extend = symbol[valueMapping.extends];
-                if(extend && extend._kind === 'class' && extend.alias){
+                if (extend && extend._kind === 'class' && extend.alias) {
                     extend = extend.alias;
@@ -461,6 +465,21 @@ }
     }
-    handlePseudoClass(meta: StylableMeta, node: SelectorAstNode, name: string, symbol: StylableSymbol) {
+    handlePseudoClass(meta: StylableMeta, node: SelectorAstNode, name: string, symbol: StylableSymbol, origin: StylableMeta, originSymbol: ClassSymbol | ElementSymbol) {
         let current = meta;
         let currentSymbol = symbol;
 
+        if (symbol !== originSymbol) {
+            const states = originSymbol[valueMapping.states];
+            if (states && states.hasOwnProperty(name)) {
+                if (states[name] === null) {
+                    node.type = 'attribute';
+                    node.content = this.autoStateAttrName(name, origin.namespace);
+                } else {
+                    node.type = 'invalid';// simply concat global mapped selector - ToDo: maybe change to 'selector'
+                    node.value = states[name];
+                }
+                return current;
+            }
+            
+        }
+
         while (current && currentSymbol) {
@@ -467,0 +486,0 @@ if (currentSymbol && currentSymbol._kind === 'class') {

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

474517

increased by0.63%

Lines of code

6653

increased by0.39%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes