fix: space inserted after function interpolation (fixes #1141 #1368) (#…

…1374)

* fix: space inserted after function interpolation (fixes #1141 #1368)

This fixes the failing test that was added in #1151.

* chore: changeset for #1374

---------

Co-authored-by: Anton Evzhakov <[email protected]>

.changeset/seven-insects-study.md

@@ -0,0 +1,6 @@
+---
+'@linaria/tags': patch
+'@linaria/testkit': patch
+---
+
+Fix for space inserted after function interpolation. Fixes #1141 and #1368.

packages/tags/src/utils/templateProcessor.ts

@@ -4,7 +4,7 @@
  * It uses CSS code from template literals and evaluated values of lazy dependencies stored in ValueCache.
  */
 
-import type { TemplateElement, SourceLocation } from '@babel/types';
+import type { TemplateElement } from '@babel/types';
 
 import type { ExpressionValue, Replacements } from '@linaria/utils';
 import { hasMeta, ValueType } from '@linaria/utils';
@@ -37,30 +37,24 @@ export default function templateProcessor(
   let cssText = '';
 
   let item: TemplateElement | ExpressionValue | undefined;
-  let lastTemplateElementLocation: SourceLocation | null | undefined;
   // eslint-disable-next-line no-cond-assign
   while ((item = template.shift())) {
     if ('type' in item) {
       // It's a template element
       cssText += item.value.cooked;
-      lastTemplateElementLocation = item.loc;
       continue;
     }
 
     // It's an expression
     const { ex } = item;
 
-    const { end } = ex.loc!;
+    const { start, end } = ex.loc!;
     const beforeLength = cssText.length;
 
     // The location will be end of the current string to start of next string
     const next = template[0] as TemplateElement; // template[0] is the next template element
     const loc = {
-      // +1 because an expression location always shows 1 column before
-      start: {
-        line: lastTemplateElementLocation!.end.line,
-        column: lastTemplateElementLocation!.end.column + 1,
-      },
+      start,
       end: next
         ? { line: next.loc!.start.line, column: next.loc!.start.column }
         : { line: end.line, column: end.column + 1 },

packages/testkit/src/__snapshots__/babel.test.ts.snap

@@ -1469,7 +1469,7 @@ exports[`strategy shaker handles interpolation in css function followed by unit
 const _exp = /*#__PURE__*/() => props => props.$rotateDeg;
 export const Container = /*#__PURE__*/styled('div')({
   name: "Container",
-  class: "atm_tr_18309cv atm_vy_1783zgq Container_c13jq05",
+  class: "atm_tr_18309cv atm_vy_uuw12j Container_c13jq05",
   propsAsIs: false,
   vars: {
     "y6125t": [_exp(), "deg"]
@@ -1483,7 +1483,7 @@ exports[`strategy shaker handles interpolation in css function followed by unit
 CSS:
 
 .atm_tr_18309cv{transform:rotate(var(--y6125t));}
-.atm_vy_1783zgq{width:200 px;}
+.atm_vy_uuw12j{width:200px;}
 
 Dependencies: NA