Fix conditional bindings for css properties (-ko-prop-if and -ko-prop…

…-ifnot) when used together with other css properties
voidlabs · May 31, 2022 · 1ed994d · 1ed994d
1 parent 9d7dd19
commit 1ed994d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/spec/declarations-spec.js b/spec/declarations-spec.js
@@ -108,7 +108,7 @@ describe('Style declaration processor', function() {
     });
     declarations = styleSheet.stylesheet.rules[0].declarations;
     result = elaborateDeclarations(undefined, declarations, templateUrlConverter, mockedBindingProvider);
-    expect(result).toEqual("virtualAttrStyle: 'color: '+$mycondition[undefined]() ? ko.utils.unwrapObservable($mycolor[undefined]) : null+';'+''");
+    expect(result).toEqual("virtualAttrStyle: 'color: '+($mycondition[undefined]() ? ko.utils.unwrapObservable($mycolor[undefined]) : null)+';'+''");
 
     result = elaborateDeclarations('color: red; -ko-color: @mycolor; -ko-color-if: mycondition', undefined, templateUrlConverter, mockedBindingProvider);
     expect(result).toEqual("color: red; color: <!-- ko text: $mycondition[undefined]() ? ko.utils.unwrapObservable($mycolor[red]) : null -->red<!-- /ko -->; ");
@@ -122,7 +122,7 @@ describe('Style declaration processor', function() {
     });
     declarations = styleSheet.stylesheet.rules[0].declarations;
     result = elaborateDeclarations(undefined, declarations, templateUrlConverter, mockedBindingProvider);
-    expect(result).toEqual("virtualAttrStyle: 'color: '+(($mycondition[undefined]() > 1) && ($mycondition[undefined]() < 3)) ? ko.utils.unwrapObservable($mycolor[undefined]) : null+';'+''");
+    expect(result).toEqual("virtualAttrStyle: 'color: '+((($mycondition[undefined]() > 1) && ($mycondition[undefined]() < 3)) ? ko.utils.unwrapObservable($mycolor[undefined]) : null)+';'+''");
 
     result = elaborateDeclarations('color: red; -ko-color: @mycolor; -ko-color-if: mycondition gt 1 and mycondition lt 3', undefined, templateUrlConverter, mockedBindingProvider);
     expect(result).toEqual("color: red; color: <!-- ko text: (($mycondition[undefined]() > 1) && ($mycondition[undefined]() < 3)) ? ko.utils.unwrapObservable($mycolor[red]) : null -->red<!-- /ko -->; ");
@@ -284,6 +284,14 @@ describe('Style declaration processor', function() {
     expect($('a').attr('data-bind')).toEqual("virtualAttr: { 'data-attribute': $myvalue[ciao] }, virtualAttrStyle: 'background-color: '+ko.utils.unwrapObservable($mycolor[red])+';'+''");
   });
 
+  it('should deal with conditional bindings with correct parentheses', function() {
+    var result;
+    var cheerio = require('cheerio');
+    var $ = cheerio.load('<a data-attribute="ciao"></a>');
+    result = elaborateDeclarations('background-color: red; -ko-background-color: @color; -ko-background-color-if: visible', undefined, templateUrlConverter, mockedBindingProvider, $('a')[0]);
+    expect($('a').attr('data-bind')).toEqual("virtualAttrStyle: 'background-color: '+($visible[undefined]() ? ko.utils.unwrapObservable($color[red]) : null)+';'+''");
+  });
+
   afterAll(function() {
     mockery.disable();
     mockery.deregisterAll();

diff --git a/src/js/converter/declarations.js b/src/js/converter/declarations.js
@@ -219,6 +219,8 @@ var elaborateDeclarations = function(style, declarations, templateUrlConverter,
           if (typeof bindVal2 !== 'undefined') {
             // the match is a bit ugly, but we don't want to unwrap things if not needed (performance)
             if (bindVal2.match(/^[^' ]*[^' \)]$/)) bindVal2 = 'ko.utils.unwrapObservable(' + bindVal2 + ')';
+            // make sure we use parentheses for ternary conditional operator
+            else bindVal2 = '(' + bindVal2 + ')';
             newBindings[bind] = "'" + declarations[i].name + ": '+" + bindVal2 + "+';" + dist + "'+" + newBindings[bind];
             delete newBindings['virtualStyle'][bindName2];
           } else {