इस टूल के बारे में
CSS से JS Style Object टूल CSS के एक block को React inline styles या styled-components और Emotion जैसी CSS-in-JS libraries के लिए उपयुक्त एक JavaScript object में बदल देता है। यह declarations को आपके ब्राउज़र में स्थानीय रूप से पार्स करता है — कुछ भी अपलोड नहीं होता — इसलिए एक stylesheet को inline styles में migrate करना एक paste-and-copy दूर है।
प्रत्येक property नाम camelCased होता है: background-color बन जाता है backgroundColor, z-index बन जाता है zIndex। Vendor prefixes React के नियमों का पालन करते हैं — एक leading -ms- ms में lowercase होता है (msFilter), जबकि -webkit-, -moz-, और -o- Webkit, Moz, और O में capitalize होते हैं (WebkitBoxShadow)। Custom properties (--brand-color) को quoted keys के रूप में verbatim रखा जाता है। मान डिफ़ॉल्ट रूप से strings के रूप में निकाले जाते हैं, units और !important संरक्षित करते हुए; एक numeric toggle bare integers और decimals को इसके बजाय unquoted numbers बनने देता है। जो keys मान्य JavaScript identifiers हैं उन्हें unquoted छोड़ा जाता है; बाकी को स्वतः quote किया जाता है।
जब input एक plain declaration block (कोई selectors नहीं) होता है तो यह एक flat object बनाता है, एक React style prop के लिए एकदम सही। जब input में selectors वाले पूर्ण rules होते हैं, तो styled/Emotion mode प्रत्येक selector string द्वारा keyed एक nested object निकालता है — वह object syntax जिसे वे libraries स्वीकार करती हैं। आप आउटपुट const नाम नियंत्रित करते हैं, और पूरी चीज़ const styles = { ... }; के रूप में लिखी जाती है, पेस्ट करने के लिए तैयार।