Invalid CSS: Space inserted after function interpolation

[PierreGUI]

Environment

• Linaria version: 5.0.2/5.0.3
• Bundler (+ version): Webpack 5

Description

1. Use a function interpolation
2. Write CSS unit after the function
3. Use variable interpolation on the next line
   ❌ There's a space between value and unit (invalid CSS)

Example:

export const FS = 12;
const getWidth = () => 10;

const H1 = styled.h1`
  width: ${getWidth}px;
  font-size: ${FS}px;
`;

Produces ->

Reproducible Demo

https://stackblitz.com/edit/linaria-bug-o9hmgr?file=src%2FTitle.tsx

[layershifter]

@PierreGUI the repro is partially broken:

However, usage of the proper version does not fix the bug :) It's present.

---

The transform() returns in result following:

result.rules {
  '.hhnsy8v': {
    cssText: '\n  width: var(--hhnsy8v-0);\n  font-size: 12\n                  px;\n',
    className: 'hhnsy8v',
    displayName: 'H1',
    start: { line: 10, column: 11, index: 220 }
  }
}

I traced it to the following:

linaria/packages/tags/src/utils/templateProcessor.ts

Lines 129 to 130 in e25e91f

	// If it's a plain object or an array, convert it to a CSS string
	cssText += stripLines(loc, toCSS(value));

• toCSS() returns 12 (string)
• stripLines() adds a newline that is considered as " "

This happens because:

linaria/packages/tags/src/utils/stripLines.ts

Lines 14 to 20 in e25e91f

	// If the start and end line numbers aren't same, add new lines to span the text across multiple lines
	if (loc.start.line !== loc.end.line) {
	result += '\n'.repeat(loc.end.line - loc.start.line);
	// Add extra spaces to offset the column
	result += ' '.repeat(loc.end.column);
	}

As stripLisnes() gets { start: { line: 11, column: 10 }, end: { line: 12, column: 18 } } as loc input.

[agriffis]

@layershifter I have not dug into this personally, just curious if you continued down this debugging journey to figure out why stripLines receives those different start/end lines. It seems like they should be the same, given the input?

[agriffis]

Oh, here it is:

linaria/packages/tags/src/utils/templateProcessor.ts

Line 46 in e25e91f

lastTemplateElementLocation = item.loc;

lastTemplateElementLocation is only set for template elements. It isn't updated for expressions. As a result, it's still reflecting px;\n font-size: which started on the previous line.

[agriffis]

This might actually be the same as #1141

[agriffis]

I just added a PR for this, see #1374