Keep interpolation in var CSS funcion

sass · Dec 28, 2023 · 848716d · 848716d
1 parent 31ea60a
commit 848716d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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})); }