Skip to content

Invalid typing of styledΒ #1435

@Pfeifenjoy

Description

@Pfeifenjoy

Environment

  • Linaria version: @linaria/core 6.2.0 @linaria/react 6.2.1
  • Bundler (+ version): Vite 6.1.0
  • Node.js version: 23.7.0
  • OS: Linux

Description

Sample: https://github.com/Pfeifenjoy/linaria-bug

If I use the styled property the attributes are potentially undefined.

import { styled } from "@linaria/react";

export const MyButton = styled.button`
  background-color: blue;
`;

If I enable strict typescript features I see the following type error:

src/button.ts:3:25 - error TS2349: This expression is not callable.
  Not all constituents of type 'HtmlStyledTag<string> | undefined' are callable.
    Type 'undefined' has no call signatures.

3 export const MyButton = styled.button`
                          ~~~~~~~~~~~~~
src/button.ts:3:32 - error TS4111: Property 'button' comes from an index signature, so it must be accessed with ['button'].

3 export const MyButton = styled.button`
                                 ~~~~~~

Particularly the following typescript features produce errors:

noPropertyAccessFromIndexSignature

src/button.ts:3:32 - error TS4111: Property 'button' comes from an index signature, so it must be accessed with ['button'].

3 export const MyButton = styled.button`
                                 ~~~~~~

and noUncheckedIndexedAccess

src/button.ts:3:25 - error TS2349: This expression is not callable.                                                                                                                           
  Not all constituents of type 'HtmlStyledTag<string> | undefined' are callable.                                                                                                              
    Type 'undefined' has no call signatures.                                                                                                                                                  
                                                                                                                                                                                              
3 export const MyButton = styled.button`

To be honest both of those options can catch a lot of errors very early and should be supported by the linaria.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions