원문 : Introducing StyleX

StyleX를 소개하게 되어 매우 기쁩니다. StyleX는 야심찬 애플리케이션을 위한 표현력 있고, 결정론적이고, 신뢰할 수 있으며 확장성을 갖춘 스타일링 시스템입니다. 기존에 출시된 스타일링 라이브러리들로부터 최고의 아이디어를 가져와서, 익숙하면서도 독특하고 새롭게 만들었습니다.

StyleX 란?

StyleX는 CSS-in-JS 라이브러리들의 개발자 경험을 유지하고 컴파일 단계의 도구를 사용해 정적 CSS의 성능 및 확장성과 연결합니다. 하지만 StyleX는 단순한 컴파일러 기반 CSS-in-JS 라이브러리가 아닙니다. StyleX는 대규모 애플리케이션, 재사용 가능한 컴포넌트 라이브러리, 정적으로 타입이 지정된 코드베이스의 요구사항을 충족하도록 세심하게 설계되었습니다.

• StyleX는 표현형 CSS 하위 집합(subset)을 지원합니다. 복잡한 선택자를 지양하고 생성된 CSS에서 특정성 충돌이 발생하지 않도록 보장합니다.
• StyleX는 스타일을 ‘아토믹(atomic)’ CSS 클래스 이름으로 변환, 구성 및 최적화합니다. 유틸리티 클래스 이름의 별도 라이브러리를 학습하거나 관리할 필요가 없습니다.
• StyleX를 사용하면 파일과 컴포넌트 경계를 넘어 스타일을 병합할 수 있으므로 사용자 정의가 가능한 컴포넌트 라이브러리에 이상적입니다.
• StyleX는 타입을 완벽하게 지원하고 타입 유틸리티를 제공하여 컴포넌트에서 허용할 수 있는 속성과 값을 세밀하게 제어할 수 있습니다.

StyleX의 이점은?

빠른 속도

StyleX는 컴파일 타임과 런타임 모두에서 빠르게 작동하도록 설계되었습니다. 바벨 변환(transform)으로 인해 빌드 속도가 현저히 느려지지 않습니다.

StyleX는 런타임에 자바스크립트를 사용하여 스타일을 삽입하는 비용을 완전히 제거하며, 필요할 때 클래스 이름 문자열을 효율적으로 결합하는 것 이상의 작업을 거의 수행하지 않습니다. 또한 생성된 CSS는 크기에 맞게 최적화되어 크기가 큰 웹사이트의 스타일일지라도 브라우저에서 빠르게 파싱될 수 있도록 보장합니다.

확장성

StyleX는 메타에서 사용하는 것과 같이 규모가 매우 큰 코드베이스에 대응할 수 있게 설계되었습니다. 바벨 플러그인은 아토믹 빌드와 파일 수준 캐싱을 최대한 잘 활용하여 컴파일 타임에 수천 개의 컴포넌트에서 스타일을 처리할 수 있습니다. 그리고 StyleX가 스타일을 캡슐화하도록 설계되어 있기 때문에 새로운 컴포넌트가 다른 컴포넌트와 함께 사용될 때 예측 가능하게 렌더링 될 것이라는 기대치를 가지고 새로운 컴포넌트를 독립적으로 개발할 수 있습니다.

StyleX는 아토믹 CSS 클래스 이름을 생성함으로써, CSS 번들의 크기를 최소화하는 데 도움을 줍니다. 애플리케이션의 컴포넌트 수가 증가함에 따라 CSS 번들의 크기는 정체되기 시작합니다. 따라서 개발자는 CSS 파일을 수동으로 최적화하거나 지연 로드하지 않아도 됩니다.

예측 가능성

StyleX는 생성된 규칙 간에 충돌이 발생하지 않도록 CSS 선택자의 특정성을 자동으로 관리합니다. StyleX는 개발자에게 스타일을 안정적으로 적용하는 시스템을 제공하고 “마지막으로 적용된 스타일이 항상 우선 적용”하도록 보장합니다.

합성 가능

StyleX 스타일은 매우 쉽게 합성할 수 있습니다. 여러 로컬 스타일을 조건부로 적용할 수 있을 뿐만 아니라 파일과 컴포넌트 간에 스타일을 전달할 수도 있습니다. 스타일은 항상 예측 가능한 결과로 병합됩니다.

타입 안정성

타입스크립트 또는 Flow 타입을 사용하여 컴포넌트가 허용하는 스타일을 제한할 수 있습니다. 모든 스타일 프로퍼티와 변수에 타입이 완벽하게 지원됩니다.

코로케이션(Colocation)

StyleX는 스타일을 사용하는 컴포넌트와 동일한 파일에 스타일을 작성하는 것을 허용하고 권장합니다. 이는 장기적으로 스타일을 더 가독성 있고 유지 관리하기 쉽게 만드는 데 도움이 됩니다. StyleX는 정적 분석 및 빌드 타임 도구를 사용하여 여러 컴포넌트 간의 중복 스타일과 사용하지 않는 스타일을 제거할 수 있습니다.

테스트 가능

StyleX는 기능적 아토믹 클래스 이름 대신 디버그 클래스 이름을 출력하도록 구성할 수 있습니다. 이는 사소한 디자인 변경에 대응하여 자주 변경되지 않는 스냅샷을 생성하는 데 사용할 수 있습니다.

StyleX는 어떻게 작동하나요?

StyleX는 다음 도구들과 함께 작동합니다.

• 바벨 플러그인
• 작은 런타임 라이브러리
• ESlint 플러그인
• 번들러와 프레임워크와 함께 통합된 성장하고 있는 컬렉션

StyleX의 가장 중요한 부분은 바벨 플러그인입니다. 이 플러그인은 소스 코드에 정의된 모든 스타일을 찾아서 추출하고 컴파일 시점에 아토믹 클래스 이름으로 변환합니다. 도우미 함수는 수집된 스타일을 중복 제거, 정렬하여 CSS 파일로 작성합니다. 이러한 도구는 번들러 플러그인을 구현하는 데 사용됩니다.

StyleX를 최대한 자연스럽게 사용할 수 있도록 StyleX는 지역 상수와 표현식을 사용하여 스타일을 정의하는 다양한 정적 패턴을 지원합니다. 또한 가능한 최상의 성능을 제공하기 위해 바벨 플러그인은 가능한 경우 최종 클래스 이름을 미리 계산하여 주어진 파일에서 클래스 이름 병합을 포함한 모든 런타임 비용을 제거합니다. 컴포넌트가 동일한 파일 내에서 스타일을 정적으로 정의하고 사용하는 경우 런타임 비용은 없습니다.

스타일 컴포지션과 같은 보다 강력한 패턴을 사용하는 경우, 작은 런타임이 클래스 이름의 객체를 동적으로 병합합니다. 이 런타임은 매우 빠르게끔 최적화되어 있으며 결과는 메모이제이션됩니다.

StyleX의 기원

이전 페이스북 웹사이트는 CSS 모듈과 유사한 것을 사용했고 여러 가지 문제로 어려움을 겪었으며, 이는 CSS-in-JS의 초기 아이디어에 영감을 주었습니다. facebook.com 방문자는 평균적으로 수십 메가바이트의 CSS를 다운로드했지만 대부분은 사용되지 않았습니다. 초기 로드를 최적화하기 위해 CSS를 지연 로드하면 업데이트(또는 ‘다음 페인트로의 인터렉션’) 시간이 느려질 수 있었습니다. 복잡한 선택자를 사용하면 충돌이나 ‘특정성 전쟁(specificity wars)‘이 발생할 수 있었습니다. 엔지니어는 문제를 해결하기 위해 !important나 더 복잡한 선택자를 사용하는 경우가 많았고, 이는 전체 시스템을 점점 더 악화시켰습니다.

몇 년 전, 리액트를 사용해 facebook.com을 처음부터 다시 구축할 때 더 나은 무언가가 필요하다는 것을 깨닫고 StyleX를 구축했습니다.

StyleX는 확장이 가능하도록 설계되었으며, 수년간의 사용 경험을 통해 그 설계는 입증되었습니다. 우리는 성능이나 확장성을 후퇴시키지 않으면서도 새로운 기능을 추가하여 StyleX를 더욱 즐겁게 사용할 수 있도록 만들었습니다.

메타에서는 StyleX를 사용하면서 확장성과 표현력이 모두 크게 향상되었습니다. facebook.com에서는 수십 메가바이트의 지연 로드된 CSS 번들을 수백 킬로바이트의 단일 번들로 줄일 수 있었습니다.

웹 리액트 개발자의 스타일링 요구를 충족할 뿐만 아니라 웹과 네이티브에서 리액트의 스타일링을 통합하기 위해 StyleX를 만들었습니다.

메타는 어떻게 StyleX를 사용하나요?

StyleX는 메타 내의 모든 웹 플랫폼에서 컴포넌트를 스타일링하는 데 선호하는 방법이 되었습니다. StyleX는 페이스북, 왓츠앱, 인스타그램, 워크플레이스, 쓰레드 등 메타의 모든 주요 외부 및 내부 제품의 리액트 컴포넌트 스타일을 지정하는 데 사용됩니다. 컴포넌트를 작성하는 방식이 바뀌었고, 스타일링된 컴포넌트를 캡슐화하고 확장할 수 없어 팀이 겪었던 문제를 해결했습니다.

메타의 엔지니어가 StyleX를 사용하여 정적 및 동적 스타일을 모두 작성할 수 있도록 StyleX의 초기 기능을 확장했습니다. 우리 팀은 StyleX 테마 API를 사용하여 다양한 메타 제품 내에서 사용되는 다양한 디자인 시스템의 외관을 취하도록 테마가 지정된 “범용” 컴포넌트를 개발하고 있습니다. 또한 StyleX가 리액트 네이티브의 스타일링 시스템에 도입된 캡슐화 원칙과 일치하기 때문에 크로스 플랫폼 스타일링에 대한 지원을 점차 확대하고 있습니다.

오픈 소스

저희가 내부적으로 사용하는 것을 오픈 소스로 공개하고 있습니다. 저희는 깃허브에서 먼저 개발한 후 다시 메타에 동기화합니다. StyleX는 원래 메타에서 메타를 위해 만들어졌지만, 메타에만 국한된 것은 아닙니다.

이것은 아직 시작에 불과합니다. 앞으로 커뮤니티와 협력하여 추가적인 최적화와 더 많은 통합 기능을 도입할 수 있기를 기대합니다.

여러분도 저희만큼이나 StyleX를 사랑해 주시길 바랍니다. ❤️

🚀 한국어로 된 프런트엔드 아티클을 빠르게 받아보고 싶다면 Korean FE Article을 구독해주세요!