Make selectors to accept function to allow circle references

[aspirisen]

Since VE doesn't allow selecting child classes there can be cases where you can have circle references.
As workaround we can use a function in selector prop, something like that:

const child = style({
    selectors: () => ({
        [`${parent} &`]: {
            color: 'red',
        },
    }),
})

const parent = style({
    selectors: {
        [`&:has(${child})`]: {
            padding: '10px',
        },
    },
})

UPD: There is a PR to allow functional selectors #1081

[graup]

Here's another workaround:

const childBase = style({});
const parentBase = style({});

const child = style([childBase, {
    selectors: {
        [`${parentBase} &`]: {
            color: 'red',
        },
    },
}]);

const parent = style([parentBase, {
    selectors: {
        [`&:has(${childBase})`]: {
            padding: '10px',
        },
    },
}]);

[aspirisen]

Yeah, but that's a bit more complicated rather that functional selectors

[aspirisen]

We can use getters to make circular selectors, here is the section in docs https://vanilla-extract.style/documentation/styling/#circular-selectors