diff --git a/CHANGELOG.md b/CHANGELOG.md index 88d72af..bae9b32 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/lib/src/migrators/calc_interpolation.dart b/lib/src/migrators/calc_interpolation.dart index b570343..8cdc57b 100644 --- a/lib/src/migrators/calc_interpolation.dart +++ b/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); diff --git a/pubspec.yaml b/pubspec.yaml index 1b919d4..e0e1fed 100644 --- a/pubspec.yaml +++ b/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 diff --git a/test/migrators/calc_interpolation/calc_remove_interpolation.hrx b/test/migrators/calc_interpolation/calc_remove_interpolation.hrx index bf287c6..50a3f34 100644 --- a/test/migrators/calc_interpolation/calc_remove_interpolation.hrx +++ b/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)); }