vanilla-extract

goolgaeΒ·2021λ…„ 3μ›” 29일
3

vanilla-extract

λͺ©λ‘ 보기
1/1
post-thumbnail

🧁 vanilla-extractλž€?

πŸš€ 개빠λ₯Έ Stylesheets-in-TypeScript.

λ”°λˆλ”°λˆν•œ css-in-js, **vanilla-extract**κ°€ λ‚˜μ™”μŠ΅λ‹ˆλ‹€. ~~바닐라 μΆ”μΆœλ¬Ό~~


μž‘λ™μ›λ¦¬

둜컬 λ²”μœ„μ˜ 클래슀 이름과 CSS λ³€μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ TypeScript (λ˜λŠ” JavaScript)둜 μŠ€νƒ€μΌμ„ μž‘μ„±ν•œ λ‹€μŒ λΉŒλ“œμ‹œ 정적 CSS νŒŒμΌμ„ μƒμ„±ν•œλ‹€κ³  ν•©λ‹ˆλ‹€.

아직 μ•ŒνŒŒλ²„μ „μž…λ‹ˆλ‹€.


νŠΉμ§•!

  • πŸ”₯ λΉŒλ“œ 속도가 Sass, Less κΈ‰μž…λ‹ˆλ‹€.
  • ✨ pure cssμ™€μ˜ 차이가 거의 μ—†μŠ΅λ‹ˆλ‹€.
  • πŸ¦„ λͺ¨λ“  Fe ν”„λ ˆμž„μ›Œν¬λ˜λŠ” ν™€λ‘œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • 🌳 CSS Modules 마λƒ₯ 클래슀 이름이 κ²ΉμΉ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  • πŸš€ CSS λ³€μˆ˜κ°€ κ²ΉμΉ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. @keyframes 와 @font-face κ·œμΉ™ λ§ˆμ €λ„
  • 🎨 λ™μ‹œ ν…Œλ§ˆλ₯Ό μ§€μ›ν•˜λŠ” μ΄ˆκ³ μ˜€κΈ‰ ν…Œλ§ˆ μ‹œμŠ€ν…œ. μ „μ—­ μ•„λ‹˜
  • πŸ›  calc ν‘œν˜„μ‹μ„ μœ„ν•΄ λ³€μˆ˜μ— μ§‘μ€‘λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
  • πŸ’ͺ CSSType의 κ°€ν˜Έλ₯Ό λ°›μ•„ Type-safe stylesμž…λ‹ˆλ‹€.
  • πŸƒβ€β™‚οΈ 개발 및 ν…ŒμŠ€νŠΈλ₯Ό μœ„ν•œ 선택적 λŸ°νƒ€μž„μž…λ‹ˆλ‹€.

μ„€μΉ˜

  1. 쒅속성 νŒŒμΌμ„ μ„€μΉ˜ν•΄μ€λ‹ˆλ‹€.
$ yarn add --dev @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/webpack-plugin
  1. Babel ν”ŒλŸ¬κ·ΈμΈμ„ μΆ”κ°€ν•΄μ€λ‹ˆλ‹€.
{
  "plugins": ["@vanilla-extract/babel-plugin"]
}
  1. webpack ν”ŒλŸ¬κ·ΈμΈμ„ μΆ”κ°€ν•΄μ€λ‹ˆλ‹€.
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');

module.exports = {
  plugins: [new VanillaExtractPlugin()],
};

webpack κ΅¬μ„±μ—μ„œ CSS νŒŒμΌμ„ μ²˜λ¦¬ν•˜κ³  μžˆλŠ”μ§€ ν™•μΈν•΄μ•Όν•©λ‹ˆλ‹€.

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new VanillaExtractPlugin(),
    new MiniCssExtractPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
};
profile
예쁜거 μ’‹μ•„ν•˜λŠ” 18μ‚΄ κ°œλ°œμžμž…λ‹ˆλ‹€.

0개의 λŒ“κΈ€