Accessing theme using composition

[flugg]

Hi! If we're making reusable CSS objects as a callback to access the theme:

const textColor = (theme: Theme) => css({
  color: theme.colors.primary
});

const background = (theme: Theme) => css({
  background: theme.colors.secondary
});

We can use these like this:

<div css={textColor}></div>

<div css={background}></div>

However, if we want to apply both of them, this throws a TypeScript error:

<div css={[textColor, background]}></div>

Is this intentional? It feels a bit verbose to do the following:

<div css={(theme: Theme) => [textColor(theme), background(theme)]}></div>

Also, a bonus question: why do we have to type Theme manually when using the css prop? TypeScript complains about the parameter being implicitly any.

[Andarist]

However, if we want to apply both of them, this throws a TypeScript error:

I don't think this should result in an error because support for this has been implemented explicitly as a new feature for v11. Could you create a codesnadbox demonstrating the problem?

Also, a bonus question: why do we have to type Theme manually when using the css prop? TypeScript complains about the parameter being implicitly any.

const textColor = (theme: Theme) => css({ color: theme.colors.primary }); const background = (theme: Theme) => css({ background: theme.colors.secondary });

We can use these like this:

<div css={textColor}></div>

<div css={background}></div>

However, if we want to apply both of them, this throws a TypeScript error:

<div css={[textColor, background]}></div>

Is this intentional? It feels a bit verbose to do the following:

<div css={(theme: Theme) => [textColor(theme), background(theme)]}></div>

Also, a bonus question: why do we have to type Theme manually when using the css prop? TypeScript complains about the parameter being implicitly any.

Do you refer to functions like this?

const textColor = (theme: Theme) => css({
  color: theme.colors.primary
});

It's really more of a TS question than Emotion's one - this is how TS works, this function doesn't have enough "context" for TS to infer its parameter types. It's a standalone function and as such all of its parameters have to be annotated explicitly, the same would apply here:

const add = (a, b) => a + b

In here TS can't assess on its own that a and b should be numbers (or strings)

[flugg]

Thanks for the quick reply @Andarist!

Very strange regarding passing an array of callbacks to the css prop. Everything else works so I don't think there's anything wrong with our setup. I get the following TypeScript error:

Type '((theme: Theme) => SerializedStyles)[]' is not assignable to type '((string | number | boolean | ComponentSelector | Keyframes | SerializedStyles | ArrayInterpolation<undefined> | ObjectInterpolation<...> | ((theme: any) => Interpolation<...>)) & (string | ... 7 more ... | FunctionInterpolation<...>)) | null | undefined'.
  Type '((theme: Theme) => SerializedStyles)[]' is not assignable to type '((theme: any) => Interpolation<undefined>) & ArrayInterpolation<Theme>'.
    Type '((theme: Theme) => SerializedStyles)[]' is not assignable to type '(theme: any) => Interpolation<undefined>'.
      Type '((theme: Theme) => SerializedStyles)[]' provides no match for the signature '(theme: any): Interpolation<undefined>'.ts(2322)
index.d.ts(84, 5): The expected type comes from property 'css' which is declared here on type 'ClassAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLParagraphElement> & { css?: Interpolation<Theme>; }'
(property) css?: ((string | number | boolean | ComponentSelector | Keyframes | SerializedStyles | ArrayInterpolation<undefined> | ObjectInterpolation<...> | ((theme: any) => Interpolation<...>)) & (string | ... 7 more ... | FunctionInterpolation<...>)) | null | undefined

Not sure if that's helpful. I'll see if I can reproduce the problem in a sandbox tomorrow.

Regarding the bonus question, I'm sorry for not making my question clear enough, I wasn't talking about the TS arrow functions, but rather about accessing theme with the css prop. This fails with implicit any:

<div css={theme => ({})} />

And we have to typehint Theme manually everywhere like this:

<div css={(theme: Theme) => ({})} />

[Andarist]

And we have to typehint Theme manually everywhere like this:

This shouldn't be required if you extend our Theme correctly (like described in the docs) - I've recently done that in one of the projects at my company and it works like a charm. If you provide a repro case I could try to help you find a problem.

[flugg]

I didn't manage to replicate this in a Codesandbox - but after a couple hours of debugging, it turns out a typing file from Sayegh7/emotion-reset messed up the Emotion types.

I've added a PR which hopefully fixes this: Sayegh7/emotion-reset#64

Sorry for wasting your time on this!