xstyled v 3.7.0 typescript error

[adambisek]

🐛 Bug Report

After updating @xstyled/styled-components and @xstyled/system both to v "3.7.0", following TS issue appeared on all places, where ${system} is used. In version 3.6.0 everything was fine.

To Reproduce

Update to v 3.7.0, as described above and check TS (in. CLI or in IDE)

Expected behavior

No errors.

Actual result

Full dependency list

"dependencies": {
    "@apollo/client": "3.7.1",
    "@lingui/react": "3.14.0",
    "@reduxjs/toolkit": "1.8.6",
    "@sentry/react": "7.17.1",
    "@sentry/tracing": "7.17.1",
    "@xstyled/styled-components": "3.7.0",
    "@xstyled/system": "3.7.0",
    "babel-plugin-macros": "3.1.0",
    "dayjs": "1.11.6",
    "debug": "4.3.4",
    "dotenv-safe": "8.2.0",
    "graphql": "16.6.0",
    "history": "5.3.0",
    "make-plural": "7.1.0",
    "ramda": "0.28.0",
    "react": "18.2.0",
    "react-day-picker": "7.4.10",
    "react-dom": "18.2.0",
    "react-helmet": "6.1.0",
    "react-hook-form": "7.38.0",
    "react-image": "4.0.3",
    "react-redux": "8.0.4",
    "react-router": "6.4.2",
    "react-router-dom": "6.4.2",
    "react-select": "5.5.7",
    "redux-first-history": "5.1.1",
    "redux-saga": "1.2.1",
    "serialize-javascript": "6.0.0",
    "serve": "14.0.1",
    "styled-components": "5.3.6",
    "vite-aliases": "0.8.6"
  },
  "devDependencies": {
    "@babel/core": "7.19.6",
    "@babel/preset-typescript": "7.18.6",
    "@faker-js/faker": "7.6.0",
    "@graphql-codegen/cli": "2.13.8",
    "@graphql-codegen/typescript": "2.8.0",
    "@graphql-codegen/typescript-operations": "2.5.5",
    "@lingui/cli": "3.14.0",
    "@lingui/core": "3.14.0",
    "@lingui/macro": "3.14.0",
    "@ls-lint/ls-lint": "1.11.2",
    "@storybook/addon-actions": "6.5.13",
    "@storybook/addon-essentials": "6.5.13",
    "@storybook/addon-interactions": "6.5.13",
    "@storybook/addon-links": "6.5.13",
    "@storybook/builder-vite": "0.2.5",
    "@storybook/react": "6.5.13",
    "@storybook/testing-library": "0.0.13",
    "@types/debug": "4.1.7",
    "@types/jest": "29.2.0",
    "@types/ramda": "0.28.18",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "@types/react-helmet": "6.1.5",
    "@types/serialize-javascript": "5.0.2",
    "@types/styled-components": "5.1.26",
    "@types/xstyled__system": "1.19.3",
    "@typescript-eslint/eslint-plugin": "5.41.0",
    "@typescript-eslint/parser": "5.41.0",
    "@vitejs/plugin-react": "2.2.0",
    "babel-loader": "8.2.5",
    "concurrently": "7.5.0",
    "eslint": "8.26.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-local-rules": "1.3.2",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-react": "7.31.10",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-react-perf": "3.3.1",
    "jest": "29.2.2",
    "plop": "3.1.1",
    "rollup-plugin-visualizer": "5.8.3",
    "ts-jest": "29.0.3",
    "typescript": "4.8.4",
    "vite": "3.2.0"
  }

[gregberge]

Hi @adambisek, thanks for the bug. Feel free to submit a fix for it.

[eranimo]

This is still happening as of v3.8.0

[quantizor]

A lot of type-system work just shipped in @xstyled/system@3.8.3 and @xstyled/styled-components@4.1.1. Could you (or @eranimo) retest on those versions and let me know if the error persists?

A couple of setup notes worth verifying while you're at it:

• xstyled now targets styled-components v6, which ships its own types. The old @types/styled-components (v5) is incompatible and should be removed if you still have it installed.
• The @types/xstyled__system package in your dep list was a third-party shim and is no longer needed; xstyled ships its own types.

If the error still reproduces after that cleanup, a minimal repro (tsc --noEmit on a small repo) would be a big help.