تحويل كائنات الأنماط إلى سلاسل قالبية — Numio

يعيد كتابة أنماط الكائنات في css({...}) وstyled.x({...}) كقوالب حرفية موسومة (tagged template literals) لـ styled-components أو Emotion أو Linaria. تصبح مفاتيح camelCase بصيغة kebab-case، وتُضاف px إلى الأرقام إلا في الخصائص بلا وحدات، وتصبح تعبيرات JS استيفاءات ${}.

ترحيل أنماط الكائنات من Emotion أو Glamor إلى styled-components أو Linaria، اللتين تتوقعان CSS في قوالب حرفية.

Object Styles

Template Literal

متى تستخدمها

ترحيل أنماط الكائنات من Emotion أو Glamor إلى styled-components أو Linaria، اللتين تتوقعان CSS في قوالب حرفية.
تحويل تعريف styled(Component)({...}) إلى صياغة القوالب لقراءته وتحريره كـ CSS عادي.

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

الصق شيفرة JavaScript أو TypeScript (يُسمح بـ JSX/TSX) تستدعي css({...}) أو styled.tag({...}) أو styled(Component)({...}) في محرر Object Styles.
في Settings، أبقِ "Transpile css tags" و"Transpile styled tags" مفعّلين، أو أوقف أحدهما لترك تلك الاستدعاءات دون تغيير؛ ويظهر شريط تحذير عند إيقاف أحدهما.
انسخ لوحة Template Literal. تُحفظ الشيفرة خارج الاستدعاءات المحوّلة، لكن Prettier يعيد تنسيقها.

أنماط الكائنات (JavaScript أو TypeScript)

const Button = styled.button({
  padding: 8,
  fontSize: '14px',
  backgroundColor: theme.primary,
  '&:hover': {
    opacity: 0.8,
  },
})

const card = css({
  display: 'flex',
  marginTop: 16,
})

قالب حرفي موسوم

const Button = styled.button`
  padding: 8px;
  font-size: 14px;
  background-color: ${theme.primary};

  &:hover {
    opacity: 0.8;
  }
`
const card = css`
  display: flex;
  margin-top: 16px;
`

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

يجري التحويل في متصفحك: يطبّق Web Worker الإضافة babel-plugin-object-styles-to-template عبر Babel standalone (مع تحليل صياغة TypeScript عند فشل JavaScript العادي)، ويُنسَّق الناتج باستخدام Prettier دون فواصل منقوطة.

لا تُحوَّل إلا الاستدعاءات التي تأخذ وسيطًا واحدًا هو كائن بسيط. أما styled("div")(obj, props => ...) مع دالة أو عدة وسائط، ومصفوفات css([...])، فتُترك كما هي.

تحتفظ الخصائص بلا وحدات مثل zIndex وlineHeight وopacity بأرقام مجردة؛ وتُضاف px إلى الأرقام الأخرى. ولا تُفكّ قيم المصفوفات بل تصبح استيفاءً مثل ${[0, 4]}.

يوحّد Prettier أيضًا الشيفرة التي لم تُمس، فمثلًا تتحول علامات الاقتباس المفردة إلى مزدوجة.

FAQ

ما أسماء الاستدعاءات التي يتعرّف عليها؟

تحوّل الإضافة css(...) واستدعاءات styled: styled.button(...) وstyled("div")(...) وstyled(Link)(...). أما الدوال الأخرى ذات الوسائط الكائنية، مثل someFn({ color: 'red' })، فلا تتغير.

كيف تُعالَج المتغيرات وقيم السمة (theme)؟

تبقى أي قيمة غير حرفية، مثل theme.primary أو colors.white، تعبير JavaScript داخل ${...} في القالب، فتظل تُحسب وقت التشغيل.

هل المحددات المتداخلة مثل &:hover مدعومة؟

نعم. يصبح الكائن المتداخل تحت مفتاح مثل '&:hover' كتلة متداخلة في القالب، يفصلها سطر فارغ عن تصريحات العنصر الأب.

هل يعمل مع TypeScript؟

نعم. إذا تعذّر تحليل الشيفرة كـ JavaScript، يُعاد تحليلها بصياغة TypeScript في Babel. وتُحفظ الأنواع: تبقى الواجهات (interfaces)، ويصبح styled.button<Props>({...}) هو styled.button<Props>`...`.

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

babel-plugin-object-styles-to-template on GitHub