ESLint, टैग किए गए टेम्प्लेट लिटरल्स, और बहुत कुछ का उपयोग करके टेलविंड सीएसएस को सरल कैसे करें!

वर्षों के विकास के बाद, हमने अपने सबसे महत्वपूर्ण उत्पादों में से एक - हमारे बहु-अनुप्रयोग डैशबोर्ड के यूजर इंटरफेस को मानकीकृत करने का निर्णय लिया।

हमने अपने ग्राहकों और आंतरिक उपयोगकर्ताओं (उपयोग में आसानी) के साथ-साथ अपनी उत्पाद टीम (आसान डिजाइन प्रक्रिया, निर्णय लेने और कोडिंग) के लिए ऐसा किया। हमें अपनी कंपनी की ब्रांडिंग के साथ और अधिक सुसंगत होने की भी आवश्यकता है।

इसके लिए हमने सैटेलाइट नामक एक आंतरिक डिजाइन प्रणाली का निर्माण किया।

सैटेलाइट विकसित करने में, हमने UI लाइब्रेरी के लिए अलग-अलग CSS समाधानों को देखा, सभी उनके पेशेवरों और विपक्षों के साथ: Saas , css मॉड्यूल , css-in-js ।

बूटस्ट्रैप के समान ढांचे पर विचार करने के बाद, हम सीएसएस ढांचे टेलविंड सीएसएस पर बस गए। क्यों?

• शुद्ध सीएसएस (जेएस रनटाइम नहीं) - प्रदर्शन के लिए अच्छा है।

  
  

• छोटी सीएसएस स्टाइलशीट फाइलें (शुद्ध करने के बाद) उत्पन्न करने के लिए - प्रदर्शन के लिए भी अच्छा है।

  
  

• नए घटकों को विकसित करते समय सीएसएस फ़ाइल और आपके जावास्क्रिप्ट कोड के बीच कोई स्विचिंग नहीं।

  
  

• उपयोगिता वर्गों के लिए अच्छे नाम खोजने की कोशिश में समय बर्बाद नहीं किया।

  
  

• UI संगतता को बढ़ावा देने में मदद करता है।

  
  

• आपको स्पेसिंग और रंगों के संग्रह को परिभाषित करने की अनुमति देता है जो डिज़ाइन टोकन ("प्रतिबंधित पैलेट") के लिए अच्छी तरह से मैप करते हैं।

  
  

हालांकि... टेलविंड में एक खामी थी: जटिल घटकों की पठनीयता। टेलविंड का सूप पचाने में मुश्किल हो सकता है जब आप इसके क्लासनाम के अभ्यस्त नहीं होते हैं।

हमारे मामले में, इसे और भी बदतर बना दिया गया था क्योंकि हमें अपने पुराने सीएसएस के साथ टकराव से बचने के लिए सीएसएस कक्षाओं ( stl- ) के एक प्रीफ़िक्स्ड संस्करण का उपयोग करना पड़ा, जिससे हमारे क्लासनाम स्ट्रिंग्स में और भी अधिक शोर और लंबाई जुड़ गई।

यह लेख दिखाता है कि हमने पठनीयता की समस्या को कैसे कम किया। शुरुआत के लिए, हमने अपने स्ट्रिंग्स की लंबाई को छोटा करने के लिए कई वेब डेवलपमेंट तकनीकों का उपयोग किया, जैसे टैग किए गए अक्षर और इंटरपोलेशन।

फिर हमने लिंटर टूल ESLint के साथ क्लासनाम के उपयोग को सरल बनाया, दो टूल के साथ एक बेहतर DX प्रदान किया:

• एक ESLint प्लगइन, क्योंकि उस समय कोई आधिकारिक ESLint-Tailwind प्लगइन नहीं था।

  
  

• टेलविंड के कई वर्गों के लिए इंटेलिजेंस प्रदान करके उपयोग को आसान बनाने के लिए एक विजुअल स्टूडियो कोड एक्सटेंशन। आधिकारिक ESLint VS एक्सटेंशन ने हमारे लिए काम नहीं किया क्योंकि यह एक कॉन्फ़िगरेशन फ़ाइल ( tailwind.config.js ) के प्रोजेक्ट में मौजूद होने की उम्मीद करता था, जबकि हमने उस समय एक प्रीबिल्ट संस्करण का उपयोग किया था। अन्य कार्यों में, हमें अपनी कॉन्फ़िगरेशन फ़ाइल के साथ काम करने के लिए वीएस की आवश्यकता है।

  
  

वह कमोबेश पृष्ठभूमि है। अब आइए कार्यान्वयन में आते हैं।

टेलविंड - क्लासनाम अच्छे हैं, लेकिन जटिल हो सकते हैं

क्लासनाम अच्छे हैं

टेलविंड जैसा एक उपयोगिता-प्रथम सीएसएस ढांचा पहले से मौजूद उपयोगिता वर्गों के एक बड़े सेट के साथ आता है जिसका उपयोग आप सीधे अपने एचटीएमएल और जावास्क्रिप्ट में कर सकते हैं। ये वर्ग पूरे कोड में एकरूपता को सक्षम करते हैं।

और वे पूरी तरह से विन्यास योग्य हैं: समान वर्गनामों के साथ, हम आसानी से अपने एप्लिकेशन को वेरिएंट के साथ ब्रांड कर सकते हैं। इसलिए, Tailwind CSS क्लासनाम का उपयोग करने से हमें रंगों, स्पेसिंग, फोंट का एक सुसंगत सेट बनाने में मदद मिली - अनिवार्य रूप से, सभी चीजें CSS - और एक आसान-से-कार्यान्वयन डिज़ाइन सिस्टम को रोल आउट किया।

लेकिन टेलविंड कक्षाएं जटिल हो सकती हैं

हम टेलविंड की कक्षाओं के अपने उपयोग को आसान बनाना चाहते थे।

इसके लिए हमने टैग किए गए टेम्प्लेट लिटरल, इंटरपोलेशन और शर्तों जैसी तकनीकों का इस्तेमाल किया।

हमने निम्नलिखित की तरह सीएसएस कक्षाओं की एक लंबी स्ट्रिंग के साथ शुरुआत की:

 const className = 'stl-inline-flex stl-items-center stl-justify-center stl-rounded-full stl-h-10 stl-w-10 stl-bg-blue-100';

लेकिन हमें जल्द ही एहसास हो गया कि इसे पढ़ना आसान नहीं है। इसके अतिरिक्त, इसमें अनावश्यक शोर होता है, जैसे कि उपसर्ग stl- , जिसका उपयोग अन्य वर्गों के साथ टकराव से बचने के लिए किया जाता है।

इसलिए हमने स्ट्रिंग से प्रीफ़िक्स को हटाने के लिए टैग किए गए टेम्प्लेट लिटरल्स की मदद ली। हमने एक stl टैग बनाया है:

 const className = stl 'inline-flex items-center justify-center rounded-full h-10 w-10 bq-blue-100';

अंत में, हम और अधिक पठनीयता चाहते थे। तो हमने जोड़ा:

• अधिक पठनीयता और सामान्य तत्वों के समूहन के लिए अलग लाइनें
• इनलाइन टैग किए गए टेम्प्लेट शाब्दिक के साथ इंटरपोलेशन
• अधिक शक्तिशाली और अनुकूली स्टाइल के लिए शर्तें

परिणाम (सीएसएस) कोड का एक सुंदर टुकड़ा है:

 const className = stl ' inline-flex items-center justify-center h-10 w-10 ${round && 'rounded-full'} ${iscool ? 'bg-blue-100' : 'bq-red-100'} ;

ESLint - मानव त्रुटि को सहजता से सुधारना

लालित्य एक चीज है। सही एक और है। कक्षाओं की गलत वर्तनी करना आसान है, खासकर जब टेलविंड में शुरू में सीखने के लिए कई कक्षाएं हों।

क्या गलत हो सकता है इसका एक उदाहरण यहां दिया गया है:

 cost className = stl 'felx space-between text-gray-200';

क्या आप त्रुटियों का पता लगा सकते हैं?

• अक्षरों को बदलना (फ्लेक्स के लिए फ्लेक्स)
• अपूर्ण या गैर-मौजूद वर्ग (अंतरिक्ष-बीच में)
• अमेरिकी बनाम ब्रिटिश वर्तनी (ग्रे)

बचाव के लिए ESLint - एक ESLint प्लगइन बनाना

हमें यह सत्यापित करने की आवश्यकता थी कि लोगों ने जिन वर्गों का उपयोग किया, वे सही थे। इसलिए हमने कोड को पार्स करने, उसका विश्लेषण करने और त्रुटियों की रिपोर्ट करने के लिए लिंटर टूल ESLint का उपयोग किया।

हमने कोड गुणवत्ता के लिए एक ESLint प्लगइन बनाया और उन वर्ग नामों पर त्रुटियों की रिपोर्ट करने के लिए जो मौजूद नहीं थे।

यहाँ केंद्रीय ESLint कोड है जो सत्यापन करता है:

ESLint एक अमूर्त सिंटैक्स ट्री (AST) का उपयोग करता है जो कोड की अलग-अलग पंक्तियों तक पहुँच प्रदान करता है।

एएसटी अनिवार्य रूप से कोड के तारों को नोड्स में परिवर्तित करता है, जिसे आप संग्रह और तत्वों के रूप में पार्स कर सकते हैं।

यहां बताया गया है कि कैसे ESLint कोड को पार्स करता है। संपूर्ण व्यंजक VariableDeclataion प्रकार का एक node है:

हम अभिव्यक्ति को दाईं ओर, TaggedTemplateExpression पार्स करना चाहते हैं।

जैसा कि आप देख सकते हैं, एक कॉलबैक है जो इस तरह की अभिव्यक्ति को संभालता है:

TaggedTemplateExpression कॉलबैक में, हम उस टेम्पलेट में सभी स्ट्रिंग्स एकत्र करते हैं। उदाहरण के लिए:

• TemplateElement

  
  

• द Literals

  
  

एक बार संग्रह हो जाने के बाद, एक और पंजीकृत कॉलबैक होता है जो एकत्रित वर्ग के नामों से गुजरता है और पुष्टि करता है कि वे मौजूद हैं या नहीं।

यह संग्रह के साथ ऐसा करता है, validClassNames :

यही बात है।

हम तुरंत जानते थे कि यह सत्यापन प्लगइन बनाना सही काम था, क्योंकि हमें वास्तव में हमारे सिस्टम में और साथ ही मौजूदा डैशबोर्ड कोडबेस में कुछ गलत वर्तनी मिली थी!

हमारे ESLint VisualStudio एक्सटेंशन के साथ सुझाव देना

हमने जो आखिरी टूल बनाया वह विजुअल स्टूडियो कोड में एक एक्सटेंशन था। हमारे प्लगइन के समान तर्क का उपयोग करते हुए, ESLint टाइपस्क्रिप्ट कक्षाओं को एक डेवलपर प्रकार के रूप में सुझाता है।

यह इंटेलिजेंस डेवलपर्स को अनुमान लगाने या सही कक्षाओं को खोजने और खोजने के लिए टेलविंड वेबसाइट पर जाने से रोकता है।

जैसा कि आप जीआईएफ में देख सकते हैं, यह न केवल वर्ग नामों का प्रस्ताव करता है, यह प्रत्येक सुझाव के लिए रंग या उपयोगी आइकन भी प्रदर्शित करता है।

Tailwind CSS और ESLint के साथ, हम अपने मानकों को लागू करने में DX में सुधार करके (Github पर आंतरिक रूप से सुलभ) लागू करने में सक्षम हैं।