vanilla-extract-css/vanilla-extract

typescript: `defineProperties` throws `UnconditionalAtomicOptions` error when using long `responsiveArray`

Open

#1,080 opened on 2023年4月28日

GitHub で見る
 (3 comments) (2 reactions) (1 assignee)TypeScript (8,658 stars) (231 forks)batch import
has-workaroundhelp wantedsprinklestype issue

説明

Describe the bug

When having 9 condition keys in defineProperties and listing them in order for responsiveArray, TypeScript throws the following error:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ conditions: { sPhone: {}; phone: { '@media': string; }; lPhone: { '@media': string; }; sTablet: { '@media': string; }; tablet: { '@media': string; }; laptop: { '@media': string; }; desktop: { '@media': string; }; xDesktop: { ...; }; xlDesktop: { ...; }; }; defaultCondition: string; responsiveArray: string[]; prope...' is not assignable to parameter of type 'UnconditionalAtomicOptions<{ ... }>'.
      Object literal may only specify known properties, and 'conditions' does not exist in type 'UnconditionalAtomicOptions<{ ... }>'.

Removing any entry from responsiveArray makes the error disappear and work as expected.

Reproduction

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUAUoRiqzCoDOcAvnOgSHAEQACAbgIZbAA2XbAtKgAeMKGwDGMAPRkwUbAGsu5BgG4AUGqGRYcMRCxl4AIyio28yNhgUAvIjVw4ZXAAt9qAFxwA5AGYATAAMYILeADQOcGBuOF5+AGzBoRGOXK7ucQAsABxJ4ZFkACpsRkowcYl5KXAwJWVxAOzx2SH5qWxgMIRxAIyB-pmt1Whk8l1gvf65Q5GCACLkY90+PZmZVbNcC6PjvQCcQTOU6pqC2vB6BvAgqMjAbACKAK7EpLb2jtEZcAAGZGKmVBYOAcZBwAAUIGwfAA7sBkDAXF4ACQIExmCwQKxkAB0XxwlAAlD9qmkYp5fv9AcDQRCoVhYfDESi0aZzJYsNYcWT3ESSQViqVUOVKQDUECQVgwZDoXCEUi4Kj0eysZzcUU6sK+dVakKRX8xRLaTKGXLmYrWRiOVzdWVtZFeJ1lgbqZLpfTGfKWcrMdjuR1xvbHCMlhNRa7jR6zQqlWzfWqcSHA8TqvNFrtw+KaVK6bKmTHLSq-WmdoQg3BBFt086qVm3bnTfnvXHrbjK9tQ-bjhpLoYogQiCRyHA7GhMDh8IRiDA3uCEJFLncZ-oyF5545HM5yWvKNVPtvED4mDc7mxvF4T-dnq9yHjyVQ93AebFD95j7d7ue4JfHi85Lfn1QB9Ik3QV6lfd9Ty-H9r3-dUwOFYCNxqTURSQN8f2gj9fxvXFbUQ3cQKfANlnQyDPwvbDYLef0nTAJCNyTUij0wyjT2o28mPowjkJLUM1xY7CsPYv8aL48YGMcdtqzDMjWO-KjRNvaTS246oeJQDA2CeLgYAAYX0JdgH0OIt3cNo4FMGQV2AFhUAAQSgUQAE8vAAbSI7wzJwCzHG8fFUF8nxAKCryEJgUL8Iix9vEdcZQq40LxMIJKq1U8I4EkSRdAgEAbk5GoXGACguGwICum-cwgOIAgoBQYqOiINgoEiABdapZCnIdV0QQiiRUIA

System Info

System:
    OS: macOS 13.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 9.25 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Safari: 16.4
  npmPackages:
    @vanilla-extract/css: ^1.11.0 => 1.11.0 
    @vanilla-extract/next-plugin: ^2.1.2 => 2.1.2 
    @vanilla-extract/recipes: ^0.4.0 => 0.4.0 
    @vanilla-extract/sprinkles: ^1.6.0 => 1.6.0

Used Package Manager

yarn

Logs

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ conditions: { sPhone: {}; phone: { '@media': string; }; lPhone: { '@media': string; }; sTablet: { '@media': string; }; tablet: { '@media': string; }; laptop: { '@media': string; }; desktop: { '@media': string; }; xDesktop: { ...; }; xlDesktop: { ...; }; }; defaultCondition: string; responsiveArray: string[]; prope...' is not assignable to parameter of type 'UnconditionalAtomicOptions<{ marginBottom: MapLeafNodes<{ 1: string; 2: string; 3: string; }, CSSVarFunction>; marginTop: MapLeafNodes<{ 1: string; 2: string; 3: string; }, CSSVarFunction>; }>'.
      Object literal may only specify known properties, and 'conditions' does not exist in type 'UnconditionalAtomicOptions<{ marginBottom: MapLeafNodes<{ 1: string; 2: string; 3: string; }, CSSVarFunction>; marginTop: MapLeafNodes<{ 1: string; 2: string; 3: string; }, CSSVarFunction>; }>'.

Validations

コントリビューターガイド