diff --git a/.changeset/seven-insects-study.md b/.changeset/seven-insects-study.md new file mode 100644 index 000000000..745a2c89e --- /dev/null +++ b/.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. diff --git a/packages/tags/src/utils/templateProcessor.ts b/packages/tags/src/utils/templateProcessor.ts index 6de8f3170..0b08a3887 100644 --- a/packages/tags/src/utils/templateProcessor.ts +++ b/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 }, diff --git a/packages/testkit/src/__snapshots__/babel.test.ts.snap b/packages/testkit/src/__snapshots__/babel.test.ts.snap index 855a8a489..5486fbf4d 100644 --- a/packages/testkit/src/__snapshots__/babel.test.ts.snap +++ b/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 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 227b705e8..feb0ba121 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -263,6 +263,8 @@ importers: specifier: ^0.4.54 version: 0.4.54(vite@3.2.7) + examples/vpssr-linaria-solid/dist/server: {} + examples/webpack5: dependencies: linaria-website: