diff --git a/CHANGELOG.md b/CHANGELOG.md index cc87d15..a901bf2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ### Calc Functions Interpolation Migrator * Add parentheses in place of interpolation when necessary to preserve the evaluation order. +* Keep interpolation in `var()` CSS functions. ## 1.8.1 diff --git a/lib/src/migrators/calc_interpolation.dart b/lib/src/migrators/calc_interpolation.dart index db8d991..b0f14a6 100644 --- a/lib/src/migrators/calc_interpolation.dart +++ b/lib/src/migrators/calc_interpolation.dart @@ -37,10 +37,16 @@ class _CalculationInterpolationVisitor extends MigrationVisitor { const calcFunctions = ['calc', 'clamp', 'min', 'max']; final interpolation = RegExp(r'\#{\s*[^}]+\s*}'); final hasOperation = RegExp(r'[-+*/]+'); + final isVarFunc = RegExp(r'var\(\#{\s*[^}]+\s*}\)'); if (calcFunctions.contains(node.name)) { for (var arg in node.arguments) { var newArg = arg.toString(); - for (var match in interpolation.allMatches(arg.toString())) { + var varFuncArgs; + if(isVarFunc.hasMatch(newArg)){ + varFuncArgs = isVarFunc.allMatches(newArg); + newArg = newArg.replaceAll(isVarFunc, 'var()'); + } + for (var match in interpolation.allMatches(newArg)) { var noInterpolation = match[0].toString().substring(2, match[0].toString().length - 1); if (hasOperation.hasMatch(noInterpolation)) { @@ -50,6 +56,11 @@ class _CalculationInterpolationVisitor extends MigrationVisitor { .toString() .replaceAll(match[0].toString(), noInterpolation); } + if (varFuncArgs != null){ + for (var match in varFuncArgs) { + newArg = newArg.replaceFirst('var()', match[0].toString()); + } + } if (newArg != arg.toString()) { var interpolationSpan = node.span.file.span(arg.span.start.offset, arg.span.end.offset); diff --git a/test/migrators/calc_interpolation/calc_remove_interpolation.hrx b/test/migrators/calc_interpolation/calc_remove_interpolation.hrx index 3a6207f..527ee81 100644 --- a/test/migrators/calc_interpolation/calc_remove_interpolation.hrx +++ b/test/migrators/calc_interpolation/calc_remove_interpolation.hrx @@ -18,6 +18,9 @@ $d: 5; // Nested and more interpolations .a { .b: calc(#{$b} + max(#{$c, 2})); } +// var() nested +.a { .b: calc(var(#{$b}) + #{$c + 2} + var(#{$d})); } + <==> output/entrypoint.scss $b: 10; $c: 1; @@ -37,3 +40,6 @@ $d: 5; // Nested and more interpolations .a { .b: calc($b + max($c, 2)); } + +// var() nested +.a { .b: calc(var(#{$b}) + ($c + 2) + var(#{$d})); }