GitHub-ը հրաժարվեց CSS-in-JS-ից և անցավ CSS Modules-ի

GitHub-ի ինժեներները պատմել են, թե ինչպես ընկերությունն ինտերֆեյսում CSS-in-JS-ը փոխարինեց CSS Modules-ով։ Գրառումը հրապարակվել է 2026 թվականի սեպտեմբերի 25-ին, հեղինակներն են Primer դիզայն-համակարգի ինժեներներ Josh Black-ը և Marie Lucca-ն, ովքեր ներկայացնում են ռենդերի չափելի արագացում։

Ինչու ոճերի համակարգը դարձավ խցանում

Խնդիրները սկսվել են 2023 թվականին, երբ որոշ էջերում կոմպոնենտների թիվը կտրուկ աճեց։ Էջի առաջին բեռնումը դանդաղեց, սերվերային ռենդերի արագությունը նվազեց, իսկ ոճերի թարմացումները դժվարացավ վերահսկել։ Primer-ի թիմին պետք էր լուծում, որը կխուսափեր երկու ծախսերից էլ ու չէր խախտի GitHub-ի աշխատանքը։

CSS Modules և աստիճանական անցում

Թիմը կանգ առավ CSS Modules-ի վրա։ Այս ձևաչափում ոճերը գրվում են կոմպոնենտի JavaScript կոդի կողքի CSS ֆայլում, դասերի անունները լոկալ են, և runtime պետք չէ. ոճերը հավաքվում են ոճաթերթերում, որոնք ուղարկվում են էջի HTML-ի հետ։ Կոմպոնենտները տեղափոխվեցին feature flag-ի հետևում, որը փոխարկում էր հին ու նոր ոճերը, վիզուալ թեստերը հաստատում էին նկարների նույնականությունը, իսկ տարածումն աստիճանաբար հասավ բոլոր օգտատերերին։ Անցումն ավարտված էր 2024 թվականի դեկտեմբերին. էջի սերվերային ռենդերը 55%-ով պակաս ժամանակ է պահանջում, իսկ կոմպոնենտների սկզբնավորումը՝ 25%-ով պակաս։

sx պրոպից հրաժարումը

Ամենաբարդ մասը sx պրոպն էր՝ Primer-ի կոմպոնենտները հարմարեցնելու սովորական եղանակը։ Այն լավ TypeScript աջակցություն էր տալիս, բայց ուներ runtime-ի բարձր արժեք և վատ էր մասշտաբավորվում։ GitHub-ը նախ ստեղծեց @primer/styled-react համատեղելիության փաթեթը, որպեսզի գործող կոդը շարունակեր ներմուծել կոմպոնենտները, մինչ իրականացումները տեղափոխվում էին @primer/react։ Աշխատանքը սկսվեց 2025 թվականի ապրիլին. տեղափոխելու ենթակա էր մոտ 7760 sx պրոպ։ Ութ ինժեների հերթափոխը վեց ամսում տեղափոխեց 6419 պրոպ, իսկ որոշ էջերում սերվերային ռենդերի շահույթը 1%-ից հասավ 22%-ի։ 2026 թվականի ապրիլին երկու ինժեներ Copilot-ի գործակալների հետ մնացած 895 պրոպը երեք շաբաթում հասցրին զրոյի։

Յոթ թեմա և վերջնական մաքրում

GitHub-ը աջակցում է յոթ թեմայի, որոնցից յուրաքանչյուրն ունի բարձր կոնտրաստի տարբերակ, և բոլորն աշխատում էին styled-components-ով։ Թեմայի փոփոխականներն արդեն սահմանված էին CSS-ում, մնում էր հեռացնել JavaScript-ի գործիքները, և երկու ամիս անց կախվածությունները չքացան։ 2026 թվականի հունիսից GitHub-ը աշխատում է 100% CSS Modules-ով, իսկ sx-ը, styled-components-ն ու styled-system-ը հանվել են հիմնական հավելվածից։