‏مهاجرت Linear از styled-components به StyleX

به گفتهٔ نویسنده، تیم Linear طی چند ماه گذشته با یه گردش‌کار تکرارپذیر و کمک‌گرفته از ایجنت‌های کدنویسی، داره اپ‌های ری‌اکتش رو به StyleX منتقل می‌کنه. دلیل اصلی کاراییه: CSS-in-JSِ زمان‌اجرا یعنی کاربر باید هزینهٔ تولید استایل و تزریق قوانین CSS رو موقع رندر شدن سمت کلاینت بده. ولی به گفتهٔ نویسنده این فقط نصف ماجراست.

نویسنده می‌گه styled-components خیلی خوب به Linear خدمت کرده: استایل‌ها رو نزدیک کامپوننت نگه می‌داشت و تمام قدرت CSS رو می‌داد. ولی این آزادی یه هزینه داره؛ چیزی مثل styled(Button) باعث می‌شه بازکردن و تغییر استایل یه کامپوننت از بیرون عادی بشه، به‌جای اینکه قرارداد استایل‌دهی صریح باشه. به گفتهٔ اون وقتی از هر جایی بشه هر چیزی رو override کرد، اهمیت‌دادن به UI فقط تا یه جایی مقیاس می‌گیره.

چیزی که تیم رو به این تصمیم هل داد، رفتن styled-components به حالت نگه‌داری (maintenance mode) بود. بعد از ارتقا به ری‌اکت ۱۸، این رو مستقیم حس کردن: ری‌اکت useInsertionEffect رو معرفی کرد تا کتابخونه‌های CSS-in-JS از مشکلات کارایی فرار کنن، ولی styled-components هیچ‌وقت اون رو نپذیرفت. نویسنده حتی یه فورک بهینه‌شده رو تست کرد، ولی خودِ سازنده‌اش اون رو یه «آخرین راه‌چاره» توصیف می‌کنه، نه یه برنامهٔ بلندمدت.

از بین کتابخونه‌ها، نزدیک‌ترین جایگزین vanilla-extract بود، ولی نویسنده می‌گه APIش پراکنده بود و نیاز به فایل استایل جدا با سبک کاری‌شون جور درنمیومد. StyleX استایل رو کنار کامپوننت نگه می‌داره، یه API کوچیک و حل‌وفصل قطعی استایل داره، توسط Meta فعالانه نگه‌داری می‌شه و Figma و Cursor هم ازش استفاده می‌کنن. البته سخت‌گیریش مجانی نیست: بعضی الگوها مثل سلکتورهای وابسته به والد و بازاستایل کامپوننت از طریق wrapper سخت‌تر می‌شن.

نویسنده می‌گه آرزو داشت ایجنت‌ها بتونن کل کدبیس رو خودکار مهاجرت بدن، ولی styled-components یه زبان کامل و API کاملاً باز بهت می‌ده و راه‌های بیان یه نیت این‌قدر زیاده که راحت می‌شه خروجی‌ای ساخت که درست به نظر بیاد ولی یه‌جای ظریفش اشتباه باشه. برای همین یه codemod قطعی نوشت (همون ورودی، همون خروجی) که الان بیش از ۵۰۰ PR و حدود ۱۰۰ هزار خط ابزار مهاجرت داره.

به گفتهٔ نویسنده، مهاجرت باید تدریجی باشه، چون styled-components و StyleX یه مدت کنار هم زندگی می‌کنن. رویکردشون اینه: اول پایهٔ استایل و متغیرها رو تعریف کنن، به ایجنت‌ها دامنهٔ باریک و چک‌لیست روشن بدن، از برگ‌های درخت (کامپوننت‌هایی که بقیه رو نمی‌پیچن) شروع کنن، با لینت سخت‌گیر مسیر درست رو واضح کنن و برای مشکلات واقعاً CSS-شکل از CSS Modules به‌عنوان escape hatch استفاده کنن.

تا زمان نوشتن مقاله، کمی بیش از ۵۸٪ فایل‌ها منتقل شدن و با حذف تولید و تزریق CSS زمان اجرا، رندر موقع جابه‌جایی بین صفحه‌ها حدود ۳۰٪ سریع‌تر شده. نویسنده صادقانه می‌گه پروژهٔ پرزحمتی بوده و کلی رگرسیون استایلی هم داشتن، ولی مسیر درستیه. جمع‌بندیش اینه که ایجنت‌ها حجم شگفت‌انگیزی کار انجام می‌دن، ولی هنوز آدم لازمه که حالت‌های hover خراب رو ببینه و سیستمی بسازه که ایجنت‌ها توش بهره‌ور باشن.

نکات کلیدی:

• دلیل اصلی مهاجرت، حذف هزینهٔ تولید و تزریق CSS زمان اجراست
• رفتن styled-components به حالت نگه‌داری و نپذیرفتن useInsertionEffect نقطهٔ عطف بود
• StyleX استایل رو کنار کامپوننت نگه می‌داره ولی بازاستایل از بیرون رو سخت می‌کنه
• یه codemod قطعی با بیش از ۵۰۰ PR و حدود ۱۰۰ هزار خط، ستون فقرات مهاجرته
• تا الان بیش از ۵۸٪ فایل‌ها منتقل شدن و رندر حدود ۳۰٪ سریع‌تر شده