stailwc

Stailwc (مترجم سريع للذوق)

هذا هو جهاز نقل SWC التجريبي لجلب وحدات الماكرو لوقت التجميع إلى SWC (و NextJS) A-LA TWIN MACRO. الهدف من ذلك هو إعطاء نفس بيئة العمل والمرونة في وقت التجميع الكبير مع أداء أفضل بكثير من البدائل القائمة على بابل. يدعم كل من emotion styled-components ل CSS-in-JS ، والعديد من أنظمة البناء مثل SWC ، NextJs ، Vite ، إلخ.

مخطط التوافق

نحن نختبر حاليًا مقابل الإصدارات التالية. ومع ذلك ، فإن الإصدارات الأخرى خارج هذه قد تعمل.

Stailwc	NextJS	العاطفة	المكونات المصممة	SWC	فيت
أحدث	13.4.3	11.10.5	5.3.6	1.3.24	4.1.0

ميزة الرسم البياني

ميزة	العاطفة	المكونات المصممة
tw JSX	✅	✅
tw قالب علامة	✅	✅
بناء جملة مكون tw	✅	✅
بناء جملة امتداد مكون tw	✅	✅
الأنماط العالمية	✅	✅
اقتراحات المعلمة البرنامج المساعد	✅	✅

ابدء

 > npm add -D stailwc
> yarn add -D stailwc
> pnpm add -D stailwc

للبدء مع NextJs ، ضع ما يلي في next.config.js. للحصول على إطارات / أدوات أخرى ، يرجى الاطلاع على الأمثلة.

next.config.js

 const stailwc = require ( "stailwc/install" ) ;

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode : true ,
  swcMinify : true ,
  experimental : {
    swcPlugins : [
      stailwc ( {
        engine : "emotion" , // or "styled-components"
      } ) ,
    ] ,
  } ,
  compiler : {
    emotion : true ,
    // or
    styledComponents : true ,
  } ,
} ;

module . exports = nextConfig ;

اختياريًا ، يمكنك أيضًا تضمين المكون الإضافي لـ Tailwind Dalmalizer + Formin من خلال تضمين مكون <TailwindStyle /> . يرجى الاطلاع على الأمثلة ذات الصلة.

_document.tsx

 import { TailwindStyle } from "stailwc" ;

export default function App ( { Component , pageProps } ) {
  return (
    < >
      < TailwindStyle />
      < Component { ... pageProps } />
    </ >
  ) ;
}

الأنواع

هناك خطوة واحدة تحتاج إلى اتخاذها للحصول على أنواع تعمل. تحتاج إلى إضافة stailwc.d.ts إلى جذر مجلد المصدر الخاص بك.

الاستخدام

علامة tw

يمكنك التفاعل مع StailWC بطريقتين. الأول هو من خلال سمة tw JSW ، والثاني هو عبر علامة tw .

 import { useState } from "react" ;

export const ColorButton = ( ) => {
  const [ clicked , setClicked ] = useState ( 0 ) ;
  return (
    < button
      tw = "p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3"
      css = { clicked % 2 == 0 ? tw `border-green` : tw `border-blue` }
      onClick = { ( ) => setClicked ( clicked + 1 ) }
    >
      Clicked { clicked } times
    </ button >
  ) ;
} ;

بناء الجملة مكون

يمكنك أيضًا إنشاء مكونات مصممة باستخدام علامة tw Template. سيؤدي ذلك تلقائيًا إلى إنشاء بناء الجملة الصحيح لكل من emotion والمؤسسات styled-components .

 export const StyledButton = tw . button `p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3` ;
export const ShadowButton = tw ( StyledButton ) `shadow-lg` ; 

أمثلة

هناك أمثلة متاحة لكل من emotion والمؤسسات styled-components . يمكنك تشغيلها عن طريق استنساخ الريبو وتشغيل yarn تليها yarn dev في دليل المثال. ستحتاج إلى stailwc أولاً.