انتقل إلى المحتوى
Numio

تحويل CSS إلى كائنات JavaScript — Numio

يحوّل CSS العادي إلى كائن JavaScript (CSS-in-JS) باستخدام postcss-js. تصبح أسماء الخصائص بصيغة camelCase، وتتحول المحددات وقواعد @ إلى مفاتيح، وتصبح الخاصية المكررة في القاعدة نفسها مصفوفة من القيم.

نقل الأنماط من ملف .css إلى كائن لـ styled-system أو JSS أو Emotion أو Radium دون إعادة كتابة كل خاصية.

CSS

JavaScript Object

متى تستخدمها

  • نقل الأنماط من ملف .css إلى كائن لـ styled-system أو JSS أو Emotion أو Radium دون إعادة كتابة كل خاصية.
  • تحويل مقتطف CSS منسوخ من أداة تصميم أو من DevTools في المتصفح إلى كائن لنمط مضمّن (inline style) أو لخاصية style.

طريقة الاستخدام

  1. الصق CSS في محرر CSS أو اسحب ملف .css وأفلته عليه.
  2. اقرأ النتيجة في لوحة JavaScript Object؛ تُسند إلى `const converted` وتُنسَّق باستخدام Prettier (دون فواصل منقوطة).
  3. انسخ الكائن، وأعد تسمية `converted`، واختر مفاتيح المحددات التي تحتاجها. لا توجد إعدادات لتغييرها في هذه الصفحة.

إدخال CSS

.card {
  display: flex;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card:hover .title {
  color: tomato;
}

@media (max-width: 600px) {
  .card { flex-direction: column; }
}

كائن JavaScript

const converted = {
  ".card": {
    display: "flex",
    backgroundColor: "#fff",
    WebkitBoxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
    margin: "0 auto",
  },
  ".card:hover .title": { color: "tomato" },
  "@media (max-width: 600px)": { ".card": { flexDirection: "column" } },
}

التفاصيل والقيود

يجري التحويل في Web Worker داخل متصفحك (تحليل PostCSS ثم objectify من postcss-js)؛ ولا يُرسَل CSS إلى أي خادم.

تحتفظ الخصائص ذات بادئات المتصفحات ببادئتها بصيغة PascalCase (مثلًا يصبح -webkit-box-shadow هو WebkitBoxShadow). وتحتفظ الخصائص المخصصة مثل --main-color باسمها الأصلي.

تبقى القيم سلاسل نصية، باستثناء الخصائص الرقمية بلا وحدات مثل z-index فتصبح أرقامًا. وتُحذف التعليقات.

المخرجات ليست جاهزة لـ React Native: تبقى المحددات وكتل :hover و@media مفاتيح متداخلة، ولا تُفكّ القيم المختصرة.

FAQ

ماذا يحدث إذا ظهر المحدد نفسه مرتين؟

تُدمج القواعد ذات المحدد نفسه في مفتاح واحد. وإذا عُرّفت الخاصية نفسها مرتين، مثل color: red !important; color: blue، فإن المفتاح يحمل مصفوفة: ["red !important", "blue"].

هل استعلامات @media والمحددات المتداخلة مدعومة؟

نعم. تصبح كتلة @media مفتاحًا مثل "@media (max-width: 600px)" وقيمته كائن يضم القواعد التي بداخلها. وتبقى محددات الأحفاد والمحددات الزائفة مفاتيح نصية كاملة.

لماذا يظهر لي الخطأ "Unclosed block"؟

يجب أن يكون الإدخال CSS صالحًا. يتوقف PostCSS عند الأخطاء النحوية مثل قوس إغلاق مفقود ويذكر السطر والعمود؛ ولا تُترجم هنا صياغة Sass أو Less (المتغيرات، التداخل).

المواصفات والمراجع