vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript

Home Page:https://vanilla-extract.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

style selectors: doesn't support nesting pseudo selectors

X-Jagger opened this issue · comments

Describe the bug

I'm new to vanilla-extract ,and when I use it with selectors, I encountered a problem, which it didn't work as I thought, I tried to search the website, but I didn't find any words to say I can't use it like this.

I'm not sure whether is a bug or feature

not working

image

working

image

Reproduction

https://vanilla-extract.style/

System Info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 92.42 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
  Browsers:
    Chrome: 112.0.5615.121
    Firefox: 108.0.2
    Safari: 15.1
  npmPackages:
    @vanilla-extract/css: ^1.11.0 => 1.11.0 
    @vanilla-extract/vite-plugin: ^3.8.0 => 3.8.0 
    vite: ^4.2.0 => 4.2.

Used Package Manager

npm

Logs

No response

Validations

I searched such question with gpt-4, it somehow answered my question, (Need confirmation)
image

I searched such question with gpt-4, it somehow answered my question, (Need confirmation)

GPT-4's response is pretty accurate. Not supporting nested selectors in an intentional decision, though that doesn't mean we will never support it in the future. Given that native CSS is starting to support CSS nesting, it could make sense to support it in Vanilla Extract in the future.

Generally speaking, Vanilla Extract's docs are quite explicit about what is supported, and the types will help you avoid situations that are not supported.