vanila-extract
with Typescript
CSSProperties
ํ์ค CSS ์์ฑ๋ค์ ์ ํํ ํ์ ๋ค์ ์ ๊ณต
import { CSSProperties } from '@vanila-extract/css'
export type StyleProps = {
align?: CSSProperties['textAlign'],
decoration?: CSSProperties['textDecoration'],
...,
}
CSS ์์ฑ์ ์ด๋ค ๊ฐ์ด ๋ค์ด๊ฐ ์ ์๋์ง๋ฅผ TypeScript ์์ค์์ ์ ํํ๊ฒ ๋ณด์ฅํด์ฃผ๋ ํ์ ๋ค์ ์ ๊ณต
Packages
vanilla-extract
๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ ๋น๋์ด์ง๋ง, emotion์ style props์ฒ๋ผ ๋ฐํ์์ ๋์ ์ผ๋ก ์คํ์ผ ๊ฐ์ ๋ฐ๊ฟ ์์๋ ๊ธฐ๋ฅ๋ค์ ์ ๊ณต
๋์ ? ์ ์ ?
css-in-js๋ ๋ฐํ์์ ์คํ์ผ์ ๊ณ์ฐํ๊ธฐ ๋๋ฌธ์, ์คํ์ผ์ ์์ ๋กญ๊ฒ ํ์ฅํ๊ฑฐ๋ ์ค๋ฒ๋ผ์ด๋ํ๊ธฐ์ ์ ์ฐํจ
๋ณดํต ์คํ์ผ์ ์์ ๋กญ๊ฒ ์ค์ ํ ์ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(Chakra๋ MUI)๋ค์ ๋ณด๋ฉด ๋ด๋ถ์ ์ผ๋ก
emotion
๊ฐ์ css-in-js๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐํ์ ์คํ์ผ ๊ณ์ฐ ๋ฐฉ์๋๋ฌธ์ ์ ์ฐํ๊ฒ ์คํ์ผ์ ํ์ฅ๊ฐ๋ฅํ ๊ฒ
๋ฐ๋ฉด, vanilla-extract๋ ์ ์ CSS๋ฅผ ์์ฑํ๋ ๋ฐฉ์์ด๋ผ ๋ฏธ๋ฆฌ ์ ์๋ ์กฐํฉ ์์์๋ง ์คํ์ผ์ ์ ์ดํ ์ ์๊ณ , ํ์ฅ์ด๋ ์ค๋ฒ๋ผ์ด๋๋ ํด๋์ค๋ค์ ๋จ์๋ก ์ ํ๋จ
๋ชจ๋ ๊ฒฝ์ฐ์ ์๋ฅผ ์ฌ์ ์ ํด๋์ค ํํ๋ก ๋ณํํด ์ ์ ์ผ๋ก ์์ฑํ๊ธฐ ๋๋ฌธ
์ด๋ฐ ์ํฉ์์ ํ์ฅ์ฑ ์๊ฒ ์์ ๋กญ๊ฒ ์คํ์ผ์ ์ปค์คํ ํ๋ ค๋ฉด ๊ฒฐ๊ตญ
style
์์ฑ์ ์ฌ์ฉํ ์๋ฐ์ ์์๋ค๋ง,
style
์ ์ธ๋ผ์ธ ์คํ์ผ์ด๊ธฐ ๋๋ฌธ์className
์ผ๋ก ์ ์ฉํ ์คํ์ผ๋ณด๋ค ์ฐ์ ์์๊ฐ ๋์์ฆ, ์์์น ๋ชปํ ์คํ์ผ ๋ฎ์ด์ฐ๊ธฐ๊ฐ ์๊ธธ ์ ์์ผ๋ ์ฃผ์ํด์ผํจ
Sprinkles
์คํ์ผ ๊ฐ๋ค์ ๋ฏธ๋ฆฌ ์ ์ธํด์ ์์ฑํด๋๊ณ css์ ํด๋์ค๋ฅผ ๋ฐ๊ฟ์ ๋์ ์ผ๋ก ์ฒ๋ฆฌ๋๋๊ฒ์ฒ๋ผ ๋์
npm install @vanilla-extract/sprinkles
depineProperties
์ฌ์ฉํ๊ณ ์ํ๋ ์คํ์ผ ๊ฐ(properties)๋ค์ ๋ฏธ๋ฆฌ ์ ์ธ
ํ๋กํผํฐ์ ํ์ฉ๋๋ ๊ฐ๋ค์ ๋ฏธ๋ฆฌ ์ ์ํด ๋๊ณ , ์คํ์ผ ์์ฑ ์ ์ด๋ค ๊ฐ๋ค์ด ๊ฐ๋ฅํ์ง ํ์ ๊ณผ ํจ๊ป ๋ช ํํ๊ฒ ๊ด๋ฆฌ ๊ฐ๋ฅ
์กฐ๊ฑด์ ๋ฐ๋ฅธ ๊ฐ๋ค์ ๋ถ๊ธฐ ๊ฐ๋ฅ (๋ฐ์ํ, ๋คํฌ๋ชจ๋ ๋ฑ)
shorthands
: ์ ์ํด๋ ๊ฐ๋ค์ ํ๋์ ์ถ์ฝ ํค์๋๋ก ๋ฌถ์ด์ ๊ฐ๊ฒฐํ๊ฒ ์ฌ์ฉํ๊ฒ ํด์ค ์ ์๋ ๊ธฐ๋ฅ
import { defineProperties, createSprinkles } from '@vanila-extract/sprinkles';
const responsiveProperties = defineProperties({
// ๋ฐ์ํ ์กฐ๊ฑด
conditions: {
mobile: {},
tablet: { '@media': 'screen and (min-width: 768px)' },
desktop: { '@media': 'screen and (min-width: 1024px)' },
},
defaultCondition: 'mobile',
/* ex: ๋คํฌ๋ชจ๋
conditions: {
lightMode: {},
darkMode: { '@media': '(prefers-color-scheme: dark)' }
}
defaultCondition: 'lightMode'
*/
properties: {
paddingTop: {
none: 0,
xs: '4px',
sm: '6px',
md: '8px',
},
...
},
shorthands: {
padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight']
}
})
export const sprinkles = createSprinkles(
responsiveProperties,
//...etc,
);
// It's a good idea to export the Sprinkles type too
export type Sprinkles = Parameters<typeof sprinkles>[0];
Usage
className: clsx(sprinkles(props), props.className)
Recipes
์ฌ๋ฌ ์คํ์ผ ๋ณํ(variants)์ ์ฒด๊ณ์ ์ผ๋ก ๊ตฌ์ฑํ ๋ ์ ์ฉํ ๊ธฐ๋ฅ
npm install @vanilla-extract/recipes
๋ฒํผ์ฒ๋ผ ๋ค์ํ ์ํ (color, size, variants)๋ฅผ ์กฐํฉํด์ ๊ด๋ฆฌํด์ผํ ๋ ์ ์ฉ
props๋ฅผ ๋ฐ์ ์๋์ผ๋ก ๋์๋๋ ์คํ์ผ์ ์ ์ฉํ ์ ์๊ฒ ํด์ค
๋น๋ ๋จ๊ณ์์ ์คํ์ผ ์กฐํฉ์ ๊ฒฝ์ฐ์ ์๋ฅผ ๋ฏธ๋ฆฌ ๊ณ์ฐํด CSS ํด๋์ค๋ก ๋ณํ
๋ฐํ์์์๋ props์ ๋ฐ๋ผ ํด๋น ํด๋์ค๋ง ๊ต์ฒดํด ์ ์ฉ๋์์ผ๋ก, ๋ง์น ๋์ ์ผ๋ก ์คํ์ผ์ด ์ ์ฉ๋๋ ๊ฒ์ฒ๋ผ ๋์
import { recipes } from '@vanila-extract/recipes';
export const styles = recipes({
variants: {
size: {
xs: {},
sm: {},
md: {},
},
},
defaultVariants: {
size: 'xs',
}
})
Last updated