TypeScript issue: textAlign

• emotion version: 10.0.6
• react version: 16.6.3

Relevant code:

const Test = styled("div")(() => {
  const attributes = {
    textAlign: "center",
  };
  return {
    ...attributes,
  };
});

What you did: tried to assign textAlign to a styled component. This is unique to textAlign. Also if I set textAlign directly (not using the spread operator) everything works just fine:

const Test = styled("div")(() => {
  return {
    textAlign: "center",
  };
});

What happened: I receive a TypeScript compile error (not only linting):

Type error: Argument of type '() => { textAlign: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
  Type '() => { textAlign: string; }' is missing the following properties from type 'TemplateStringsArray': raw, concat, join, slice, and 15 more.  TS2345

Reproduction:

const Test = styled("div")(() => {
  const attributes = {
    textAlign: "center",
  };
  return {
    ...attributes,
  };
});

Problem description: The described code seems to be valid TypeScript Code, but for some reason this is not compiled. If I skip TypeScript checks, the code is compiled just fine.

Suggested solution: ?

[cameron-martin]

I think what’s going on here is the textAlign property of attributes is being inferred as string, but the textAlign property in csstype is a union of string literals, which string is not assignable to.

It should infer correctly if you provide a type annotation:

import * as CSS from 'csstype';

const Test = styled("div")(() => {
  const attributes: CSS.Properties = {
    textAlign: "center",
  };
  return {
    ...attributes,
  };
});

Alternatively, once https://github.com/Microsoft/TypeScript/pull/29510 is available then the following should also work:

const Test = styled("div")(() => {
  const attributes = {
    textAlign: "center",
  } as const;
  return {
    ...attributes,
  };
});

[Andarist]

This is a “limitation” of TS - described by several people in this thread. You just have to “narrow” down the type of those object properties to things actually accepted by CSS (string is just too broad of a type for this). For this you can use in an example const assertions, assigning object to a CSS.Properties etc.