import { createStyled } from "@stitches/react";
import * as utils from "stitches-mix";

export const { styled, css } = createStyled({
  utils
});

import { createStyled } from "@stitches/react";
import { mx, my } from "stitches-mix";

export const { styled, css } = createStyled({
  utils: {
    mx,
    my
  }
});

import { createStyled } from "@stitches/react";
import * as spacingUtils from "stitches-mix/spacing";

export const { styled, css } = createStyled({
  utils: {
    ...spacingUtils
  }
});

import type { PropertyValue } from "@stitches/react";
import { createStyled } from "@stitches/react";
import { createUtil } from "stitches-mix";

/**
 * I still haven't found a solution to infer the types based on the provided
 * properties, so you need to provide the types to the createUtil function.
 */

const size = createUtil<PropertyValue<"width">>(["width", "height"]);

const borderTopRadius = createUtil<PropertyValue<"borderRadius">>([
  "borderTopLeftRadius",
  "borderTopRightRadius"
]);

// You can more control over the utility by adding a selector
export const spaceX = createUtil<PropertyValue<"margin">>(
  ["marginLeft"],
  "& > :not([hidden])~:not([hidden])"
);

export const { styled, css } = createStyled({
  utils: {
    size,
    borderTopRadius
  }
});