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

    Labels

    bug report 🦗Issue is probably a bug, but it needs to be checkedneeds: complete repro 🖥️Issue need to have complete repro provided

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions