Skip to content

Commit d2bea89

Browse files
asvnyMadLittleMods
authored andcommitted
Resolve var usage in fallbacks
Thanks to @asvny and @marklu
1 parent ddb3b8b commit d2bea89

10 files changed

+56
-3
lines changed

lib/resolve-value.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,16 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
6262
});
6363

6464
// Default to the calculatedInPlaceValue which might be a previous fallback, then try this declarations fallback
65-
var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || fallback;
65+
var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || (function() {
66+
// Resolve `var` values in fallback
67+
var fallbackValue = fallback;
68+
if(fallback) {
69+
var fallbackDecl = decl.clone({ parent: decl.parent, value: fallback });
70+
fallbackValue = resolveValue(fallbackDecl, map, false, true).value;
71+
}
72+
73+
return fallbackValue;
74+
})();
6675
// Otherwise if the dependency health is good(no circular or self references), dive deeper and resolve
6776
if(matchingVarDeclMapItem !== undefined && !gatherVariableDependencies(variablesUsedInValue, map).hasCircularOrSelfReference) {
6877
// Splice the declaration parent onto the matching entry
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:root {
2+
--foo1: 150px;
3+
}
4+
5+
.box-bar {
6+
width: var(--missing,calc(var(--foo1) + 100px));
7+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.box-bar {
2+
width: calc(150px + 100px);
3+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
--foo1: 100px;
3+
--foo2: 150px;
4+
}
5+
6+
.box-bar {
7+
width: var(--missing, var(--missing, var(--foo1)));
8+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.box-bar {
2+
width: 100px;
3+
}
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
:root {
2+
--foo-default: 100px;
3+
--foo-width: 150px;
4+
}
5+
6+
.box-foo {
7+
width: var(--missing);
8+
}
9+
10+
.box-bar {
11+
width: var(--missing, var(--foo-default));
12+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.box-foo {
2+
width: undefined;
3+
}
4+
5+
.box-bar {
6+
width: 100px;
7+
}

test/fixtures/missing-variable-should-fallback.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88

99
.box-bar {
1010
width: var(--missing, 30px);
11-
}
11+
}
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
12
.box-foo {
23
width: undefined;
34
}
45

56
.box-bar {
67
width: 30px;
7-
}
8+
}

test/test.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,9 @@ describe('postcss-css-variables', function() {
204204
});
205205
});
206206
});
207+
test('should use fallback variable if provided with missing variables', 'missing-variable-should-fallback-var');
208+
test('should use fallback variable if provided with missing variables calc', 'missing-variable-should-fallback-calc');
209+
test('should use fallback variable if provided with missing variables nested', 'missing-variable-should-fallback-nested');
207210
});
208211

209212
it('should not parse malformed var() declarations', function() {

0 commit comments

Comments
 (0)