Type error using complex selector in hover media query

[Adam Butterfield]

Describe the bug

Code with comment for the ts error:

import { style } from "@vanilla-extract/css";

export const myStyle = style({
  "@media": {
    "(hover: hover)": {
      /**
       * Error on line 12:
       *
       * Type '{ ":not(:disabled):hover": { backgroundColor: string; outline: string; transform: string; }; }' is not assignable to type 'Omit<StyleWithSelectors & AllQueries<StyleWithSelectors>, "@media">'.
       * Object literal may only specify known properties, and '":not(:disabled):hover"' does not exist in type 'Omit<StyleWithSelectors & AllQueries<StyleWithSelectors>, "@media">'.ts(2322)
       */
      ":not(:disabled):hover": {
        backgroundColor: "var(--input-hover-color)",
        outline: "6px solid var(--input-hover-color)",
        transform: "scale(1.05)",
      },
    },
  },
});

I'm just getting started with vanilla extract, so maybe I'm there's a better way to do this that I don't know. With a simple selector, like :hover instead of :not(:disabled):hover, I don't get the type error.

Reproduction

https://github.com/adbutterfield/hover-media-query-bug/blob/main/app.css.ts

System Info

System:
    OS: macOS 13.5.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 2.74 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v18.7.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 16.6
  npmPackages:
    @vanilla-extract/css: ^1.13.0 => 1.13.0

Used Package Manager

npm

Logs

No response

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Adam Skoufis]

(hover: hover) is a valid media selector, but ":not(:disabled):hover" is not, it's what we would call a "complex selector". They need to be nested under the selectors property:

export const myStyle = style({
  "@media": {
    "(hover: hover)": {
      ...
    },
  },
  "selectors": {
    ":not(:disabled):hover": {
      backgroundColor: "var(--input-hover-color)",
      outline: "6px solid var(--input-hover-color)",
      transform: "scale(1.05)",
    },
  }
});

[Adam Butterfield]

Hmm....
But separating like that will not give the same behavior. In plain CSS, it's totally valid to do that. Like line 50 in my gist here: https://gist.github.com/adbutterfield/260249153051827d2dda78c39fba3259

[Adam Skoufis]

Hmm.... But separating like that will not give the same behavior. In plain CSS, it's totally valid to do that. Like line 50 in my gist here: https://gist.github.com/adbutterfield/260249153051827d2dda78c39fba3259

Oh, I didn't realize you wanted the selectors inside (hover: hover). You just need to nest the selectors field inside:

export const myStyle = style({
  "@media": {
    "(hover: hover)": {
      "selectors": {
        ":not(:disabled):hover": {
          backgroundColor: "var(--input-hover-color)",
          outline: "6px solid var(--input-hover-color)",
          transform: "scale(1.05)",
        },
      }
    },
  },
});

[Adam Butterfield]

Ok great! I didn't know you could nest selectors inside like that. Let me give it a try!

[Adam Butterfield]

Works perfectly! Thanks!!!