윤민석
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 대회를 목표로 계속 열심히 해보도록 하겠습니다!!
Mincho
디자인시스템을 위한 CSS in JS 프레임워크
![Screenshot 2024-09-01 at 01-59-09 Phind - ## 1. What is CSS in JS CSS in JS is a technique that allows you to write CSS styles directly within your JavaScript(or TypeScript) code. Instead of creating separate CSS files you can define styles along[...].png](https://disquiet-public.s3.ap-northeast-2.amazonaws.com/images/makerlog/cd6fab591d7d9f47477040090b4cbe374361b075e132fd9db154504ab6a80d91 "Screenshot 2024-09-01 at 01-59-09 Phind - ## 1. What is CSS in JS CSS in JS is a technique that allows you to write CSS styles directly within your JavaScript(or TypeScript) code. Instead of creating separate CSS files you can define styles along[...].png")
아무래도 트래픽은 한번에 몰리는 특징이 있다보니, 여러가지 준비가 필요한 것 같아요.