stylable - npm Package Compare versions

Comparing version 5.3.3 to 5.3.4

dist/src/pseudo-states.js

@@ -180,3 +180,3 @@ "use strict";
             else if (extend) {
-                if (current.mappedSymbols[extend.name]) {
+                if (current.mappedSymbols[extend.name] && current.mappedSymbols[extend.name]._kind !== 'import') {
                     var nextCurrentSymbol = current.mappedSymbols[extend.name];
@@ -183,0 +183,0 @@ if (currentSymbol === nextCurrentSymbol) {

dist/src/stylable-transformer.d.ts

@@ -72,2 +72,3 @@ import * as postcss from 'postcss';
     scopeKeyframes(ast: postcss.Root, meta: StylableMeta): Pojo<KeyFrameWithNode>;
+    transformGlobals(ast: postcss.Root): void;
     resolveSelectorElements(meta: StylableMeta, selector: string): ResolvedElement[][];
@@ -74,0 +75,0 @@ scopeSelector(originMeta: StylableMeta, selector: string, metaExports?: Pojo<string>, scopeRoot?: boolean, calcPaths?: boolean, rule?: postcss.Rule): ScopedSelectorResults;

dist/src/stylable-transformer.js

@@ -31,2 +31,3 @@ "use strict";
         this.transformAst(ast, meta, this.scopeRoot, metaExports);
+        this.transformGlobals(ast);
         if (this.optimize) {
@@ -260,2 +261,15 @@ stylable_optimizer_1.removeSTDirective(ast);
     };
+    StylableTransformer.prototype.transformGlobals = function (ast) {
+        ast.walkRules(function (r) {
+            var selectorAst = selector_utils_1.parseSelector(r.selector);
+            selector_utils_1.traverseNode(selectorAst, function (node) {
+                if (node.type === 'nested-pseudo-class' && node.name === 'global') {
+                    node.type = 'selector';
+                    return true;
+                }
+                return undefined;
+            });
+            r.selector = selector_utils_1.stringifySelector(selectorAst);
+        });
+    };
     StylableTransformer.prototype.resolveSelectorElements = function (meta, selector) {
@@ -322,3 +336,3 @@ return this.scopeSelector(meta, selector, undefined, false, true).elements;
                     if (name === 'global') {
-                        node.type = 'selector';
+                        // node.type = 'selector';
                         return true;
@@ -363,3 +377,6 @@ }
             var first = selector.nodes[0];
-            if (first && first.type === 'selector' && first.name === 'global') {
+            /* This finds a transformed or non transform global selector */
+            if (first &&
+                (first.type === 'selector' || first.type === 'nested-pseudo-class') &&
+                first.name === 'global') {
                 return;
@@ -366,0 +383,0 @@ }

dist/tests/bundle/base.spec.js

@@ -300,2 +300,38 @@ "use strict";
         });
+        it('resolve states from imported elements through 3rd party index', function () {
+            var output = generate_test_util_1.generateStylableOutput({
+                entry: '/entry.st.css',
+                resolve: {
+                    symlinks: false,
+                    alias: {
+                        components: '/node_modules/components'
+                    }
+                },
+                usedFiles: [
+                    '/entry.st.css',
+                    '/node_modules/components/used.st.css'
+                ],
+                files: {
+                    '/entry.st.css': {
+                        namespace: 'entry',
+                        content: "\n                            :import {\n                                -st-from: 'components/index.st.css';\n                                -st-named: Used;\n                            }\n                            .root {-st-extends: Used;}\n                            .root:error {color: red;}\n                        "
+                    },
+                    '/node_modules/components/package.json': {
+                        content: "{\"name\": \"components\"}"
+                    },
+                    '/node_modules/components/index.st.css': {
+                        namespace: 'index',
+                        content: "\n                            :import {\n                                -st-from: './used.st.css';\n                                -st-default: Used;\n                            }\n                            Used { }\n                        "
+                    },
+                    '/node_modules/components/used.st.css': {
+                        namespace: 'used',
+                        content: "\n                            .root {-st-states: error;}\n                        "
+                    }
+                }
+            });
+            var expected = [".used--root {-st-states: error;}",
+                ".entry--root.used--root {-st-extends: Used;}",
+                ".entry--root.used--root[data-used-error] {color: red;}"];
+            chai_1.expect(output).to.eql(expected.join('\n'));
+        });
     });
@@ -302,0 +338,0 @@ describe('specific used files', function () {

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

@@ -20,3 +20,41 @@ "use strict";
     });
+    it('should support :global() as mixin', function () {
+        var result = generate_test_util_1.generateStylableRoot({
+            entry: "/style.st.css",
+            // scopeRoot: false,
+            files: {
+                '/style.st.css': {
+                    namespace: 'style',
+                    content: "\n                        :import {\n                            -st-from: \"./comp.st.css\";\n                            -st-default: Comp;\n                        }\n                        .root {\n                            -st-mixin: Comp;\n                        }\n                    "
+                },
+                '/comp.st.css': {
+                    namespace: 'comp',
+                    content: "\n                        :global(.btn) .root {}\n                    "
+                }
+            }
+        });
+        chai_1.expect(result.nodes[1].selector).to.equal('.btn .style--root');
+    });
+    it('should support nested :global() as mixin', function () {
+        var result = generate_test_util_1.generateStylableRoot({
+            entry: "/style.st.css",
+            // scopeRoot: false,
+            files: {
+                '/style.st.css': {
+                    namespace: 'style',
+                    content: "\n                        :import {\n                            -st-from: \"./mixin.st.css\";\n                            -st-default: Mixin;\n                        }\n                        .root {\n                            -st-mixin: Mixin;\n                        }\n                    "
+                },
+                '/mixin.st.css': {
+                    namespace: 'mixin',
+                    content: "\n                        :import {\n                            -st-from: \"./comp.st.css\";\n                            -st-default: Comp;\n                        }\n                        .root {\n                            -st-mixin: Comp;\n                        }\n                    "
+                },
+                '/comp.st.css': {
+                    namespace: 'comp',
+                    content: "\n                        :global(.btn) .root {}\n                    "
+                }
+            }
+        });
+        chai_1.expect(result.nodes[1].selector).to.equal('.btn .style--root');
+    });
 });
 //# sourceMappingURL=global.spec.js.map

package.json

 {
   "name": "stylable",
-  "version": "5.3.3",
+  "version": "5.3.4",
   "description": "CSS for Components",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

src/pseudo-states.ts

@@ -263,3 +263,3 @@ import * as postcss from 'postcss';
             } else if (extend) {
-                if (current.mappedSymbols[extend.name]) {
+                if (current.mappedSymbols[extend.name] && current.mappedSymbols[extend.name]._kind !== 'import') {
                     const nextCurrentSymbol = current.mappedSymbols[extend.name];
@@ -266,0 +266,0 @@ if (currentSymbol === nextCurrentSymbol) {

src/stylable-transformer.ts

@@ -116,2 +116,3 @@ import * as postcss from 'postcss';
         this.transformAst(ast, meta, this.scopeRoot, metaExports);
+        this.transformGlobals(ast);
         if (this.optimize) { removeSTDirective(ast); }
@@ -393,2 +394,15 @@ meta.transformDiagnostics = this.diagnostics;
     }
+    public transformGlobals(ast: postcss.Root) {
+        ast.walkRules(r => {
+            const selectorAst = parseSelector(r.selector);
+            traverseNode(selectorAst, node => {
+                if (node.type === 'nested-pseudo-class' && node.name === 'global') {
+                    node.type = 'selector';
+                    return true;
+                }
+                return undefined;
+            });
+            r.selector = stringifySelector(selectorAst);
+        });
+    }
     public resolveSelectorElements(meta: StylableMeta, selector: string): ResolvedElement[][] {
@@ -455,3 +469,3 @@ return this.scopeSelector(meta, selector, undefined, false, true).elements;
                     if (name === 'global') {
-                        node.type = 'selector';
+                        // node.type = 'selector';
                         return true;
@@ -499,3 +513,7 @@ }
             const first = selector.nodes[0];
-            if (first && first.type === 'selector' && first.name === 'global') {
+            /* This finds a transformed or non transform global selector */
+            if (first &&
+                (first.type === 'selector' || first.type === 'nested-pseudo-class') &&
+                first.name === 'global'
+            ) {
                 return;
@@ -502,0 +520,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

1129317

increased by0.74%

Lines of code

15479

increased by0.72%

No dependency changes