GitHub עברה את כל הממשק ל-CSS Modules והסירה את styled-components

מהנדסים ב-GitHub תיארו כיצד החברה החליפה את CSS-in-JS ב-CSS Modules בכל הממשק שלה. הפוסט פורסם בבלוג של GitHub ב-25 בספטמבר 2026, וכתבו אותו מהנדסי מערכת העיצוב Primer, ג'וש בלאק ומארי לוקה. הם מדווחים על שיפור מדיד בזמני הרינדור.

למה מערכת הסגנונות הפכה לצוואר בקבוק

הבעיות החלו ב-2023, כאשר מספר הרכיבים בחלק מהדפים תפח. טעינת הדף הראשונית התארכה מפני שהסגנונות אותחלו בצד הלקוח, ביצועי הרינדור בצד השרת ירדו, ועדכוני סגנונות הפכו לקשים לשליטה ככל שמספר הרכיבים גדל. צוות Primer חיפש פתרון שימנע גם את העלויות בצד הלקוח וגם בצד השרת, ושאותו אפשר יהיה להשיק בלי לשבור את GitHub.

CSS Modules ומעבר הדרגתי

הצוות בחר ב-CSS Modules. בפורמט הזה כותבים את הסגנונות בקובץ CSS לצד קוד ה-JavaScript של הרכיב, שמות המחלקות מקומיים כברירת מחדל, ואין צורך ב-runtime בצד הלקוח או השרת: הסגנונות נאספים לגיליונות שנשלחים כחלק מה-HTML של הדף. כל רכיב של Primer עבר מאחורי דגל תכונה שהחליף בין הסגנונות הישנים לחדשים, בדיקות רגרסיה ויזואליות אישרו שהצילומים זהים, וההשקה עברה מהצוות לעובדי GitHub ובסוף לכל המשתמשים. עד דצמבר 2024 הושלם המעבר: 55% פחות זמן לרנדור הדף בצד השרת ו-25% פחות זמן לאתחול רכיבים בדף.

סיום השימוש ב-sx prop

החלק הקשה יותר היה ה-sx prop, הדרך המקובלת להתאים אישית רכיבים של Primer. הוא הציע תמיכה טובה ב-TypeScript וקוד סמוך לרכיב, אך גבה מחיר ריצה גבוה והתקשה להתאים את עצמו ככל שמספר הרכיבים בדף גדל. GitHub בנתה תחילה חבילת תאימות, @primer/styled-react, כדי שקוד קיים ימשיך לייבא רכיבים בזמן שהמימושים עברו ל-@primer/react. העבודה החלה באפריל 2025 עם כ-7,760 sx props להעברה. שמונה מהנדסים בהרכב מתחלף העבירו 6,419 props במשך שישה חודשים, עם שיפור של 1% עד 22% בזמן הרינדור בצד השרת בחלק מהדפים. כשהעבודה התחדשה באפריל 2026, שני מהנדסים עם סוכני קוד של Copilot השלימו את 895 ה-props הנותרים והגיעו לאפס בתוך שלושה שבועות.

שבעה ערכות נושא והניקוי האחרון

GitHub תומכת בשבע ערכות נושא, שלכל אחת מהן גרסה בניגודיות גבוהה, וכולן הופעלו דרך styled-components. משתני ערכות הנושא כבר הוגדרו ב-CSS, כך שהעבודה שנותרה הייתה הסרת כלי העזר ב-JavaScript. כעבור חודשיים החבילות נעלמו. מאז יוני 2026 GitHub פועל כולו על CSS Modules, ו-sx, styled-components ו-styled-system הוסרו מהאפליקציה הראשית.