Build a stack/Flow component

[gavinthomas-valtech]

I;',m trying to build a Flow/Stack component which would be very useful

https://piccalil.li/blog/flow-utility/

https://every-layout.dev/layouts/stack/

The component looks like this

export const Stack = <T extends ElementType = "div">({
  as,
  spacing = "spacing0",
  className,
  children,
  ...rest
}: StackProps<T>) => {
  const Component = as || "div";

  return (
    <Component className={clsx(stack[spacing], className)} {...rest}>
      {children}
    </Component>
  );
};

and the vanilla extract css

export const stack: Record<SpacingToken, string> = styleVariants(
  spacing,
  (space) => ({
    selectors: {
      "& > * + *": {
        marginTop: space,
      },
    },
  }),
);

I get an error from vanilla extract as it won't allow the selector

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

Style selectors must target the '&' character (along with any modifiers), e.g. $ {parent} & or ${parent} &:hover.

This is to ensure that each style block only affects the styling of a single clas
s.

If your selector is targeting another class, you should move it to the style defi
nition for that class, e.g. given we have styles for 'parent' and 'child' element
s, instead of adding a selector of & ${child}) to 'parent', you should add ${p arent} & to 'child').

If your selector is targeting something global, use the 'globalStyle' function in
stead, e.g. if you wanted to write & h1, you should instead write 'globalStyle(
${parent} h1, { ... })'

Any ideas how i can implement this as a component and use vanilla extract?

[semanticpixel]

You could use sprinkles to create a “flow” sprinkle that uses a CSS var to set the margin. And then you can use assignInlineVars to set the value based on the prop of the component. I’ll try to provide an example later today if someone else hasn’t provided a better answer.

In the future we will be able to use margin-trim

[gavinthomas-valtech]

I ended up going down this route using globalStyle

export const stack = styleVariants(spacing, () => ({}));

// Add the "space between children" rule globally for each variant
for (const key in stack) {
  const variantClass = stack[key as SpacingToken];
  globalStyle(`${variantClass} > * + *`, {
    marginTop: spacing[key as SpacingToken],
  });
}

Which now allows me to keep the existing stack component