Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invalid typing of styled #1435

Open
Pfeifenjoy opened this issue Feb 15, 2025 · 0 comments
Open

Invalid typing of styled #1435

Pfeifenjoy opened this issue Feb 15, 2025 · 0 comments
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided

Comments

@Pfeifenjoy
Copy link

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.

@Pfeifenjoy Pfeifenjoy added bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided needs: triage 🏷 Issue needs to be checked and prioritized labels Feb 15, 2025
@github-actions github-actions bot removed the needs: triage 🏷 Issue needs to be checked and prioritized label Feb 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided
Projects
None yet
Development

No branches or pull requests

1 participant