stitches-mix v0.2.2

Stitches Mix

Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.

Usage

To import all utils from the package:

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

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

If you prefer, you can also import specific properties or groups. For more info, click here.

Property overview

Do you have an idea for a new property? Please open an issue to suggest it.

Spacing

Note: spaceX and spaceY are utilities for controlling the space between child elements. It's different from mx and my.

Radii

Size

Import specific properties

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

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

You can also import specific group utilities:

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

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

Custom Utils

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
  }
});

License

This project is licensed under the MIT License - see the LICENSE.md file for more information.