Keep interpolation in var CSS funcion (#250)

Author: pamelalozano16

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.0.1
+
+### Calc Functions Interpolation Migrator
+
+* Add parentheses in place of interpolation when necessary to preserve the evaluation order.
+* Keep interpolation in `var()` CSS functions.
+
 ## 2.0.0
 
 * **Breaking change**: The `media-logic` migrator has been removed as the
@@ -8,11 +15,6 @@
 
 * Update to be compatible with the latest version of the Dart Sass AST.
 
-### Calc Functions Interpolation Migrator
-
-* Add parentheses in place of interpolation when necessary to preserve the
-  evaluation order.
-
 ### Division Migrator
 
 * `/` division should now be left untouched in all CSS calculation functions.

lib/src/migrators/calc_interpolation.dart

@@ -37,19 +37,28 @@ 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\(#{[a-zA-Z0-9#{$}-]+}\)|var\(\-\-[a-zA-Z0-9\$\#\{\}\-]+\)');
     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 noInterpolation =
-              match[0].toString().substring(2, match[0].toString().length - 1);
+        var varFuncArgs = isVarFunc.allMatches(newArg);
+        if (varFuncArgs.isNotEmpty) {
+          newArg = newArg.replaceAll(isVarFunc, 'var()');
+        }
+
+        for (var match in interpolation.allMatches(newArg)) {
+          var noInterpolation = match[0]!.substring(2, match[0]!.length - 1);
           if (hasOperation.hasMatch(noInterpolation)) {
             noInterpolation = '(' + noInterpolation + ')';
           }
-          newArg = newArg
-              .toString()
-              .replaceAll(match[0].toString(), noInterpolation);
+          newArg = newArg.toString().replaceAll(match[0]!, noInterpolation);
         }
+
+        for (var match in varFuncArgs) {
+          newArg = newArg.replaceFirst('var()', match[0]!);
+        }
+
         if (newArg != arg.toString()) {
           var interpolationSpan =
               node.span.file.span(arg.span.start.offset, arg.span.end.offset);

pubspec.yaml

@@ -1,5 +1,5 @@
 name: sass_migrator
-version: 2.0.0
+version: 2.0.1
 description: A tool for running migrations on Sass files
 homepage: https://github.com/sass/migrator
 

test/migrators/calc_interpolation/calc_remove_interpolation.hrx

@@ -21,6 +21,9 @@ $d: 5;
 // CSS Custom properties keep interpolation
 .a { --test: calc(#{$b} + 1);}
 
+// var() nested
+.a { .b: calc(var(#{$b}) + #{$c + 2} + var(--a-#{$d}-b)); }
+
 <==> output/entrypoint.scss
 $b: 10;
 $c: 1;
@@ -43,3 +46,6 @@ $d: 5;
 
 // CSS Custom properties keep interpolation
 .a { --test: calc(#{$b} + 1);}
+
+// var() nested
+.a { .b: calc(var(#{$b}) + ($c + 2) + var(--a-#{$d}-b)); }