‏dx-styles؛ چرا نگهدارندهٔ Linaria بعد از شش سال یه کتابخانهٔ تازه ساخت

نویسنده اول تصویر کلی رو می‌کشه: CSS-in-JS رانتایمی داره جمع می‌شه — styled-components از اوایل ۲۰۲۵ فقط نگهداری می‌شه و Server Componentها مدل رانتایمی رو عملاً به بن‌بست ساختاری رسوندن. ولی می‌گه اگه چیزی که می‌خوای استایل تایپ‌دار و توکن و وریانت کنار کامپوننته، شاخهٔ zero-runtime همچنان جای درستیه؛ همون شاخه‌ای که خودش شش سال توش بوده به‌عنوان نگهدارندهٔ Linaria و نویسندهٔ wyw-in-js.

مشکل اول از نگاه او: styled(Component) قیمتش اشتباه محاسبه شده. ترکیب یه کامپوننت سفارشی «رایگان» به نظر میاد، ولی در عمل کل گراف وابستگی اون کامپوننت — آیکون‌ها، هوک‌ها، نصف utilهات — کشیده می‌شه داخل ارزیابی زمان بیلد. به گفتهٔ نویسنده این رایج‌ترین دلیلیه که ارزیابی استاتیک شکست می‌خوره و بیلد مجبور می‌شه ماژول رو واقعاً اجرا کنه.

مشکل دوم ترکیب‌پذیریه: Linaria فقط css و cx بهت می‌ده و بقیه‌ش با خودت. می‌گه سال‌ها درخواست «فرگمنت استایل» داشته و هر بار مقاومت کرده، چون تو یه دیزاین‌سیستم واقعی وریانت و اسلات و تم ترفند پیشرفته نیستن، کف کارن و باید شهروند درجه‌یک خود کتابخانه باشن، نه قراردادی که هر تیم از نو اختراعش کنه.

درس سومی هم از Pigment CSS گرفته که MUI روی wyw-in-js ساخت و بعد متوقفش کرد: سرعت بیلد. می‌گه تو پروژهٔ نوپا سرعت بیلد یه عادته که زود شکل می‌گیره، ولی وقتی یه کدبیس موجود رو مهاجرت می‌دی و مرحلهٔ استایل ده برابر بقیهٔ بیلد وقت می‌بره، ماجرا تموم‌شده‌ست — و ده برابر سقف نیست؛ بیلدهای استایلی دیده که ده‌ها دقیقه و ده‌ها گیگ رم می‌بلعن.

خودِ dx-styles چیه؟ توکن‌کانترکت به‌جای قرارداد تم، رِسیپی و اسلات‌رِسیپی با وریانت‌های تایپ‌دار، و RTL اختیاری در زمان کامپایل:

const button = recipe({
  base: { display: "inline-flex", borderRadius: "999px" },
  variants: {
    appearance: {
      primary: { backgroundColor: tokens.color.accent, color: tokens.color.accentFg },
      ghost: { backgroundColor: "transparent", color: tokens.color.accent },
    },
  },
  defaultVariants: { appearance: "primary" },
});

این کد موقع بیلد تبدیل می‌شه به یه فایل CSS استاتیک به‌علاوهٔ رشته‌های ساده کلاس‌نیم — کلاس‌های معنایی و قطعی که می‌شه ازشون اسنپ‌شات گرفت و روشون کش کرد. نه رانتایم استایلی هست نه پروایدری، و همون کامپوننت‌ها بدون تغییر داخل React Server Components هم کار می‌کنن.

بخشی که خودش می‌گه انتظارش رو نداشت: dx-styles به‌شکل مجموعه‌ای از پروسسورهای wyw-in-js پیاده شده و پروسسورها فقط به استایل محدود نیستن. تو یه محصول تجاری، همون مرحلهٔ بیلد که CSS رو استخراج می‌کنه بخشی از منطق اپلیکیشن رو هم استاتیک اجرا و نتیجه‌ش رو inline می‌کنه؛ یعنی یه مکانیزم ماکرو که مجانی همراه پایپ‌لاین استایل میاد.

دربارهٔ پایداری هم صادقه: پروژه MIT می‌مونه و ایشوترکر روی صفر ایشو بازه، ولی توضیح می‌ده که از اکتبر گذشته کار تریاژِ خسته‌کننده — بازتولید گزارش‌ها و bisect رگرسیون‌ها — رو ایجنت‌ها انجام می‌دن و وقت نگهدارنده صرف خود مهندسی می‌شه؛ فیکس‌ها رو هنوز بیشتر دستی می‌نویسه. برای wyw-in-js@3 هم نقشهٔ راه عمومی هست ولی تاریخی اعلام نکرده.

نکات کلیدی:

• نویسنده نگهدارندهٔ Linaria و سازندهٔ wyw-in-js، موتور پشت Linaria و Pigment CSS ـه
• دو ایراد ریشه‌ای Linaria از نگاه او: هزینهٔ پنهان styled(Component) و نبود ترکیب‌پذیری درجه‌یک
• dx-styles: توکن‌کانترکت، رِسیپی و اسلات‌رِسیپی تایپ‌دار، CSS استاتیک، بدون رانتایم و سازگار با RSC
• کلاس‌نیم‌های قطعی و معنایی که می‌شه اسنپ‌شات و کش کرد؛ RTL اختیاری در زمان کامپایل
• پروسسورهای wyw-in-js فقط استایل نیستن و می‌شه باهاشون منطق اپ رو هم موقع بیلد اجرا و inline کرد