From 1a5289f5b8743f6bb53a1348acdd4663045df998 Mon Sep 17 00:00:00 2001 From: Annamalai Date: Tue, 5 Jul 2016 00:07:23 +0530 Subject: [PATCH 1/5] Resolve fallback with all test cases --- lib/resolve-value.js | 31 ++++++++++++++++++- .../missing-variable-should-fallback-calc.css | 7 +++++ ...variable-should-fallback-calc.expected.css | 3 ++ ...issing-variable-should-fallback-nested.css | 8 +++++ ...riable-should-fallback-nested.expected.css | 3 ++ .../missing-variable-should-fallback-var.css | 12 +++++++ ...-variable-should-fallback-var.expected.css | 7 +++++ .../missing-variable-should-fallback.css | 7 +---- ...sing-variable-should-fallback.expected.css | 5 +-- test/test.js | 3 ++ 10 files changed, 75 insertions(+), 11 deletions(-) create mode 100644 test/fixtures/missing-variable-should-fallback-calc.css create mode 100644 test/fixtures/missing-variable-should-fallback-calc.expected.css create mode 100644 test/fixtures/missing-variable-should-fallback-nested.css create mode 100644 test/fixtures/missing-variable-should-fallback-nested.expected.css create mode 100644 test/fixtures/missing-variable-should-fallback-var.css create mode 100644 test/fixtures/missing-variable-should-fallback-var.expected.css diff --git a/lib/resolve-value.js b/lib/resolve-value.js index 3752c5b..7303f7a 100644 --- a/lib/resolve-value.js +++ b/lib/resolve-value.js @@ -5,6 +5,29 @@ var gatherVariableDependencies = require('./gather-variable-dependencies'); var findNodeAncestorWithSelector = require('./find-node-ancestor-with-selector'); var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-when'); +/* + Object.assign polyfill + https://gist.github.com/WebReflection/10404826 +*/ +if (!('assign' in Object)) { + Object.assign = function(has){ + 'use strict'; + return assign; + function assign(target, source) { + for (var i = 1; i < arguments.length; i++) { + copy(target, arguments[i]); + } + return target; + } + function copy(target, source) { + for (var key in source) { + if (has.call(source, key)) { + target[key] = source[key]; + } + } + } + }({}.hasOwnProperty); +} // var() = var( [, ]? ) @@ -61,8 +84,14 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal } }); + var fallbackValue; + if(fallback) { + var cloneDecl = Object.assign({},decl,{value:fallback}); + fallbackValue = resolveValue(cloneDecl, map, false,true).value; + } + // Default to the calculatedInPlaceValue which might be a previous fallback, then try this declarations fallback - var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || fallback; + var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || fallbackValue; // Otherwise if the dependency health is good(no circular or self references), dive deeper and resolve if(matchingVarDeclMapItem !== undefined && !gatherVariableDependencies(variablesUsedInValue, map).hasCircularOrSelfReference) { // Splice the declaration parent onto the matching entry diff --git a/test/fixtures/missing-variable-should-fallback-calc.css b/test/fixtures/missing-variable-should-fallback-calc.css new file mode 100644 index 0000000..6eb804d --- /dev/null +++ b/test/fixtures/missing-variable-should-fallback-calc.css @@ -0,0 +1,7 @@ +:root { + --foo1: 150px; +} + +.box-bar { + width: var(--missing,calc(var(--foo1) + 100px)); +} diff --git a/test/fixtures/missing-variable-should-fallback-calc.expected.css b/test/fixtures/missing-variable-should-fallback-calc.expected.css new file mode 100644 index 0000000..1fdc6e1 --- /dev/null +++ b/test/fixtures/missing-variable-should-fallback-calc.expected.css @@ -0,0 +1,3 @@ +.box-bar { + width: calc(150px + 100px); +} \ No newline at end of file diff --git a/test/fixtures/missing-variable-should-fallback-nested.css b/test/fixtures/missing-variable-should-fallback-nested.css new file mode 100644 index 0000000..b3dc9cc --- /dev/null +++ b/test/fixtures/missing-variable-should-fallback-nested.css @@ -0,0 +1,8 @@ +:root { + --foo1: 100px; + --foo2: 150px; +} + +.box-bar { + width: var(--missing, var(--missing, var(--foo1))); +} \ No newline at end of file diff --git a/test/fixtures/missing-variable-should-fallback-nested.expected.css b/test/fixtures/missing-variable-should-fallback-nested.expected.css new file mode 100644 index 0000000..e67e2db --- /dev/null +++ b/test/fixtures/missing-variable-should-fallback-nested.expected.css @@ -0,0 +1,3 @@ +.box-bar { + width: 100px; +} \ No newline at end of file diff --git a/test/fixtures/missing-variable-should-fallback-var.css b/test/fixtures/missing-variable-should-fallback-var.css new file mode 100644 index 0000000..a1ba533 --- /dev/null +++ b/test/fixtures/missing-variable-should-fallback-var.css @@ -0,0 +1,12 @@ +:root { + --foo-default: 100px; + --foo-width: 150px; +} + +.box-foo { + width: var(--missing); +} + +.box-bar { + width: var(--missing, var(--foo-default)); +} \ No newline at end of file diff --git a/test/fixtures/missing-variable-should-fallback-var.expected.css b/test/fixtures/missing-variable-should-fallback-var.expected.css new file mode 100644 index 0000000..693f012 --- /dev/null +++ b/test/fixtures/missing-variable-should-fallback-var.expected.css @@ -0,0 +1,7 @@ +.box-foo { + width: undefined; +} + +.box-bar { + width: 100px; +} \ No newline at end of file diff --git a/test/fixtures/missing-variable-should-fallback.css b/test/fixtures/missing-variable-should-fallback.css index 585d503..e942782 100644 --- a/test/fixtures/missing-variable-should-fallback.css +++ b/test/fixtures/missing-variable-should-fallback.css @@ -1,11 +1,6 @@ :root { --foo-width: 150px; } - -.box-foo { - width: var(--missing); -} - .box-bar { width: var(--missing, 30px); -} \ No newline at end of file +} diff --git a/test/fixtures/missing-variable-should-fallback.expected.css b/test/fixtures/missing-variable-should-fallback.expected.css index 896da59..8a8f78e 100644 --- a/test/fixtures/missing-variable-should-fallback.expected.css +++ b/test/fixtures/missing-variable-should-fallback.expected.css @@ -1,7 +1,4 @@ -.box-foo { - width: undefined; -} .box-bar { width: 30px; -} \ No newline at end of file +} diff --git a/test/test.js b/test/test.js index 9d7143e..988212b 100644 --- a/test/test.js +++ b/test/test.js @@ -180,6 +180,9 @@ describe('postcss-css-variables', function() { describe('missing variable declarations', function() { test('should work with missing variables', 'missing-variable-usage'); test('should use fallback value if provided with missing variables', 'missing-variable-should-fallback'); + test('should use fallback variable if provided with missing variables', 'missing-variable-should-fallback-var'); + test('should use fallback variable if provided with missing variables calc', 'missing-variable-should-fallback-calc'); + test('should use fallback variable if provided with missing variables nested', 'missing-variable-should-fallback-nested'); }); it('should not parse malformed var() declarations', function() { From e5aa5cc1b56da4c04e2f090a9376ab13bd87b4c1 Mon Sep 17 00:00:00 2001 From: Annamalai Date: Sat, 7 Jan 2017 02:48:17 +0530 Subject: [PATCH 2/5] Update resolve-decl.js --- lib/resolve-decl.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/resolve-decl.js b/lib/resolve-decl.js index 02bd5b7..0f212e7 100644 --- a/lib/resolve-decl.js +++ b/lib/resolve-decl.js @@ -141,6 +141,10 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/logResol decl.cloneAfter(); } + if (valueResults.value === undefined) { + valueResults.value = 'undefined'; + } + // Set the new value after we are done dealing with at-rule stuff decl.value = valueResults.value; } From eb04398bfd994aa8b7f515a615e447a5b232f542 Mon Sep 17 00:00:00 2001 From: Annamalai Date: Tue, 14 Feb 2017 12:07:43 +0530 Subject: [PATCH 3/5] Resolve multiple default variables --- lib/resolve-value.js | 35 +++++------------------------------ 1 file changed, 5 insertions(+), 30 deletions(-) diff --git a/lib/resolve-value.js b/lib/resolve-value.js index 7303f7a..335e8a7 100644 --- a/lib/resolve-value.js +++ b/lib/resolve-value.js @@ -5,31 +5,6 @@ var gatherVariableDependencies = require('./gather-variable-dependencies'); var findNodeAncestorWithSelector = require('./find-node-ancestor-with-selector'); var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-when'); -/* - Object.assign polyfill - https://gist.github.com/WebReflection/10404826 -*/ -if (!('assign' in Object)) { - Object.assign = function(has){ - 'use strict'; - return assign; - function assign(target, source) { - for (var i = 1; i < arguments.length; i++) { - copy(target, arguments[i]); - } - return target; - } - function copy(target, source) { - for (var key in source) { - if (has.call(source, key)) { - target[key] = source[key]; - } - } - } - }({}.hasOwnProperty); -} - - // var() = var( [, ]? ) // matches `name[, fallback]`, captures "name" and "fallback" // See: http://dev.w3.org/csswg/css-variables/#funcdef-var @@ -84,11 +59,11 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal } }); - var fallbackValue; - if(fallback) { - var cloneDecl = Object.assign({},decl,{value:fallback}); - fallbackValue = resolveValue(cloneDecl, map, false,true).value; - } + var fallbackValue; + if(fallback) { + var cloneDecl = Object.assign({},decl,{value:fallback}); + fallbackValue = resolveValue(cloneDecl, map, false,true).value; + } // Default to the calculatedInPlaceValue which might be a previous fallback, then try this declarations fallback var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || fallbackValue; From 412f56522dc90737e254cfb4d58bf10d89615663 Mon Sep 17 00:00:00 2001 From: Annamalai Date: Tue, 14 Feb 2017 12:21:55 +0530 Subject: [PATCH 4/5] Update resolve-value.js --- lib/resolve-value.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/resolve-value.js b/lib/resolve-value.js index 335e8a7..b0c1c8c 100644 --- a/lib/resolve-value.js +++ b/lib/resolve-value.js @@ -61,8 +61,8 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal var fallbackValue; if(fallback) { - var cloneDecl = Object.assign({},decl,{value:fallback}); - fallbackValue = resolveValue(cloneDecl, map, false,true).value; + var cloneDecl = Object.assign({},decl,{value:fallback}); + fallbackValue = resolveValue(cloneDecl, map, false,true).value; } // Default to the calculatedInPlaceValue which might be a previous fallback, then try this declarations fallback From 7ae720a2d7fb38240c94cae4e24d7c1f3f516967 Mon Sep 17 00:00:00 2001 From: Annamalai Date: Mon, 27 Feb 2017 16:21:12 +0530 Subject: [PATCH 5/5] Object.assign for old versions --- lib/resolve-value.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/lib/resolve-value.js b/lib/resolve-value.js index b0c1c8c..1781a00 100644 --- a/lib/resolve-value.js +++ b/lib/resolve-value.js @@ -5,6 +5,31 @@ var gatherVariableDependencies = require('./gather-variable-dependencies'); var findNodeAncestorWithSelector = require('./find-node-ancestor-with-selector'); var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-when'); +if (typeof Object.assign != 'function') { + Object.assign = function(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target == null) { // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }; +} + // var() = var( [, ]? ) // matches `name[, fallback]`, captures "name" and "fallback" // See: http://dev.w3.org/csswg/css-variables/#funcdef-var