Keep interpolation in var CSS funcion

sass · Jan 9, 2024 · bf42549 · bf42549
1 parent 387292f
commit bf42549
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -37,10 +37,15 @@ 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 +55,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
@@ -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)); }