Lobotomized owl selector * + *

[bartekczyz]

Hello :) Is it possible to somehow use the lobotomized owl selector? I'm trying to implement my Stack component, but can't use this selector, because I get this error:

ERROR: [plugin: vanilla-extract] Invalid selector: > * + *

The thing is, I have no idea what will be the child classes at this point, so I can't use parent and child classes here.

example:

import { recipe } from '@vanilla-extract/recipes';

export const stack = recipe({
  base: {},
  variants: {
    orientation: {
      horizontal: {
        selectors: {
          '& > * + *': {
            marginLeft: 10,
          },
        },
      },
      vertical: {
        selectors: {
          '& > * + *': {
            marginTop: 10,
          },
        },
      },
    },
  },
});

[rothsandro]

Selectors of style and recipe are only allowed to style the element itself and cannot target any sibling / child elements. You can target child elements with globalStyle and scope the styles using the generated class name of the stack variant.

export const stack = recipe({
  base: {},
  variants: {
    orientation: {
      horizontal: {},
      vertical: {},
    },
  },
});

// stack({ ... }) returns something like "stack stack_orientation_horizontal"
// Extract the class name for the orientation (stack_orientation_horizontal)
// and use it as a selector.
// Note: this breaks when you add additional variants and use defaultVariants for them
const horizontalStack = stack({ orientation: "horizontal" }).split(" ")[1];
globalStyle(`.${horizontalStack} > * + *`, {
  marginLeft: 10,
});

const verticalStack = stack({ orientation: "vertical" }).split(" ")[1];
globalStyle(`.${verticalStack} > * + *`, {
  marginTop: 10,
});

[Ghirigoro]

@rothsandro I'm trying to do something similar but using sprinkles instead of recipes. Is that possible?

[rothsandro]

Yes, just pass the className to the globalStyle function, it will transform the selector automatically.

// styles.css.ts
export const container = sprinkles({ background: "red" });

globalStyle(`${container} + ${container}`, {
  marginTop: "1rem",
});

// Component.tsx
import { container } from './styles.css';

<div className={container}>one</div>
<div className={container}>two</div>

The example above works when your component imports the generated className from the *.css.ts file, here the container variable. If the component calls the sprinkles function itself, the global selector must be updated to exclude the first class:

// styles.css.ts
const container = sprinkles({ background: "green" }).split(" ").slice(1).join(".");

globalStyle(`${selector} + ${selector}`, {
  marginTop: "1rem",
});

// App.tsx
const container = sprinkles({ background: "green" });
<div className={container}>one</div>
<div className={container}>two</div>

[brandonpittman]

Sprinkles itself is incapable of creating a space/flow util, right? If I wanted a simple utility to do this job, I'd have to do something like this, correct?

export let flowSm = style({})
export let flowLg = style({})

globalStyle(`${flowSm} > * + *`, {
  marginBlockStart: vars.space.sm
})

globalStyle(`${flowLg} > * + *`, {
  marginBlockStart: vars.space.lg
})

[graup]

Yes, if you need to select children that's the way to go.

Curious about the need for this though, I usually just use display: flex with gap for Stack components.

[brandonpittman]

https://andy-bell.co.uk/my-favourite-3-lines-of-css/

Why use margin and not gap?

Again, I get asked this a lot. I remember when Safari finally pulled their finger out with gap, I sent Heydon a message saying we should make everything on Every Layout gap, which we were rather excited about. While we were putting actual thought into the second edition—which introduced gap to the layouts—we quickly realised we didn’t want to change The Stack.

This was partly down to the fact that in order to use gap, we would have to make The Stack, either a flex or grid parent. This could cause all sorts of problems for people that grabbed the layout and dropped it in existing projects. This makes up a very large portion of the people who use Every Layout in the real world.

Along with that, all of the control is put on the parent and not the elements themselves. Back in the context of .flow and --flow-space with a fallback value: this wouldn’t be possible with gap. This is because gap is set on the parent (.flow) and controls the space between child elements. The parent is in complete control and the child elements have no say in what gap is at any given moment.

Lastly, along with the flexibility of letting --flow-space be affected by the cascade, and if it’s not set, letting .flow inherit spacing values from the child element it affects. The other key reason I don’t like to use gap is Logical Properties. I personally want everything we build at the studio to use Logical Properties as much as possible, because you get much better multi-language and reading mode support out of the box. They’re really well supported now, too!