stylable - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

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

src/generator.ts

@@ -5,3 +5,3 @@ import { PartialObject, Pojo } from './types';
 import { Stylesheet } from './stylesheet';
-import { SelectorAstNode, parseSelector, traverseNode, stringifySelector, isImport } from "./selector-utils";
+import { SelectorAstNode, parseSelector, traverseNode, stringifySelector, isImport, matchAtKeyframes, matchAtMedia } from "./selector-utils";
 import { valueTemplate } from "./value-template";
@@ -12,2 +12,4 @@ import { valueMapping, TypedClass, STYLABLE_VALUE_MATCHER } from "./stylable-value-parsers";
 
+export declare type NestedRules = Pojo<string | string[] | Pojo<string | string[]>>
+
 export interface ExtendedSelector {
@@ -55,3 +57,3 @@ selector: string,
             }
-            this.addSelectors(sheet, resolvedSymbols);
+            this.addSheet(sheet, resolvedSymbols);
         }
@@ -68,3 +70,3 @@ }
     }
-    addSelectors(sheet: Stylesheet, resolvedSymbols: Pojo) {
+    addSheet(sheet: Stylesheet, resolvedSymbols: Pojo) {
         const stack = Object.keys(sheet.cssDefinition).reverse();
@@ -82,3 +84,4 @@ while (stack.length) {
     prepareSelector(sheet: Stylesheet, selector: string | ExtendedSelector, resolvedSymbols: Pojo, stack: Array<string | ExtendedSelector> = []) {
-        let rules: Pojo, aSelector: string;
+        let rules: Pojo, aSelector: string, processedRules: NestedRules;
+
         if (typeof selector === 'string') {
@@ -89,15 +92,3 @@ rules = sheet.cssDefinition[selector];
             if (mixins) {
-                rules = { ...rules };
-                mixins.forEach((mixin) => {
-                    const mixinFunction = resolvedSymbols[mixin.type];
-                    const cssMixin = cssflat({
-                        [aSelector]: {
-                            ...rules,
-                            ...mixinFunction(mixin.options.map((option: string) => valueTemplate(option, resolvedSymbols, this.mode === Mode.DEV)))
-                        }
-                    });
-                    for (var key in cssMixin) {
-                        stack.push({ selector: key, rules: cssMixin[key] });
-                    }
-                });
+                this.applyMixins(aSelector, rules, mixins, resolvedSymbols, stack);
                 return null;
@@ -114,9 +105,16 @@ }
 
-        const processedRules: Pojo<string> = {};
-        for (var k in rules) {
-            if (k.match(STYLABLE_VALUE_MATCHER)) { continue; }
-            let value = Array.isArray(rules[k]) ? rules[k][rules[k].length - 1] : rules[k];
-            processedRules[k] = valueTemplate(value, resolvedSymbols);
+        if (matchAtMedia(aSelector)) {
+            processedRules = {}
+            for(var k in rules){
+                const d = this.prepareSelector(sheet, k, resolvedSymbols, []);
+                d && Object.assign(processedRules, d);
+            }
+            return {
+                [aSelector]: processedRules
+            };
+        } else {
+            processedRules = this.processRules(rules, resolvedSymbols, sheet);
         }
 
+
         //don't emit empty selectors in production
@@ -130,9 +128,46 @@ if (this.mode === Mode.PROD && !hasKeys(processedRules)) { return null; }
 
-
         return {
-            [this.scopeSelector(sheet, ast)]: processedRules
+            [this.scopeSelector(sheet, ast, aSelector)]: processedRules
         };
 
     }
-    scopeSelector(sheet: Stylesheet, ast: SelectorAstNode): string {
+    applyMixins(aSelector: string, rules: NestedRules, mixins: any[], resolvedSymbols: Pojo, stack: Array<string | ExtendedSelector>) {
+        mixins.forEach((mixin) => {
+            const mixinFunction = resolvedSymbols[mixin.type];
+            const cssMixin = cssflat({
+                [aSelector]: {
+                    ...rules,
+                    ...mixinFunction(mixin.options.map((option: string) => valueTemplate(option, resolvedSymbols, this.mode === Mode.DEV)))
+                }
+            });
+            for (var key in cssMixin) {
+                stack.push({ selector: key, rules: cssMixin[key] });
+            }
+        });
+    }
+    processRules(rules: NestedRules, resolvedSymbols: Pojo, sheet: Stylesheet) {
+        const processedRules: NestedRules = {};
+        for (let key in rules) {
+            if (key.match(STYLABLE_VALUE_MATCHER)) { continue; }
+            const value: string | string[] | Pojo<string | string[]> = rules[key];
+            if (Array.isArray(value)) {
+                processedRules[key] = value.map((value: string) => this.scopeValue(key, value, resolvedSymbols, sheet));
+            } else if (value && typeof value === 'object') {
+                processedRules[key] = this.processRules(value, resolvedSymbols, sheet) as Pojo<string | string[]>
+            } else {
+                processedRules[key] = this.scopeValue(key, value, resolvedSymbols, sheet);
+            }
+        }
+        return processedRules;
+    }
+    scopeValue(key: string, value: string, resolvedSymbols: Pojo, sheet: Stylesheet) {
+        var value = valueTemplate(value, resolvedSymbols);
+        if (key === 'animation' || key === 'animationName') {
+            value = sheet.keyframes.reduce((value: string, keyframe: string) => {
+                return value.replace(new RegExp('\\b'+keyframe+'\\b', 'g'), this.scope(keyframe, sheet.namespace));
+            }, value);
+        }
+        return value;
+    }
+    scopeSelector(sheet: Stylesheet, ast: SelectorAstNode, selector: string): string {
         let current = sheet;
@@ -142,2 +177,7 @@ let classname: string;
 
+        const keyframeMatch = matchAtKeyframes(selector);
+        if(keyframeMatch){
+            return selector.replace(keyframeMatch[1], this.scope(keyframeMatch[1], sheet.namespace));
+        }
+
         traverseNode(ast, (node) => {
@@ -144,0 +184,0 @@ const { name, type } = node;

src/parser.ts

@@ -36,1 +36,5 @@ import { CSSObject } from "./types";
 }
+
+export function parse(css: string): CSSObject {
+    return processor.parse(css);
+}

src/process.ts

 import { Import } from './import';
-import { createSimpleSelectorChecker, parseSelector, PseudoSelectorAstNode, traverseNode } from './selector-utils';
+import { createSimpleSelectorChecker, parseSelector, PseudoSelectorAstNode, matchAtKeyframes, traverseNode } from './selector-utils';
 import { SBTypesParsers, valueMapping } from './stylable-value-parsers';
@@ -21,6 +21,14 @@ import { Stylesheet } from './stylesheet';
 function processDefinition(sheet: Stylesheet, selector: string, rules: CSSRulesObject) {
+    addMixins(sheet, selector, rules);
+    const keyframesMatch = matchAtKeyframes(selector);
+    if (keyframesMatch) {
+        // for (var k in rules) {
+        //     addMixins(sheet, selector + '{' + k + '}', rules[k]);
+        // }
+        keyframesMatch[1] && sheet.keyframes.push(keyframesMatch[1]);
+        return;
+    }
     const ast = parseSelector(selector);
     const checker = createSimpleSelectorChecker();
     let isSimpleSelector = true;
-    addMixins(sheet, selector, rules);
     traverseNode(ast, (node) => {
@@ -55,3 +63,3 @@ if (!checker(node)) { isSimpleSelector = false; }
 function addTypedClass(sheet: Stylesheet, selector: string, rules: CSSRulesObject, isSimpleSelector: boolean, typedRule: keyof typeof SBTypesParsers) {
-    Array.isArray(rules) ? rules.forEach((rules)=>{
+    Array.isArray(rules) ? rules.forEach((rules) => {
         mergeTypedClass(sheet, selector, rules, isSimpleSelector, typedRule);
@@ -62,3 +70,3 @@ }) : mergeTypedClass(sheet, selector, rules, isSimpleSelector, typedRule);
 
-function mergeTypedClass(sheet: Stylesheet, selector: string, rules: CSSRulesObject, isSimpleSelector: boolean, typedRule: keyof typeof SBTypesParsers){
+function mergeTypedClass(sheet: Stylesheet, selector: string, rules: CSSRulesObject, isSimpleSelector: boolean, typedRule: keyof typeof SBTypesParsers) {
     if (!hasOwn(rules, typedRule)) { return; }
@@ -65,0 +73,0 @@ if (!isSimpleSelector) { throw new Error(typedRule + ' on complex selector: ' + selector); }

src/resolver.ts

@@ -36,4 +36,3 @@
     }
-    resolveSymbols(sheet: Stylesheet) {
-        //TODO: add support __esModule support?
+    resolveImports(sheet: Stylesheet) {
         const imports = sheet.imports.reduce((acc, importDef) => {
@@ -48,5 +47,7 @@ const resolved = this.resolveModule(importDef.from);
         }, {} as Pojo);
-
-        const symbols = { ...imports };
-
+        return imports;
+    }
+    resolveSymbols(sheet: Stylesheet) {
+        //TODO: add support __esModule support?
+        const symbols = this.resolveImports(sheet);
         for (const varName in sheet.vars) {
@@ -58,5 +59,4 @@ if (symbols[varName]) {
         }
-
         return symbols;
     }
 }

src/selector-utils.ts

@@ -67,1 +67,9 @@ const tokenizer = require("css-selector-tokenizer");
 
+
+export function matchAtKeyframes(selector: string){
+    return selector.match(/^@keyframes\s*(.*)/);
+}
+
+export function matchAtMedia(selector: string){
+    return selector.match(/^@media\s*(.*)/);
+}

src/stylesheet.ts

@@ -17,2 +17,3 @@ import { Import } from './import';
     typedClasses: Pojo<TypedClass> = {};
+    keyframes: string[] = [];
     _kind = "Stylesheet";
@@ -19,0 +20,0 @@ static globalCounter: number = 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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

305782

increased by0.87%

Lines of code

5218

increased by1.12%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes