error TS2345: Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'CreateCSSProperties

[cmoulliard]

Steps to reproduce

Steps:

1. Git clone this project and PR: https://github.com/q-shift/backstage-playground/pull/2
2. cd plugins/quarkus
3. yarn install; yarn tsc

Current behavior

The following code (see here)

onst Tag: ComponentClass = styled(({ label, onDelete, ...props }) => (
    <div {...props}>
        <span>{label}</span>
        <CloseIcon onClick={onDelete} />
    </div>
))`
  display: flex;
  align-items: center;
  height: 24px;
  margin: 2px;
  line-height: 22px;
  background-color: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  box-sizing: content-box;
  padding: 0 4px 0 10px;
  outline: 0;
  overflow: hidden;

  &:focus {
    border-color: #40a9ff;
    background-color: #e6f7ff;
  }

  & span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  & svg {
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
  }
`;

generates this error when we execute yarn tsc

src/scaffolder/QuarkusExtensionList.tsx:57:3 - 
error TS2345: Argument of type 'TemplateStringsArray' is not assignable to parameter of type
'CreateCSSProperties<(value: string, index: number, array: readonly string[]) => unknown> | ((props: { theme: Theme; } & ((value: string, index: number, array: readonly string[]) => unknown)) => CreateCSSProperties<...>)'.

 57 ))`
      ~
 58   display: flex;
    ~~~~~~~~~~~~~~~~
... 
 86   }
    ~~~
 87 `;
    ~

using such versions of material-ui:

• "@material-ui/core": "^4.12.4",
• "@material-ui/lab": "^4.0.0-alpha.61"

Expected behavior

No error should be reported

Context

I try to publish my project as npmjs.org module and it is needed to run "yarn tsc" in that case. This is how I got this error that we don't have when the plugin is used directly locally in backstage.

Your environment

  System:
    OS: macOS 13.6.3
  Binaries:
    Node: 19.9.0 - ~/.nvm/versions/node/v19.9.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v19.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.199
    Edge: Not Found
    Safari: 17.2
  npmPackages:
    @emotion/react:  11.11.3 
    @emotion/styled:  11.11.0 
    @mui/base:  5.0.0-beta.31 
    @mui/core-downloads-tracker:  5.15.4 
    @mui/material:  5.15.4 
    @mui/private-theming:  5.15.4 
    @mui/styled-engine:  5.15.4 
    @mui/system:  5.15.4 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.4 
    @types/react:  17.0.74 
    styled-components: ^6.1.8 => 6.1.8 
    typescript:  5.1.6 

and typeconfig.json

{
  "extends": "@backstage/cli/config/tsconfig.json",
  "include": [
    "src",
  ],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "noImplicitAny": false,
    "outDir": "dist-types",
    "rootDir": "."
  }
}

Search keywords: TS2345, typescript, not assignable to parameter of type

[siriwatknp]

Can you try converting the template string to CSS object?

[cmoulliard]

converting the template string

Which template string ?

[siriwatknp]

onst Tag: ComponentClass = styled(({ label, onDelete, ...props }) => (
    <div {...props}>
        <span>{label}</span>
        <CloseIcon onClick={onDelete} />
    </div>
))`...` << template string

try this:

onst Tag: ComponentClass = styled(({ label, onDelete, ...props }) => (
    <div {...props}>
        <span>{label}</span>
        <CloseIcon onClick={onDelete} />
    </div>
))({
  display: "flex",
  alignItems: "center",
  height: "24px",
  margin: "2px",
  lineHeight: "22px",
  backgroundColor: "#fafafa",
  border: "1px solid #e8e8e8",
  borderRadius: "2px",
  boxSizing: "content-box",
  padding: "0 4px 0 10px",
  outline: "0",
  overflow: "hidden",
  "&:focus": { borderColor: "#40a9ff", backgroundColor: "#e6f7ff" },
  "& span": {
    overflow: "hidden",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis"
  },
  "& svg": { fontSize: "12px", cursor: "pointer", padding: "4px" }
})