What is good/correct/better way to write selector in Vanilla-Extract

[WreewanMorhee]

I had read doc
but because example in doc is too easy to understand how to write some complex nest in my code
so ask here hope some sir can teach/solve my confused
below is my code in sass
how should I change it to vanilla:

.first {
  width: 100vw;

  .second {
      height: auto; 
      position: relative;

        .third {
           width: 50px;

           img {
              opacity: 0.5;
           }
        }
  }
}

[askoufis]

The equivalent Vanilla Extract styles would be:

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

export const first = style({
  width: "100vw",
});

export const second = style({
  selectors: {
    [`${first} &`]: {
      height: "auto",
      position: "relative",
    },
  },
});

export const third = style({
  selectors: {
    [`${first} ${second} &`]: {
      width: "50px",
    },
  },
});

globalStyle(`${first} ${second} ${third} img`, {
  opacity: 0.5,
});

A few things to note:

• Vanilla Extract doesn't support more than 1 level of nested selectors, so you have to define each classname separately and construct the nesting yourself
• You can only target the current classname within a style's selector, so you have to use the & to specify the current classname. See the docs.
• The final img selector needs to be a globalStyle since it isn't targeting a specific classname

Hope that helps 😄

[WreewanMorhee]

I think this is some tricky thing in vanilla-extract
thank u sir