Style Dictionary: टोकन का रूपांतरण और निर्माण

Style Dictionary (अमेज़न द्वारा बनाया गया) एक निर्माण उपकरण है, जो जेएसओएन प्रारूप में डिज़ाइन टोकन परिभाषाएँ लेता है और उन्हें किसी भी लक्षित प्रारूप में आउटपुट करता है: CSS कस्टम प्रॉपर्टी, JavaScript ES मॉड्यूल, सैस चर, iOS स्विफ्ट स्थिरांक, एंड्रॉइड XML संसाधन और आपके द्वारा परिभाषित कोई भी कस्टम प्रारूप। सत्य का एकमात्र स्रोत, अनेक आउटपुट।

npm install --save-dev style-dictionary से इंस्टॉल करें। npx style-dictionary init से प्रोजेक्ट की संरचना तैयार करें; यह एक config.json (या config.js) और एक tokens/ निर्देशिका बनाता है। कॉन्फ़िगरेशन Style Dictionary को बताता है कि टोकन फ़ाइलें कहाँ ढूँढ़नी हैं और आउटपुट कहाँ लिखने हैं।

Style Dictionary एक नेस्टेड जेएसओएन संरचना का उपयोग करता है, जिसमें अंतिम नोड में value प्रॉपर्टी होती है। उदाहरण के लिए: { "color": { "primary": { "500": { "value": "#3b82f6" } } } }। मान तक पहुँचने वाला पथ (रंग, प्राथमिक, 500) रूपांतरण के बाद टोकन नाम बन जाता है, जिसे आम तौर पर color-primary-500 या --color-primary-500 के रूप में लिखा जाता है।

npx style-dictionary build --config config.json चलाएँ (या यदि package.json स्क्रिप्ट में कॉन्फ़िगर किया गया हो, तो style-dictionary build चलाएँ)। Style Dictionary कॉन्फ़िगर किए गए स्रोत से सभी टोकन फ़ाइलें पढ़ता है, रूपांतरण लागू करता है और कॉन्फ़िगर किए गए गंतव्यों पर आउटपुट लिखता है। टोकन प्रारूप की त्रुटियाँ फ़ाइल नाम और पथ के साथ दिखाई जाती हैं।

config.json प्लेटफ़ॉर्म परिभाषित करता है: css (कस्टम प्रॉपर्टी वाली CSS फ़ाइल आउटपुट करता है), js (JS ऑब्जेक्ट आउटपुट करता है), scss (सैस चर आउटपुट करता है)। प्रत्येक प्लेटफ़ॉर्म आउटपुट निर्देशिका, फ़ाइल नाम, प्रारूप (साँचा) और लागू किए जाने वाले रूपांतरण (नाम और मान को संसाधित करने वाले फ़ंक्शन) निर्दिष्ट करता है।

Style Dictionary में अंतर्निहित रूपांतरण शामिल हैं: name/cti/kebab नेस्टेड पथ को color-primary-500 में बदलता है, name/cti/camel colorPrimary500 बनाता है, size/rem पिक्सेल मानों को rem में बदलता है और color/hex रंगों को hex में सामान्यीकृत करता है। रूपांतरण संयोज्य होते हैं और क्रम से लागू किए जाते हैं।

आप StyleDictionary.registerTransform() से कस्टम रूपांतरण पंजीकृत कर सकते हैं। उदाहरण के लिए, ऐसा रूपांतरण जो पिक्सेल मानों को iOS पॉइंट में बदलता है, या ऐसा रूपांतरण जो सभी टोकन नामों में कंपनी-विशिष्ट उपसर्ग जोड़ता है। कस्टम रूपांतरण आपको आउटपुट से पहले मानों को संसाधित करने के तरीके पर पूरा नियंत्रण देते हैं।

कस्टम प्रारूप आउटपुट फ़ाइल का साँचा परिभाषित करते हैं। StyleDictionary.registerFormat() रूपांतरित टोकन का शब्दकोश प्राप्त करता है और एक स्ट्रिंग लौटाता है — फ़ाइल की सामग्री। आप टोकन को TypeScript प्रकारों, रिएक्ट थीम ऑब्जेक्ट, टेलविंड कॉन्फ़िगरेशन विस्तार या अपने तकनीकी स्टैक के लिए आवश्यक किसी अन्य प्रारूप में आउटपुट कर सकते हैं।

निर्माण के बाद, अपनी वैश्विक स्टाइलशीट में CSS आउटपुट इंपोर्ट करें: @import './tokens/tokens.css'। घटकों या टेलविंड कॉन्फ़िगरेशन में JS आउटपुट इंपोर्ट करें: import tokens from './tokens/tokens.js'। CSS आपको रनटाइम थीमिंग के लिए कस्टम प्रॉपर्टी देता है; JS टेलविंड और JavaScript तर्क के लिए प्रकारयुक्त स्थिरांक देता है।

Style Dictionary घुंघराले कोष्ठकों का उपयोग करके टोकन संदर्भों का समर्थन करता है: { "value": "{color.primary.500}" }। इससे अर्थगत टोकन उपनाम बनते हैं — अर्थगत टोकन किसी प्राथमिक टोकन का संदर्भ लेता है। निर्माण के समय Style Dictionary संदर्भों को हल करके अंतिम मान आउटपुट करता है (या आपके प्रारूप के अनुसार CSS चर संदर्भ आउटपुट करता है)।

Style Dictionary को prebuild एनपीएम स्क्रिप्ट के रूप में चलाएँ, ताकि ऐप्लिकेशन के निर्माण से पहले टोकन हमेशा दोबारा बनाए जाएँ। "prebuild": "style-dictionary build" को package.json में जोड़ें। इससे यह सुनिश्चित होता है कि टोकन जेएसओएन फ़ाइलों में किया गया कोई भी बदलाव रिएक्ट निर्माण द्वारा संसाधित किए जाने से पहले CSS और JS आउटपुट में दिखाई दे।

Style Dictionary टोकन जेएसओएन को किसी भी आउटपुट प्रारूप में बदलता है: CSS वैरिएबल, JS मॉड्यूल, सैस, iOS और एंड्रॉइड। टोकन जेएसओएन में value वाले अंतिम नोड के साथ नेस्टेड ऑब्जेक्ट होते हैं। रूपांतरण नामों और मानों को संसाधित करते हैं (camelCase, px-to-rem); प्रारूप आउटपुट का साँचा परिभाषित करते हैं। टोकन संदर्भ ({color.primary.500}) अर्थगत उपनाम बनाने में सक्षम बनाते हैं। prebuild स्क्रिप्ट से स्वचालन करें, ताकि रिएक्ट निर्माण से पहले टोकन हमेशा नवीनतम रहें।