stylable - npm Package Compare versions

Comparing version 5.1.2 to 5.1.3

dist/src/functions.js

@@ -120,2 +120,5 @@ "use strict";
                             parsedNode.resolvedValue = formatter.symbol.apply(null, args);
+                            if (valueHook) {
+                                parsedNode.resolvedValue = valueHook(parsedNode.resolvedValue, { name: parsedNode.value, args: args }, true, passedThrough);
+                            }
                         }
@@ -147,3 +150,3 @@ catch (error) {
     return valueParser.stringify(parsedValue.nodes, function (node) {
-        if (node.resolvedValue) {
+        if (node.resolvedValue !== undefined) {
             return node.resolvedValue;
@@ -150,0 +153,0 @@ }

dist/src/stylable-transformer.d.ts

@@ -28,3 +28,6 @@ import * as postcss from 'postcss';
 }
-export declare type replaceValueHook = (value: string, name: string, isLocal: boolean, passedThrough: string[]) => string;
+export declare type replaceValueHook = (value: string, name: string | {
+    name: string;
+    args: string[];
+}, isLocal: boolean, passedThrough: string[]) => string;
 export declare type postProcessor<T = {}> = (stylableResults: StylableResults, transformer: StylableTransformer) => StylableResults & T;
@@ -31,0 +34,0 @@ export interface TransformHooks {

dist/src/types.d.ts

@@ -0,3 +1,4 @@
+export declare type Param = boolean | number | string;
 export interface StateMap {
-    [key: string]: boolean;
+    [key: string]: Param;
 }
@@ -4,0 +5,0 @@ export interface Stylesheet {

dist/tests/stylable-transformer/post-process-and-hooks.spec.js

@@ -29,2 +29,23 @@ "use strict";
     });
+    it('should call replaceValueHook on js function', function () {
+        var t = generate_test_util_1.createTransformer({
+            files: {
+                '/entry.st.css': {
+                    namespace: 'entry',
+                    content: "\n                        :import {\n                            -st-from: './function.js';\n                            -st-named: fn1, fn2;\n                        }\n                        .container {\n                            color: fn1(fn2(1));\n                        }\n                        "
+                },
+                '/function.js': {
+                    content: "\n                        module.exports.fn1 = function(x){return 'fn1'}\n                        module.exports.fn2 = function(x){return 'fn2'}\n                    "
+                }
+            }
+        }, undefined, function (_resolved, fn) {
+            if (typeof fn !== 'string') {
+                return "hooked_" + fn.name + "(" + fn.args + ")";
+            }
+            return '';
+        });
+        var res = t.transform(t.fileProcessor.process('/entry.st.css'));
+        var rule = res.meta.outputAst.nodes[0];
+        chai_1.expect(rule.nodes[0].value).to.equal('hooked_fn1(hooked_fn2(1))');
+    });
     it('should call replaceValueHook and use it\'s return value', function () {
@@ -31,0 +52,0 @@ var valueCallCount = 0;

dist/tests/utils/stylable-dom-util.d.ts

@@ -1,2 +0,2 @@
-import { RuntimeStylesheet } from '../../src/types';
+import { RuntimeStylesheet, Param } from '../../src/types';
 export interface QueryElement {
@@ -13,3 +13,10 @@ querySelector: typeof Element.prototype.querySelector;
     scopeSelector(selector?: string): string;
+    hasStyleState(element: {
+        getAttribute: typeof Element.prototype.getAttribute;
+    }, stateName: string, param?: Param): boolean;
+    getStyleState(element: {
+        getAttribute: typeof Element.prototype.getAttribute;
+    }, stateName: string): string | null;
+    private getStateDataAttrKey(state, param?);
     private getStateDataAttr(state, param?);
 }

dist/tests/utils/stylable-dom-util.js

@@ -39,9 +39,23 @@ "use strict";
     };
-    StylableDOMUtil.prototype.getStateDataAttr = function (state, param) {
+    StylableDOMUtil.prototype.hasStyleState = function (element, stateName, param) {
         if (param === void 0) { param = true; }
-        var r = this.style.$cssStates((_a = {}, _a[state] = param, _a));
-        var stateKey = Object.keys(r)[0];
-        return stateKey + "=\"" + r[stateKey] + "\"";
+        var _a = this.getStateDataAttrKey(stateName, param), stateKey = _a.stateKey, styleState = _a.styleState;
+        var actual = element.getAttribute(stateKey);
+        return String(styleState[stateKey]) === actual;
+    };
+    StylableDOMUtil.prototype.getStyleState = function (element, stateName) {
+        var stateKey = this.getStateDataAttrKey(stateName).stateKey;
+        return element.getAttribute(stateKey);
+    };
+    StylableDOMUtil.prototype.getStateDataAttrKey = function (state, param) {
+        if (param === void 0) { param = true; }
+        var styleState = this.style.$cssStates((_a = {}, _a[state] = param, _a));
+        return { stateKey: Object.keys(styleState)[0], styleState: styleState };
         var _a;
     };
+    StylableDOMUtil.prototype.getStateDataAttr = function (state, param) {
+        if (param === void 0) { param = true; }
+        var _a = this.getStateDataAttrKey(state, param), stateKey = _a.stateKey, styleState = _a.styleState;
+        return stateKey + "=\"" + styleState[stateKey] + "\"";
+    };
     return StylableDOMUtil;
@@ -48,0 +62,0 @@ }());

dist/tests/utils/stylable-dom-util.spec.js

@@ -30,3 +30,23 @@ "use strict";
     });
+    describe('Style state', function () {
+        it('hasStyleState properly calls getAttribute with the requested style state', function () {
+            var state = '';
+            var getAttribute = function (styleState) {
+                state = styleState;
+                return 'true';
+            };
+            chai_1.expect(util.hasStyleState({ getAttribute: getAttribute }, 'loading')).to.equal(true);
+            chai_1.expect(state).to.equal('data-ns-loading');
+        });
+        it('getStyleState properly calls getAttribute with the requested style state', function () {
+            var state = '';
+            var getAttribute = function (styleState) {
+                state = styleState;
+                return 'true';
+            };
+            chai_1.expect(util.getStyleState({ getAttribute: getAttribute }, 'loading')).to.equal('true');
+            chai_1.expect(state).to.equal('data-ns-loading');
+        });
+    });
 });
 //# sourceMappingURL=stylable-dom-util.spec.js.map

package.json

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

src/functions.ts

@@ -185,2 +185,10 @@ import * as postcss from 'postcss';
                             parsedNode.resolvedValue = formatter.symbol.apply(null, args);
+                            if (valueHook) {
+                                parsedNode.resolvedValue = valueHook(
+                                    parsedNode.resolvedValue!,
+                                    { name: parsedNode.value, args },
+                                    true,
+                                    passedThrough
+                                );
+                            }
                         } catch (error) {
@@ -214,3 +222,3 @@ // todo: issue diagnostic
     return valueParser.stringify(parsedValue.nodes, (node: ParsedValue) => {
-        if (node.resolvedValue) {
+        if (node.resolvedValue !== undefined) {
             return node.resolvedValue;
@@ -217,0 +225,0 @@ } else {

src/stylable-transformer.ts

@@ -57,3 +57,8 @@ import * as postcss from 'postcss';
 
-export type replaceValueHook = (value: string, name: string, isLocal: boolean, passedThrough: string[]) => string;
+export type replaceValueHook = (
+    value: string,
+    name: string | { name: string, args: string[] },
+    isLocal: boolean,
+    passedThrough: string[]) => string;
+
 export type postProcessor<T = {}> = (
@@ -60,0 +65,0 @@ stylableResults: StylableResults,

src/types.ts

@@ -0,3 +1,5 @@
+export type Param = boolean | number | string;
+
 export interface StateMap {
-    [key: string]: boolean;
+    [key: string]: Param;
 }
@@ -4,0 +6,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

876982

increased by0.75%

Lines of code

12253

increased by0.67%

No dependency changes