Meta의 StyleX 오픈소스 CSS 라이브러리 소개

Description

Meta(Facebook)가 발표한 Stylex는 웹 개발자들 사이에서 큰 관심을 불러일으키고 있는 새로운 오픈소스 CSS 라이브러리입니다.
이 라이브러리는 웹 개발의 스타일링 측면에서 효율성과 유연성을 크게 향상시키는 것을 목표로 합니다. Stylex의 주요 특징과 사용 방법에 대해 살펴보겠습니다.

My Opinion

• StyleX 는 Web Application 의 스타일을 지정하는 라이브러리로, CSS-in-JS 방식을 채택하고 있습니다.
• 이는 컴포넌트별로 스타일을 분리할 수 있게 해주며, 대규모 프로젝트에서 스타일의 재사용성과 관리 용이성을 크게 향상시킵니다. 또한, 코드 스플리팅과 같은 최신 웹 최적화 기술과 잘 어울려 빠른 로딩 시간과 높은 성능을 보장합니다.
• 이미 메타에서 3년간 사용해온 라이브러리로, 현재는 메타의 모든 웹 프로젝트에서 사용되고 있습니다. 따라서 검증은 물론, 성능 최적화에 대한 신뢰도도 높습니다.
• StyleX vs TailwindCSS
  • CSS-in-JS: TailwindCSS 는 CSS Utility 라이브러리로, CSS 클래스를 통해 스타일을 지정합니다, 반면, StyleX 는 CSS-in-JS 방식을 채택하고 있습니다.
  • Type Safety: StyleX 는 TypeScript 를 통해 기본적으로 Type Safety 를 제공합니다, 반면 TailwindCSS 는 기본적으로 tyepscript 의 type safty를 지원하지 않아, 이제까지 plugin 을 통해 사용했습니다.

Stylex의 주요 특징

1. 모듈식 접근 방식

Stylex는 모듈식 접근 방식을 채택하여, 컴포넌트별로 스타일을 분리할 수 있게 해줍니다. 이는 대규모 프로젝트에서 스타일의 재사용성과 관리 용이성을 크게 향상시킵니다.

2. 성능 최적화

Stylex는 CSS-in-JS 솔루션으로, 런타임에서의 성능 부담을 최소화합니다. 코드 스플리팅과 같은 최신 웹 최적화 기술과 잘 어울려 빠른 로딩 시간과 높은 성능을 보장합니다.

3. 유연한 스타일링

컴포넌트 기반의 개발 방식을 완벽하게 지원하며, 조건부 스타일링, 상속, 오버라이딩 등 다양한 스타일링 요구사항을 유연하게 처리할 수 있습니다.

Stylex 사용 방법

Stylex를 사용하기 위해서는 먼저 npm을 통해 라이브러리를 프로젝트에 추가해야 합니다:

npm install --save @stylexjs/stylex

기본적인 사용 예제는 다음과 같습니다:

import * as stylex from '@stylexjs/stylex'

const styles = stylex.create({
  button: {
    backgroundColor: {
      default: 'lightblue',
      ':hover': 'blue',
      ':active': 'darkblue',
    },
  },
})

function MyButton() {
  return <button className={stylex(styles.button)}>Click me</button>
}

Next.js와 함께 사용하기

next.config.js

const stylexPlugin = require('@stylexjs/nextjs-plugin')

module.exports = stylexPlugin({
  rootDir: __dirname,
})({})

.babelrc.js

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      '@stylexjs/babel-plugin',
      {
        dev: process.env.NODE_ENV === 'development',
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  ],
}