@stylable/core - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/src/optimizer/classname-optimizer.d.ts

@@ -8,6 +8,6 @@ import * as postcss from 'postcss';
     constructor();
-    rewriteSelector(selector: string): string;
+    rewriteSelector(selector: string, globals?: Pojo<boolean>): string;
     generateName(name: string): string;
-    optimizeAstAndExports(ast: postcss.Root, exported: Pojo<string>, classes?: string[]): void;
+    optimizeAstAndExports(ast: postcss.Root, exported: Pojo<string>, classes?: string[], globals?: Pojo<boolean>): void;
 }
 //# sourceMappingURL=classname-optimizer.d.ts.map

dist/src/optimizer/classname-optimizer.js

@@ -10,7 +10,8 @@ "use strict";
     }
-    StylableClassNameOptimizer.prototype.rewriteSelector = function (selector) {
+    StylableClassNameOptimizer.prototype.rewriteSelector = function (selector, globals) {
         var _this = this;
+        if (globals === void 0) { globals = {}; }
         var ast = selector_utils_1.parseSelector(selector);
         selector_utils_1.traverseNode(ast, function (node) {
-            if (node.type === 'class') {
+            if (node.type === 'class' && !globals[node.name]) {
                 if (!_this.context.names[node.name]) {
@@ -27,7 +28,8 @@ _this.generateName(node.name);
     };
-    StylableClassNameOptimizer.prototype.optimizeAstAndExports = function (ast, exported, classes) {
+    StylableClassNameOptimizer.prototype.optimizeAstAndExports = function (ast, exported, classes, globals) {
         var _this = this;
         if (classes === void 0) { classes = Object.keys(exported); }
+        if (globals === void 0) { globals = {}; }
         ast.walkRules(function (rule) {
-            rule.selector = _this.rewriteSelector(rule.selector);
+            rule.selector = _this.rewriteSelector(rule.selector, globals);
         });
@@ -34,0 +36,0 @@ classes.forEach(function (originName) {

dist/src/optimizer/stylable-optimizer.js

@@ -44,3 +44,3 @@ "use strict";
         if (config.classNameOptimizations) {
-            this.classNameOptimizer.optimizeAstAndExports(outputAst, jsExports, Object.keys(meta.classes));
+            this.classNameOptimizer.optimizeAstAndExports(outputAst, jsExports, Object.keys(meta.classes), meta.globals);
         }
@@ -47,0 +47,0 @@ };

dist/src/stylable-meta.d.ts

@@ -26,2 +26,3 @@ import * as postcss from 'postcss';
     scopes: postcss.AtRule[];
+    globals: Pojo<boolean>;
     constructor(ast: postcss.Root, diagnostics: Diagnostics);
@@ -28,0 +29,0 @@ }

dist/src/stylable-meta.js

@@ -11,2 +11,3 @@ "use strict";
         this.diagnostics = diagnostics;
+        this.globals = {};
         var rootSymbol = (_a = {
@@ -13,0 +14,0 @@ _kind: 'class',

dist/src/stylable-transformer.d.ts

@@ -82,3 +82,4 @@ import * as postcss from 'postcss';
     scopeKeyframes(ast: postcss.Root, meta: StylableMeta): Pojo<KeyFrameWithNode>;
-    transformGlobals(ast: postcss.Root): void;
+    addGlobalsToMeta(selectorAst: SelectorAstNode[], meta?: StylableMeta): void;
+    transformGlobals(ast: postcss.Root, meta: StylableMeta): void;
     resolveSelectorElements(meta: StylableMeta, selector: string): ResolvedElement[][];
@@ -89,10 +90,11 @@ scopeSelector(originMeta: StylableMeta, selector: string, metaExports?: Pojo<string>, calcPaths?: boolean, rule?: postcss.Rule): ScopedSelectorResults;
     scopeRule(meta: StylableMeta, rule: postcss.Rule, metaExports?: Pojo<string>): string;
-    handleClass(meta: StylableMeta, node: SelectorAstNode, name: string, metaExports?: Pojo<string>, rule?: postcss.Rule): CSSResolve;
-    handleElement(meta: StylableMeta, node: SelectorAstNode, name: string): CSSResolve | {
+    handleClass(meta: StylableMeta, node: SelectorAstNode, name: string, metaExports?: Pojo<string>, rule?: postcss.Rule, originMeta?: StylableMeta): CSSResolve;
+    handleElement(meta: StylableMeta, node: SelectorAstNode, name: string, originMeta?: StylableMeta): CSSResolve | {
         meta: StylableMeta;
         symbol: StylableSymbol;
     };
-    handlePseudoElement(meta: StylableMeta, node: SelectorAstNode, name: string, selectorNode: SelectorAstNode, addedSelectors: AdditionalSelector[], rule?: postcss.Rule): CSSResolve;
+    handlePseudoElement(meta: StylableMeta, node: SelectorAstNode, name: string, selectorNode: SelectorAstNode, addedSelectors: AdditionalSelector[], rule?: postcss.Rule, originMeta?: StylableMeta): CSSResolve;
     cssStates(stateMapping: Pojo<boolean> | null | undefined, namespace: string): {};
     scope(name: string, namespace: string, delimiter?: string): string;
+    private resetTransformProperties;
 }
@@ -99,0 +101,0 @@ export declare function removeSTDirective(root: postcss.Root): void;

dist/src/stylable-transformer.js

@@ -45,5 +45,5 @@ "use strict";
         var metaExports = {};
-        var ast = meta.outputAst = meta.ast.clone();
+        var ast = this.resetTransformProperties(meta);
         this.transformAst(ast, meta, metaExports);
-        this.transformGlobals(ast);
+        this.transformGlobals(ast, meta);
         meta.transformDiagnostics = this.diagnostics;
@@ -201,3 +201,17 @@ var result = { meta: meta, exports: metaExports };
     };
-    StylableTransformer.prototype.transformGlobals = function (ast) {
+    StylableTransformer.prototype.addGlobalsToMeta = function (selectorAst, meta) {
+        if (!meta) {
+            return;
+        }
+        for (var _i = 0, selectorAst_1 = selectorAst; _i < selectorAst_1.length; _i++) {
+            var ast = selectorAst_1[_i];
+            selector_utils_1.traverseNode(ast, function (inner) {
+                if (inner.type === 'class') {
+                    meta.globals[inner.name] = true;
+                }
+            });
+        }
+    };
+    StylableTransformer.prototype.transformGlobals = function (ast, meta) {
+        var _this = this;
         ast.walkRules(function (r) {
@@ -207,2 +221,3 @@ var selectorAst = selector_utils_1.parseSelector(r.selector);
                 if (node.type === 'nested-pseudo-class' && node.name === 'global') {
+                    _this.addGlobalsToMeta([node], meta);
                     node.type = 'selector';
@@ -213,2 +228,3 @@ return true;
             });
+            // this.addGlobalsToMeta([selectorAst], meta);
             r.selector = selector_utils_1.stringifySelector(selectorAst);
@@ -254,3 +270,3 @@ });
                 else if (type === 'class') {
-                    var next = _this.handleClass(current, node, name, metaExports, rule);
+                    var next = _this.handleClass(current, node, name, metaExports, rule, originMeta);
                     originSymbol = current.classes[name];
@@ -261,3 +277,3 @@ symbol = next.symbol;
                 else if (type === 'element') {
-                    var next = _this.handleElement(current, node, name);
+                    var next = _this.handleElement(current, node, name, originMeta);
                     originSymbol = current.elements[name];
@@ -268,3 +284,3 @@ symbol = next.symbol;
                 else if (type === 'pseudo-element') {
-                    var next = _this.handlePseudoElement(current, node, name, selectorNode, addedSelectors, rule);
+                    var next = _this.handlePseudoElement(current, node, name, selectorNode, addedSelectors, rule, originMeta);
                     originSymbol = current.classes[name];
@@ -291,3 +307,3 @@ meta = current;
                         name: origin_1.name
-                    }, origin_1.name);
+                    }, origin_1.name, undefined, undefined, originMeta);
                     originSymbol = current.classes[origin_1.name];
@@ -358,3 +374,3 @@ symbol = next.symbol;
     };
-    StylableTransformer.prototype.handleClass = function (meta, node, name, metaExports, rule) {
+    StylableTransformer.prototype.handleClass = function (meta, node, name, metaExports, rule, originMeta) {
         var symbol = meta.classes[name];
@@ -370,2 +386,3 @@ var extend = symbol ? symbol[stylable_value_parsers_1.valueMapping.extends] : undefined;
                     node.nodes = globalMappedNodes_1;
+                    this.addGlobalsToMeta(globalMappedNodes_1, originMeta);
                 }
@@ -402,2 +419,3 @@ else {
             node.nodes = symbol[stylable_value_parsers_1.valueMapping.global] || [];
+            this.addGlobalsToMeta(globalMappedNodes, originMeta);
         }
@@ -425,3 +443,3 @@ else {
     };
-    StylableTransformer.prototype.handleElement = function (meta, node, name) {
+    StylableTransformer.prototype.handleElement = function (meta, node, name, originMeta) {
         var tRule = meta.elements[name];
@@ -435,2 +453,3 @@ var extend = tRule ? meta.mappedSymbols[name] : undefined;
                 node.nodes = next.symbol[stylable_value_parsers_1.valueMapping.global] || [];
+                this.addGlobalsToMeta(node.nodes, originMeta);
             }
@@ -447,3 +466,3 @@ else {
     };
-    StylableTransformer.prototype.handlePseudoElement = function (meta, node, name, selectorNode, addedSelectors, rule) {
+    StylableTransformer.prototype.handlePseudoElement = function (meta, node, name, selectorNode, addedSelectors, rule, originMeta) {
         var next;
@@ -497,2 +516,3 @@ var customSelector = meta.customSelectors[':--' + name];
                     node.nodes = symbol[stylable_value_parsers_1.valueMapping.global] || [];
+                    this.addGlobalsToMeta(node.nodes, originMeta);
                 }
@@ -536,2 +556,6 @@ else {
     };
+    StylableTransformer.prototype.resetTransformProperties = function (meta) {
+        meta.globals = {};
+        return meta.outputAst = meta.ast.clone();
+    };
     return StylableTransformer;
@@ -538,0 +562,0 @@ }());

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

@@ -56,3 +56,33 @@ "use strict";
     });
+    it('should register to all global classes to "meta.globals"', function () {
+        var meta = generate_test_util_1.generateStylableResult({
+            entry: "/style.st.css",
+            files: {
+                '/style.st.css': {
+                    namespace: 'style',
+                    content: "\n                        :import {\n                            -st-from: \"./mixin.st.css\";\n                            -st-named: test, mix;\n                        }\n                        .root {}\n                        .test {}\n                        .x { -st-global: '.a .b'; }\n                        :global(.c .d) {}\n                        :global(.e) {}\n                        .mixIntoMe { -st-mixin: mix; }\n                    "
+                },
+                '/mixin.st.css': {
+                    namespace: 'mixin',
+                    content: "\n                        .test {\n                            -st-global: \".global-test\";\n                        }\n\n                        .mix :global(.global-test2) {}\n                    "
+                }
+            }
+        }).meta;
+        chai_1.expect(meta.globals).to.eql({
+            'global-test': true,
+            'global-test2': true,
+            'a': true,
+            'b': true,
+            'c': true,
+            'd': true,
+            'e': true
+        });
+        chai_1.expect(meta.outputAst.nodes[1].selector).to.equal('.global-test');
+        chai_1.expect(meta.outputAst.nodes[2].selector).to.equal('.a .b');
+        chai_1.expect(meta.outputAst.nodes[3].selector).to.equal('.c .d');
+        chai_1.expect(meta.outputAst.nodes[4].selector).to.equal('.e');
+        chai_1.expect(meta.outputAst.nodes[5].selector).to.equal('.style--mixIntoMe');
+        chai_1.expect(meta.outputAst.nodes[6].selector).to.equal('.style--mixIntoMe .global-test2');
+    });
 });
 //# sourceMappingURL=global.spec.js.map

package.json

 {
   "name": "@stylable/core",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "CSS for Components",
@@ -51,3 +51,3 @@ "main": "./dist/src/index.js",
   "license": "BSD-3-Clause",
-  "gitHead": "c8b12cc3c64557c6721beec89353b25adb8cc78c"
+  "gitHead": "808d87ecaa18e6470750092c9004e771860770e2"
 }

README.md

@@ -0,0 +0,0 @@ # @stylable/core

src/cached-process-file.ts

@@ -0,0 +0,0 @@ import { Pojo } from './types';

src/create-infra-structure.ts

@@ -0,0 +0,0 @@ import { cachedProcessFile, FileProcessor, MinimalFS } from './cached-process-file';

src/diagnostics.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/functions.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/index.ts

@@ -0,0 +0,0 @@ export { safeParse } from './parser';

src/memory-minimal-fs.ts

@@ -0,0 +0,0 @@ const deindent = require('deindent');

src/native-reserved-lists.ts

@@ -0,0 +0,0 @@ // MDN reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

src/optimizer/classname-optimizer.ts

@@ -12,6 +12,6 @@ import * as postcss from 'postcss';
     }
-    public rewriteSelector(selector: string) {
+    public rewriteSelector(selector: string, globals: Pojo<boolean> = {}) {
         const ast = parseSelector(selector);
         traverseNode(ast, node => {
-            if (node.type === 'class') {
+            if (node.type === 'class' && !globals[node.name]) {
                 if (!this.context.names[node.name]) {
@@ -28,5 +28,10 @@ this.generateName(node.name);
     }
-    public optimizeAstAndExports(ast: postcss.Root, exported: Pojo<string>, classes = Object.keys(exported)) {
+    public optimizeAstAndExports(
+        ast: postcss.Root,
+        exported: Pojo<string>,
+        classes = Object.keys(exported),
+        globals: Pojo<boolean> = {}
+    ) {
         ast.walkRules(rule => {
-            rule.selector = this.rewriteSelector(rule.selector);
+            rule.selector = this.rewriteSelector(rule.selector, globals);
         });
@@ -33,0 +38,0 @@ classes.forEach(originName => {

src/optimizer/namespace-optimizer.ts

@@ -0,0 +0,0 @@ import { StylableMeta } from '../stylable-processor';

src/optimizer/stylable-optimizer.ts

@@ -51,3 +51,4 @@ import CleanCSS from 'clean-css';
                 jsExports,
-                Object.keys(meta.classes)
+                Object.keys(meta.classes),
+                meta.globals
             );
@@ -54,0 +55,0 @@ }

src/parser.ts

@@ -0,0 +0,0 @@ import postcss from 'postcss';

src/path.ts

@@ -0,0 +0,0 @@ import * as path from 'path';

src/pseudo-states.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/selector-utils.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/state-validators.ts

@@ -0,0 +0,0 @@ import { Pojo, StateArguments } from './types';

src/stylable-assets.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/stylable-meta.ts

@@ -26,2 +26,3 @@ import * as postcss from 'postcss';
     public scopes: postcss.AtRule[];
+    public globals: Pojo<boolean> = {};
     constructor(public ast: postcss.Root, public diagnostics: Diagnostics) {
@@ -28,0 +29,0 @@ const rootSymbol: ClassSymbol = {

src/stylable-mixins.ts

@@ -0,0 +0,0 @@ import postcss from 'postcss';

src/stylable-processor.ts

@@ -0,0 +0,0 @@ import hash from 'murmurhash';

src/stylable-resolver.ts

@@ -0,0 +0,0 @@ import { FileProcessor } from './cached-process-file';

src/stylable-transformer.ts

@@ -134,5 +134,5 @@ import cloneDeep from 'lodash.clonedeep';
         const metaExports: Pojo<string> = {};
-        const ast = meta.outputAst = meta.ast.clone();
+        const ast = this.resetTransformProperties(meta);
         this.transformAst(ast, meta, metaExports);
-        this.transformGlobals(ast);
+        this.transformGlobals(ast, meta);
         meta.transformDiagnostics = this.diagnostics;
@@ -348,3 +348,14 @@ const result = { meta, exports: metaExports };
     }
-    public transformGlobals(ast: postcss.Root) {
+    public addGlobalsToMeta(selectorAst: SelectorAstNode[], meta?: StylableMeta) {
+        if (!meta) { return; }
+
+        for (const ast of selectorAst) {
+            traverseNode(ast, inner => {
+                if (inner.type === 'class') {
+                    meta.globals[inner.name] = true;
+                }
+            });
+        }
+    }
+    public transformGlobals(ast: postcss.Root, meta: StylableMeta) {
         ast.walkRules(r => {
@@ -354,2 +365,3 @@ const selectorAst = parseSelector(r.selector);
                 if (node.type === 'nested-pseudo-class' && node.name === 'global') {
+                    this.addGlobalsToMeta([node], meta);
                     node.type = 'selector';
@@ -360,2 +372,4 @@ return true;
             });
+            // this.addGlobalsToMeta([selectorAst], meta);
+
             r.selector = stringifySelector(selectorAst);
@@ -402,3 +416,3 @@ });
                 } else if (type === 'class') {
-                    const next = this.handleClass(current, node, name, metaExports, rule);
+                    const next = this.handleClass(current, node, name, metaExports, rule, originMeta);
                     originSymbol = current.classes[name];
@@ -408,3 +422,3 @@ symbol = next.symbol;
                 } else if (type === 'element') {
-                    const next = this.handleElement(current, node, name);
+                    const next = this.handleElement(current, node, name, originMeta);
                     originSymbol = current.elements[name];
@@ -414,3 +428,5 @@ symbol = next.symbol;
                 } else if (type === 'pseudo-element') {
-                    const next = this.handlePseudoElement(current, node, name, selectorNode, addedSelectors, rule);
+                    const next = this.handlePseudoElement(
+                        current, node, name, selectorNode, addedSelectors, rule, originMeta
+                    );
                     originSymbol = current.classes[name];
@@ -437,3 +453,3 @@ meta = current;
                         name: origin.name
-                    }, origin.name);
+                    }, origin.name, undefined, undefined, originMeta);
                     originSymbol = current.classes[origin.name];
@@ -513,3 +529,4 @@ symbol = next.symbol;
         metaExports?: Pojo<string>,
-        rule?: postcss.Rule): CSSResolve {
+        rule?: postcss.Rule,
+        originMeta?: StylableMeta): CSSResolve {
 
@@ -526,2 +543,3 @@ const symbol = meta.classes[name];
                     node.nodes = globalMappedNodes;
+                    this.addGlobalsToMeta(globalMappedNodes, originMeta);
                 } else {
@@ -561,2 +579,3 @@ node.name = this.exportClass(next.meta, next.symbol.name, next.symbol, metaExports);
             node.nodes = symbol[valueMapping.global] || [];
+            this.addGlobalsToMeta(globalMappedNodes!, originMeta);
         } else {
@@ -592,3 +611,3 @@ node.name = scopedName;
     }
-    public handleElement(meta: StylableMeta, node: SelectorAstNode, name: string) {
+    public handleElement(meta: StylableMeta, node: SelectorAstNode, name: string, originMeta?: StylableMeta) {
         const tRule = meta.elements[name] as StylableSymbol;
@@ -602,2 +621,3 @@ const extend = tRule ? meta.mappedSymbols[name] : undefined;
                 node.nodes = next.symbol[valueMapping.global] || [];
+                this.addGlobalsToMeta(node.nodes, originMeta);
             } else {
@@ -620,3 +640,4 @@ node.type = 'class';
         addedSelectors: AdditionalSelector[],
-        rule?: postcss.Rule): CSSResolve {
+        rule?: postcss.Rule,
+        originMeta?: StylableMeta): CSSResolve {
 
@@ -683,2 +704,3 @@ let next: JSResolve | CSSResolve | null;
                     node.nodes = symbol[valueMapping.global] || [];
+                    this.addGlobalsToMeta(node.nodes, originMeta);
                 } else {
@@ -721,2 +743,6 @@ if (symbol.alias && !symbol[valueMapping.extends]) {
     }
+    private resetTransformProperties(meta: StylableMeta) {
+        meta.globals = {};
+        return meta.outputAst = meta.ast.clone();
+    }
 }
@@ -723,0 +749,0 @@

src/stylable-utils.ts

@@ -0,0 +0,0 @@ import cloneDeep from 'lodash.clonedeep';

src/stylable-value-parsers.ts

@@ -0,0 +0,0 @@ import * as postcss from 'postcss';

src/stylable.ts

@@ -0,0 +0,0 @@ import { FileProcessor, MinimalFS } from './cached-process-file';

src/types.ts

@@ -0,0 +0,0 @@ export type Pojo<T = any> = { [key: string]: T } & object;

src/utils.ts

@@ -0,0 +0,0 @@ export function hasKeys(o: {}) {

test-utils.d.ts

 export * from './dist/tests/utils/test-utils';

test-utils.js

 module.exports = require('./dist/tests/utils/test-utils');

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

1135370

increased by0.21%

Lines of code

15636

increased by0.59%

No dependency changes