‏StyleX؛ استایل جاوااسکریپتی با خروجی CSS خالص

فلاویو کوپز تو یه آموزش کامل سراغ StyleX رفته، یه syntax و کامپایلر جاوااسکریپتی برای استایل‌دهی که استایل‌ها رو به شکل آبجکت جاوااسکریپت می‌نویسی و موقع build به یه فایل CSS معمولی تبدیل می‌شن. به گفتهٔ نویسنده، کلید فهم StyleX همینه: موقع نوشتن شبیه CSS-in-JS به نظر میاد، ولی مرورگر فقط کلاس CSS معمولی می‌گیره و تو production هیچ استایلی موقع رندر تزریق نمی‌شه.

StyleX رو متا برای رابط‌های خیلی بزرگ ساخته و می‌گه الان فیس‌بوک، اینستاگرام، واتساپ، مسنجر و Threads رو می‌گردونه. تیم Linear هم تو سال 2026 با بیش از 1000 پول‌ریکوئست از styled-components به StyleX مهاجرت کرده. نویسنده می‌گه لازم نیست اپت اندازهٔ محصولات متا باشه، ولی خوبه بدونی این ابزار برای چه مشکلاتی ساخته شده: تداخل اسم کلاس‌ها، معلوم نبودن اینکه کدوم قانون رو می‌شه پاک کرد، و اورراید شدن غیرقابل‌پیش‌بینی استایل‌ها.

کل کار عملاً روی دو تابع می‌چرخه. اول stylex.create() که گروه‌های نام‌گذاری‌شدهٔ استایل می‌گیره:

const styles = stylex.create({
  title: {
    color: 'rebeccapurple',
    fontSize: 32,
  },
})

بعد stylex.props() که خروجیش یه آبجکت شامل className (و در صورت نیاز style) هست و با spread روی المان سوار می‌شه. کامپایلر برای هر declaration یه کلاس اتمیک جدا با اسم هش‌شده می‌سازه، یعنی color و fontSize بالا دو کلاس مجزا می‌شن. چون هر کلاس فقط یه declaration داره، همون کلاس همه‌جا دوباره استفاده می‌شه: HTML کلاس بیشتری می‌گیره، ولی استایل‌شیت تکرار کمتری داره و با بزرگ‌تر شدن اپ کندتر رشد می‌کنه.

ترکیب استایل‌ها هم دعوای specificity نداره. وقتی چند استایل رو با هم می‌دی، برای یه property مشترک آخری برنده‌ست و این تصمیم قبل از رسیدن به مرورگر گرفته می‌شه، نه بر اساس ترتیب سورس CSS:

<article {...stylex.props(styles.card, styles.featured)} />

راه‌اندازیش سنگین نیست: پکیج @stylexjs/stylex به‌علاوهٔ پلاگین @stylexjs/unplugin تو vite.config.ts، با این شرط که stylex.vite() قبل از react() بیاد تا React Fast Refresh نشکنه. همون پلاگین Vite تو Astro هم کار می‌کنه و به integration جداگانه نیاز نداره، فقط stylex.create() باید تو فایل‌های js/ts/jsx/tsx بمونه چون پلاگین فعلی سینتکس .astro رو ترنسفورم نمی‌کنه. نویسنده هم یادآوری می‌کنه StyleX نحوهٔ نوشتن CSS رو عوض می‌کنه، نه نیاز به بلد بودن CSS رو.

نکات کلیدی:

• StyleX آبجکت‌های استایل جاوااسکریپت رو موقع build به CSS اتمیک تبدیل می‌کنه، بدون تزریق استایل تو production
• هر declaration یه کلاس هش‌شدهٔ جداست، پس اسم کلاس‌ها تداخل ندارن و بین کامپوننت‌ها dedup می‌شن
• API اصلی دو تابعه: stylex.create() برای تعریف و stylex.props() برای اعمال استایل
• تو ترکیب چند استایل، آخرین استایل برای property مشترک برنده‌ست، مستقل از ترتیب سورس CSS
• متا می‌گه StyleX الان فیس‌بوک، اینستاگرام، واتساپ، مسنجر و Threads رو می‌گردونه
• تیم Linear با بیش از 1000 پول‌ریکوئست از styled-components به StyleX مهاجرت کرده
• تو Vite باید stylex.vite() قبل از react() بیاد؛ همون پلاگین بدون integration جدا تو Astro هم کار می‌کنه