لینیر با هزار PR از styled-components به StyleX کوچ کرد
فرانتاند
ریاکت
جاوااسکریپتخلاصهٔ کاملتر
کنث اسکوهاوس تو بلاگ لینیر نوشته که مهاجرت اپلیکیشنهای ریاکت این شرکت از styled-components به StyleX، یعنی کتابخونهٔ استایل متا که کلاسها رو موقع build میسازه نه موقع رندر، بیشتر از هزار PR طول کشیده. به گفتهٔ او styled-components سالها خوب جواب داده بود: API منعطف، استایل چسبیده به کامپوننت و امکان نوشتن CSS خام هر وقت لازم بود. ولی همون انعطاف بینهایت کمکم شد نقطهضعف.
مشکل اصلی این بود که الگویی مثل styled(Button) باز کردن کامپوننت از بیرون و دستکاری استایلش رو عادی کرده بود، و بعد از ریدیزاین اخیر لینیر همین موضوع یه دنبالهٔ طولانی از رگرسیونهای UI ساخت. کنارش CSS-in-JS موقع رندر کار اضافه میذاره؛ بعد از ارتقا به ریاکت ۱۸ و رندر همروند، افت عملکرد دیدن و styled-components هم رفته بود تو حالت maintenance.
برای انتخاب جایگزین چند شرط قطعی گذاشته بودن: ساخته شدن استایل موقع build، سخت کردن عمدی استایلدهی از راه دور، ادغام قابل پیشبینی استایلها بدون بازی با specificity، و پشتیبانی فعال و بلندمدت. vanilla-extract نزدیکترین رقیب بود ولی API پراکندهتر و جدا بودن فایل استایل از کامپوننت به سبک کارشون نمیخورد. StyleX چون استایل رو کنار کامپوننت نگه میداره و API کوچیکی داره برنده شد.
خود مهاجرت با یه codemod قطعی شروع شد که اسکوهاوس با اسم styled-components-to-stylex-codemod منتشرش کرده، بعد ایجنتها با اسکوپ باریک و چکلیست و اسکریپت اعتبارسنجی کمک کردن، و کار از کامپوننتهای برگ شروع شد تا دیفها کوچیک بمونه. برای اینکه تیم عقب نره، یه شمارندهٔ styled-components تو تولبار توسعه، نمودار پیشرفت و یه بات که تو PRها تذکر میداد گذاشتن.
بعد از مهاجرت هم قوانین لینت سفارشی روی Oxlint و یه چکر type-aware کل ریپو رو میپان تا الگوهای قدیمی برنگردن و پراپ sx استاندارد استایلدهی بین کامپوننتها بمونه. جاهایی که مشکل ذاتاً CSS بوده، مثل سلکتور گلوبال یا استایل دادن به DOM کتابخونههای دیگه، از CSS Modules بهعنوان راه فرار استفاده کردن و تمها رو هم با ThemeProvider خودشون روی توکنهای StyleX سوار کردن.
نکات کلیدی:
- مهاجرت کامل بیشتر از ۱۰۰۰ PR طول کشید و با یه codemod اپنسورس جلو رفت
- حذف تزریق استایل موقع رندر، کار CPU روی ترد اصلی رو تو صفحههای سنگین ۲۰ تا ۳۵ درصد کم کرد
- روی یه ماشین میانرده حدود ۳۰٪ سریعتر شد و تعداد قواعد CSS تزریقشده موقع ناوبری از چند صد به صفر رسید
- vanilla-extract گزینهٔ دوم بود، ولی API پراکنده و جدایی فایل استایل از کامپوننت ردش کرد
- Oxlint چکهای سریع محلی رو میگیره و یه چکر type-aware پشتیبانی sx رو بین فایلها و wrapperها دنبال میکنه
