Add support for interpolation

[mindplay-dk]

Why is interpolation only supported for CSS object properties and not for css literals?

import { css } from '@linaria/core';

// REQUIRED:

const fontMedium = {
  fontSize: '24px',
  fontWeight: 'bold'
}

// WANTED:

// const fontMedium = css`
//   font-size: 24px;
//   font-weight: bold;
// `

const button = css`
  ${fontMedium}
  
  color: #862e9c;
  border: 1px solid;
  border-radius: 4px;
  padding: 0.5rem 1rem;

  &:hover,
  &:focus {
    color: #be4bdb;
  }
`;

export const Button = (props) => {
  return <button {...props} className={button} />;
};

Why do we need to use two completely different syntaxes to interpolate CSS properties?

I would very much like to stick with one syntax.

Using multiple classes is not really a great option for something like typographies either - I'd very much like to have the button declaration include the typography, and manually reusing the 5-10 properties required for a complete typography is not really a good option either.

Using multiple classes works (cx) but is not a great option either - I would very much prefer if the button styles were self-contained, residing in a single declaration, not spread between two classes.

Is there a reason this isn't practical or can't be done?

[artginzburg]

I usually write it as const someVar = css``, then erase the css call entirely when I'm finished. Interpolating strings works fine, though you lose the syntax highlighting. This does mean I'm going to have to add the `css` call back to properly edit, but it's better than nothing.

The alternative is having const someVar = {...}, meaning no autocomplete at all unless adding a type, and not just a CSSProperties-like type, but one that supports nesting, autocomplete for media queries, pseudo-elements, complex selectors, etc. Such a type probably can't exist.

P.S. Though the ability to use css`` inside another css`` would be awesome.

[mindplay-dk]

From an ergonomics/DX perspective:

It would be natural to expect quoted CSS literals could be mixed into the same - just as CSS objects can be mixed into CSS objects e.g. using {...a, ...b} spreads.

It's actually surprising (although useful) that CSS objects can be mixed into quoted CSS literals at all, since they're not the same type and don't even use the same CSS property name syntax - but it's even more surprising that it's required.

What's more, what if I need to mix in CSS custom properties (variables)? I can't declare those as objects, can I?

[mindplay-dk]

Interpolating strings works fine, though you lose the syntax highlighting.

Oh wow, you mean this!

const border = `
  border: 5px solid red;
  border-radius: 10px;
`;

const Button = styled.button<{ color: string }>`
  ${border}

  &:hover {
    border-color: #f88;
  }
`;

Even function interpolation appears to work?!

const background = (color: string) => `
  background-color: ${color};
`;

const Button = styled.button<{ color: string }>`
  ${background('red')}

  &:hover {
    border-color: #f88;
  }
`;

I just went over the entire manual again, this isn't even a documented feature.

I wouldn't have assumed this would work - especially the function call is surprising to me.

So at the very least, a documentation update is probably required here?

But also, since interpolating literal CSS already works without the css function, I wonder how difficult that would be.

[mindplay-dk]

Nested blocks are covered by tests, so this feature is intentional:

linaria/packages/testkit/src/babel.test.ts

Lines 896 to 920 in 8bb4e92

	it('handles nested blocks', async () => {
	const { code, metadata } = await transform(
	dedent`
	import { styled } from '@linaria/react';
	const regular = () => "arial";
	export const Button = styled.button\`
	font-family: ${'${regular}'};
	&:hover {
	border-color: blue;
	}
	@media (max-width: 200px) {
	width: 100%;
	}
	\`;
	`,
	[evaluator]
	);
	expect(code).toMatchSnapshot();
	expect(metadata).toMatchSnapshot();
	});

Apparently there are more undocumented features.

You can interpolate arrays:

linaria/packages/testkit/src/babel.test.ts

Lines 772 to 791 in 8bb4e92

	it('inlines array styles as CSS string', async () => {
	const { code, metadata } = await transform(
	dedent`
	import { styled } from '@linaria/react';
	const styles = [
	{ flex: 1 },
	{ display: 'block', height: 24 },
	];
	export const Title = styled.h1\`
	${'${styles}'}
	\`;
	`,
	[evaluator]
	);
	expect(code).toMatchSnapshot();
	expect(metadata).toMatchSnapshot();
	});

Inline CSS is supported - I've been using this, but this doesn't appear to be documented either:

function Foo() {
  return <div className={css`background:blue;`}>I'm blue</div>
}

Both css and styled can be called inline in components like that.

I also discovered you can inline values before CSS units - this isn't documented either:

linaria/packages/testkit/src/babel.test.ts

Lines 793 to 820 in 8bb4e92

	it('handles interpolation followed by unit', async () => {
	const { code, metadata } = await transform(
	dedent`
	import { styled } from '@linaria/react';
	const padding = 10;
	const size = () => 100;
	const shadow = () => 5;
	const unit = () => 1;
	export const Title = styled.h1\`
	font-size: ${'${size}'}em;
	text-shadow: black 1px ${'${shadow}'}px, white -2px -2px;
	margin: ${'${size}'}px;
	width: calc(2 * ${'${props => props.width}'}vw);
	height: ${'${props => { if (true) { return props.height } else { return 200 } }}'}px;
	grid-template-columns: ${'${unit}'}fr 1fr 1fr ${'${unit}'}fr;
	border-radius: ${'${function(props) { return 200 }}'}px;
	padding: ${'${padding}'}px;
	\`;
	`,
	[evaluator]
	);
	expect(code).toMatchSnapshot();
	expect(metadata).toMatchSnapshot();
	});

Also, it looks like the intention was for empty properties ('') not to be emitted:

linaria/packages/testkit/src/babel.test.ts

Lines 964 to 979 in 8bb4e92

	it('does not output CSS property when value is a blank string', async () => {
	const { code, metadata } = await transform(
	dedent`
	import { css } from '@linaria/core';
	export const title = css\`
	font-size: ${''};
	margin: 6px;
	\`;
	`,
	[evaluator]
	);
	expect(code).toMatchSnapshot();
	expect(metadata).toMatchSnapshot();
	});

Although this doesn't actually appear to work:

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

Lines 648 to 661 in 8bb4e92

	exports[`strategy shaker does not output CSS property when value is a blank string 1`] = `"export const title = "title_t13jq05";"`;
	exports[`strategy shaker does not output CSS property when value is a blank string 2`] = `
	CSS:
	.title_t13jq05 {
	font-size: ;
	margin: 6px;
	}
	Dependencies: NA
	`;

Snapshots are difficult to manage... someone likely committed this by accident.

Probably ought to open a separate issue for that one.

The missing documentation should probably just be added, I think.

I honestly think Linaria needs a proper web site with documentation and live examples - the markdown files in the repo always did seem to me like someone hastily wrote down everything after the project was built.

I wonder if this isn't perhaps the main reason why Linaria is so under rated?