Linear StyleX माइग्रेशन: नेविगेशन करीब 30% तेज़

Linear ने styled-components क्यों छोड़ा

Linear को अपनी पुरानी स्टाइलिंग लाइब्रेरी से दो समस्याएं थीं: गति और नियंत्रण। रनटाइम CSS-in-JS ब्राउज़र से ऐप रेंडर होते समय स्टाइल बनवाता और CSS नियम इंजेक्ट करवाता है, और React 18 की कंकरंट रेंडरिंग में अपग्रेड के बाद, जब styled-components मेंटेनेंस मोड में गया, Linear ने यह लागत तेज़ी से महसूस की। Sanity के कोडी ओल्सन ने ऑप्टिमाइज़्ड फ़ोर्क जारी किया जिसने Linear के रेंडर समय 40 प्रतिशत घटाए, पर उन्होंने उसे आख़िरी उपाय कहा।

दूसरी समस्या एनकैप्सुलेशन थी। styled(Button) जैसे पैटर्न बाहर से कंपोनेंट की स्टाइल बदलना आसान बनाते थे, और रीडिज़ाइन के बाद Linear UI रिग्रेशन की लंबी पूंछ का पीछा करता मिला। इंजीनियर केनेथ स्कोवहस ने लिखा कि कोडबेस में कोडिंग एजेंट का योगदान बढ़ने पर साफ़ सीमाएं और ज़्यादा मायने रखती हैं।

Linear ने इसकी जगह क्या चुना और क्यों

टीम ने अगली लाइब्रेरी के लिए नियम तय किए: बिल्ड टाइम पर स्टाइल जनरेशन, दूरी से स्टाइलिंग जानबूझकर कठिन, फ़ाइलों में अनुमानित मर्जिंग, अच्छा React सपोर्ट और सक्रिय मेंटेनेंस। उसने ज़्यादातर React स्टाइलिंग विकल्प देखे। सबसे क़रीबी विकल्प vanilla-extract को उसके बंटे हुए API और अलग स्टाइल फ़ाइलों की वजह से ठुकरा दिया गया।

StyleX, Meta की ओपन सोर्स एटॉमिक CSS-in-JS लाइब्रेरी, जीती। वह स्टाइल जनरेशन को बिल्ड टाइम पर ले जाती है, छोटी कोलिज़न-मुक्त एटॉमिक क्लास बनाती है और वेब पर Facebook, Instagram और WhatsApp को चलाती है। वह स्टाइल कंपोनेंट के बगल में रखती है, उसका API छोटा है और वह टाइप-सेफ़ स्टाइलिंग कॉन्ट्रैक्ट देती है। क़ीमत कठोरता है: पैरेंट-निर्भर सेलेक्टर, ग्लोबल सेलेक्टर और रैपर के ज़रिए रीस्टाइलिंग कठिन हो जाते हैं, और Linear ने ग्लोबल सेलेक्टर के लिए CSS Modules को बचाव के रास्ते के रूप में रखा।

कोडमॉड, एजेंट और इंजीनियरों ने काम कैसे बांटा

काम एजेंटों से नहीं, डिटरमिनिस्टिक कोडमॉड से शुरू हुआ। स्कोवहस ने बड़े टेस्ट सूट पर styled-components-to-stylex-codemod बनाया, जिसे बनाने में एजेंटों ने मदद की; उसका ऑनलाइन प्लेग्राउंड है और InfoQ के मुताबिक वह अब 500 पुल रिक्वेस्ट और लगभग 100,000 पंक्तियों से आगे है।

टीम ने पहले StyleX वेरिएबल और साझा प्रिमिटिव तय किए, एजेंटों को कोडमॉड रनर, उदाहरण, वैलिडेशन स्क्रिप्ट और चेकलिस्ट के साथ संकीर्ण दायरे दिए, और साझा कंपोनेंट से पहले लीफ़ कंपोनेंट माइग्रेट किए। एजेंट अक्सर होवर स्टेट और थीमिंग जैसे विज़ुअल अंतर जांचने में अटक जाते थे, जिससे काफ़ी मैनुअल टेस्टिंग करनी पड़ी, जब तक प्रोजेक्ट के बीच में दो नए मॉडल, Fable और Sol, लॉन्च नहीं हुए।

"अगर हम आज यह माइग्रेशन शुरू करते, तो उसे सीधे पूरा करने के लिए Fable और Sol पर बहुत ज़्यादा भरोसा करते।" केनेथ स्कोवहस, Linear के इंजीनियर

Linear ने माइग्रेशन को महीनों तक कैसे चलाए रखा

जब तक दोनों सिस्टम साथ रहे, Linear ने प्रोडक्ट का काम जारी रखा और लोगों को माइग्रेट करते रखने के लिए टूलिंग इस्तेमाल की। डेवलपर टूलबार के काउंटर ने दिखाया कि हर पेज पर कितने styled-components हैं, हाइलाइटर ने दिखाया कि कौन से कंपोनेंट माइग्रेट हुए, और एक बॉट ने पुल रिक्वेस्ट में नए styled-components फ़्लैग किए। अब Oxlint नियम नई परिपाटियां लागू करते हैं।

प्रगति चार्ट वक्र दिखाता है। 8 मार्च 2026 वाले हफ़्ते में React स्टाइलिंग फ़ाइलों का 100% styled-components का था, 7 जून तक 49% और 6 अगस्त तक 0%। नई styled-components फ़ाइलें 19 अप्रैल वाले हफ़्ते के 22 के शिखर से गिरकर 31 मई के बाद ज़्यादातर हफ़्तों में शून्य रह गईं।

Linear StyleX माइग्रेशन ने क्या दिया

मापे गए नतीजे Linear के अपने हैं। माइग्रेशन में 1,000 से ज़्यादा पुल रिक्वेस्ट और लगभग पांच महीने लगे, और वह अगस्त 2026 की शुरुआत में पूरा हुआ। Linear भारी व्यू वाले पेज पर 20% से 35% कम मेन-थ्रेड काम, मिड-टियर मशीन पर करीब 30% तेज़ नेविगेशन, और पेज बदलने के दौरान शून्य CSS नियम इंजेक्ट होने की बात बताती है।

बड़े वेब ऐप वाली कंपनियों से यह क्या कहता है

सॉफ़्टवेयर कंपनी के लिए यहां काम है बड़े, सक्रिय कोडबेस में प्रोडक्ट का काम रोके बिना मुख्य फ़्रंट-एंड लाइब्रेरी बदलना। Linear के जवाब में तीन हिस्से थे: दोहराव वाले बड़े हिस्से के लिए डिटरमिनिस्टिक कोडमॉड, बाक़ी के लिए संकीर्ण दायरे वाले एजेंट, और विवेक तथा विज़ुअल जांच के लिए इंजीनियर। उसकी अपनी राय है कि आज एजेंट ज़्यादा काम उठा लेते।

बड़ा बाज़ार भी उसी दिशा में बढ़ रहा है। InfoQ बताता है कि Cursor Tailwind से StyleX पर चला गया, और Syntax पॉडकास्ट इस नतीजे पर पहुंचा कि अतिरिक्त कठोरता इंसानों के लिए ज़्यादा मज़ेदार नहीं, पर एजेंट उसमें फलते-फूलते हैं।

सवाल और जवाब

Linear को StyleX पर जाने में कितना समय लगा?

इसमें लगभग पांच महीने और 1,000 से ज़्यादा पुल रिक्वेस्ट लगीं। Linear ने अगस्त 2026 की शुरुआत में इसे पूरा किया, और स्कोवहस ने प्रोजेक्ट का वर्णन 26 अगस्त 2026 को किया।

Linear ने vanilla-extract की जगह StyleX क्यों चुना?

Vanilla-extract स्टैटिक एक्सट्रैक्शन और टाइप सेफ़्टी देता था, पर Linear को उसका API बंटा हुआ लगा और अलग स्टाइल फ़ाइलें पसंद नहीं आईं। StyleX स्टाइल कंपोनेंट के बगल में रखता है और उसका API छोटा है।

क्या AI एजेंटों ने माइग्रेशन किया?

आंशिक रूप से। डिटरमिनिस्टिक कोडमॉड ने ज़्यादातर दोहराव वाला काम किया, एजेंटों ने दायरे वाले काम संभाले, और इंजीनियरों ने विज़ुअल जांच संभाली, जब तक प्रोजेक्ट के बीच में Fable और Sol मॉडल नहीं आए।