diff --git a/CHANGELOG.md b/CHANGELOG.md index 88d72af..906a7fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,8 +10,8 @@ ### Calc Functions Interpolation Migrator -* Add parentheses in place of interpolation when necessary to preserve the - evaluation order. +* Add parentheses in place of interpolation when necessary to preserve the evaluation order. +* Keep interpolation in `var()` CSS functions. ### Division Migrator diff --git a/lib/src/migrators/calc_interpolation.dart b/lib/src/migrators/calc_interpolation.dart index b570343..c1728d0 100644 --- a/lib/src/migrators/calc_interpolation.dart +++ b/lib/src/migrators/calc_interpolation.dart @@ -37,10 +37,14 @@ 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.positional) { var newArg = arg.toString(); - for (var match in interpolation.allMatches(arg.toString())) { + var varFuncArgs = isVarFunc.allMatches(newArg); + if (varFuncArgs.isNotEmpty) 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 +54,11 @@ class _CalculationInterpolationVisitor extends MigrationVisitor { .toString() .replaceAll(match[0].toString(), noInterpolation); } + + 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..a2f5e79 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(--a-#{$d}-b)); } + <==> 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(--a-#{$d}-b)); }