Mincho Variants 기능 릴리즈!!

PMC S24를 위해 Variants 기능을 릴리즈 하였습니다.

Vanilla Extract에서는 Recipe라고 알려진 기능으로,

저희 릴리즈 버전에서는 몇가지 기능이 추가되었는데요

1. Flatten Base Style

원래는 base 키에서만 기본 스타일을 지정할 사용할 수 있었지만,

const button = rules({
  base: {
    color: "black",
    backgroundColor: "white",
    borderRadius: 6
  }
});

Stitches처럼 바로 스타일을 작성가능하도록 했습니다.

const button = rules({
  color: "black",
  backgroundColor: "white",
  borderRadius: 6,
});

2. Toggle Variants

기존에는 toggle 해야하는 스타일은 `true`라는 variants로 설정하도록 되어있었는데요,

const button = rules({
  variants: {
    rounded: {
      true: { borderRadius: 999 }
    }
  }
});

저희는 toggles라는 필드를 넣어 간편히 토글 variants를 설정할 수 있도록 하였습니다.

const button = rules({
  toggles: {
    rounded: { borderRadius: 999 }
  }
});

3. 배열값을 허용하는 타입추론 및 사용법

기존에는 toggle 때와 마찬가지로 true를 사용했어야 했지만,

const button = rules({
  variants: {
    rounded: {
      true: { borderRadius: 999 }
    }
    outlined: {
      true: { border: "1px solid black" }
    },
    size: {
      small: { padding: 12 },
      medium: { padding: 16 },
      large: { padding: 24 }
    }
  },

  defaultVariants: {
    rounded: true,
    outlined: true
  }
  compoundVariants: [
    {
      variants: {
        outlined: true,
        size: "small",
      },
      style: {
        fontSize: "16px"
      }
    }
  ]
});

배열을 사용할 경우 자동적으로 true로 사용하도록 만들고 타입추론까지 되도록 하였습니다.

const button = rules({
  variants: {
    rounded: {
      true: { borderRadius: 999 }
    }
    outlined: {
      true: { border: "1px solid black" }
    },
    size: {
      small: { padding: 12 },
      medium: { padding: 16 },
      large: { padding: 24 }
    }
  },

  defaultVariants: ["rounded", "outlined"],
  compoundVariants: [
    {
      variants: ["outlined", { size: "small" }],
      style: {
        fontSize: "16px"
      }
    }
  ]
});

button을 사용할때도 마찬가지로 배열을 허용하고 자동변환됩니다.

const myButton = button(["outlined", "rounded"]);

4. CSS()와의 연동

일반 스타일링을 담당하는 css()에 그대로 넣으면, 기본 Variants를 사용하도록하여 편의성을 높혔습니다.

const base = css({ color: red });
const myRule = rules({
  background: blue,
  props: ["padding"],
  toggles: {
    rounded: { borderRadius: 999 }
  }
});

const myCss = css([base, myRules]); // Same as [base, myRules()]

아직 목표했던 모든 기능을 릴리즈하지는 못했지만, 다양한 편의기능이 들어갔어요.

그럼 11월 공개SW 대회를 목표로 계속 열심히 해보도록 하겠습니다!!