حول هذه الأداة
تحوّل أداة من CSS إلى كائن أنماط JS كتلة CSS إلى كائن JavaScript مناسب لأنماط React المضمّنة أو مكتبات CSS-in-JS مثل styled-components وEmotion. تحلّل التصريحات محليًا في متصفحك — لا يُرفَع شيء — فترحيل ورقة أنماط إلى أنماط مضمّنة على بُعد لصقة ونسخة.
يُحوَّل كل اسم خاصية إلى camelCase: background-color تصبح backgroundColor، وz-index تصبح zIndex. تتبع بادئات المُورِّد قواعد React — البادئة -ms- تصبح ms بأحرف صغيرة (msFilter)، بينما -webkit- و-moz- و-o- تُكتَب بأحرف كبيرة كـ Webkit وMoz وO (WebkitBoxShadow). تُحفَظ الخصائص المخصّصة (--brand-color) حرفيًا كمفاتيح مقتبسة. تُصدَر القيم كسلاسل افتراضيًا، مع الحفاظ على الوحدات و!important؛ ويتيح مفتاح رقمي للأعداد الصحيحة والعشرية العارية أن تصبح أرقامًا غير مقتبسة بدلًا من ذلك. تُترَك المفاتيح التي هي مُعرّفات JavaScript صالحة دون اقتباس؛ وتُقتبَس البقية تلقائيًا.
عندما يكون المُدخَل كتلة تصريحات عادية (بلا محدِّدات) فإنه يُنتِج كائنًا مسطّحًا واحدًا، مثاليًا لخاصية style في React. وعندما يحوي المُدخَل قواعد كاملة بمحدِّدات، يُصدِر وضع styled/Emotion كائنًا متداخلًا مفتَّحًا بكل سلسلة محدِّد — صيغة الكائن التي تقبلها تلك المكتبات. تتحكّم في اسم ثابت المُخرَج، ويُكتَب كل ذلك كـ const styles = { ... }; جاهزًا للّصق.