css components

@phntms/css-components

مكتبة مكونات CSS بسيطة وخفيفة الوزن وقابلة للتخصيص تتيح لك لف أنماط CSS الخاصة بك في بنية تشبه المكون. مستوحاة من مكتبات CSS-in-JS مثل المكونات المصممة والغرز.

مقدمة

في جوهرها ، تعتبر المكونات CSS عبارة عن غلاف بسيط حول CSS القياسية. يسمح لك بكتابة CSS الخاصة بك كيف ترغب في إنشاءها في مكون جاهز لاستخدامه في React.

فيما يلي مثال أدنى لمكون زر مع متغير اختياري:

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

export const Button = styled ( "button" , {
  css : css . root ,
  variants : {
    primary : {
      true : css . primary ,
    } ,
  } ,
} ) ;

هذا يخرج مكونًا نظيفًا لطيفًا يمكن استخدامه في React:

 import { Button } from "./Button" ;

export const App = ( ) => (
  < div >
    < Button > Default </ Button >
    < Button primary > Primary </ Button >
  </ div >
) ; 

تثبيت

تثبيت هذه الحزمة مع npm .

npm i @phntms/css-components

الاستخدام

فيما يلي مثال كامل لمكون زر مع متغير اختياري يسمى primary :

مكونات/زر/أنماط. module.css

. root {
  background-color : grey;
  border-radius : 4 px ;
}

. primary {
  background-color : black;
}

مكونات/زر/أنماط

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

export const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    primary : {
      true : css . primary ,
    } ,
  } ,
} ) ;

مكونات/زر/index.tsx

 import { StyledButton } from "./styles.ts" ;

interface Props {
  title : string ;
  onClick : ( ) => void ;
  primary ?: boolean ;
}

export const Button = ( { title , onClick , primary } : Props ) => (
  < StyledButton onClick = { onClick } primary = { primary } >
    { title }
  </ StyledButton >
) ; 

كائن تكوين المتغيرات

كائن تكوين المتغيرات هو كائن بسيط يسمح لك بتحديد المتغيرات التي يدعمها المكون. كل متغير هو مفتاح في الكائن والقيمة هي كائن يحدد القيم المحتملة (فئات CSS) لهذا البديل.

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    big : {
      // Boolean values are supported
      true : css . big ,
    } ,
    color : {
      // String values are supported
      primary : css . primary ,
      secondary : css . secondary ,
    } ,
    size : {
      // Number values are supported
      1 : css . size1 ,
      2 : css . size2 ,
    } ,
  } ,
} ) ; 

المتغيرات الافتراضية

يمكنك استخدام ميزة defaultVariants لتعيين متغير افتراضيًا:

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    big : {
      // Boolean values are supported
      true : css . big ,
    } ,
  } ,
  defaultVariants : {
    big : true ,
  } ,
} ) ; 

المتغيرات المركبة

بالنسبة إلى إعدادات المتغيرات الأكثر تعقيدًا ، يمكنك استخدام وسيطة المتغيرات المركبة لتحديد الأنماط التي يجب تطبيقها عند استخدام متغيرات متعددة.

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    border : {
      true : css . bordered ,
    } ,
    color : {
      primary : css . primary ,
      secondary : css . secondary ,
    } ,
  } ,
  compoundVariants : [
    {
      border : true ,
      color : "primary" ,
      css : css . blueBorder ,
    } ,
    {
      border : true ,
      color : "secondary" ,
      css : css . greyBorder ,
    } ,
  ] ,
} ) ; 

آخر

مجموعة من الفصول

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

 import { styled } from "@phntms/css-components" ;
import shared from "../sharedstyles.module.css" ;
import css from "./styles.module.css" ;

const Link = styled ( "a" , {
  css : [ shared . link , shared . fontNormal , css . root ] ,
  variants : {
    big : {
      true : [ css . big , shared . fontBold ] ,
    } ,
  } ,
} ) ;

مكونات أخرى

يمكنك أيضًا تصميم مكونات أخرى من النظم الإيكولوجية الأخرى. طالما أن المكون لديه دعامة className ، يجب أن ينتشر التصميم.

مثال على توسيع مكون Link Next.js القياسي:

 import { styled } from "@phntms/css-components" ;
import NextLink from "next/link" ;
import css from "./styles.module.css" ;

const Link = styled ( NextLink , {
  css : css . link ,
  variants : {
    big : {
      true : css . big ,
    } ,
  } ,
} ) ;

تمرير

بشكل افتراضي ، لا تنتهي القيم المتغيرة بالانتشار إلى العنصر الذي يمتد إليه ويستخدم حصريًا لتصميم المكون الحالي. هذا هو منع أخطاء رد الفعل المحددة من حدوثها فيما يتعلق بـ DOM. إذا كنت ترغب بالفعل في تمرير قيمة متغيرة للعنصر الذي تقوم بتوسيعه ، فيمكنك استخدام خيار passthrough .

في المثال التالي ، فإن readOnly هي سمة HTML جوهرية نريد أن نرغب في تصميمها ، ولكن أيضًا نستمر في الانتقال إلى عنصر DOM.

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

const Input = styled ( "input" , {
  css : css . root ,
  variants : {
    readOnly : {
      true : css . disabledStyle ,
    } ,
  } ,
  passthrough : [ "readOnly" ] ,
} ) ;

اكتب مساعد

لقد قمنا بتضمين مساعد يسمح لك بالوصول إلى أنواع المتغيرات التي حددتها.

 import { VariantProps } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

const Button = styled ( "button" , {
  css : css . baseButton ,
  variants : {
    primary : { true : css . primary } ,
  } ,
} ) ;

type ButtonVariants = VariantProps < typeof Button > ;
type PrimaryType = ButtonVariants [ "primary" ] ; 

أداة CLI (تجريبية)

لقد قمنا بتضمين أداة CLI تتيح لك إنشاء مكونات من ملفات CSS و SCSS التي تؤكد اتفاقية تسمية محددة. هذا تجريبي للغاية ويخضع للتغيير.

النظر في ملف CSS هذا:

 /* styles.module.css */
nav . topBar {
  background-color : # aaa ;
  padding : 32 px ;
}

nav . topBar_fixed_true {
  position : fixed;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
}

أو باستخدام SCSS (CSS Sassy):

 // styles.module.scss
nav .topBar {
  background-color : #aaa ;
  padding : 32 px ;

  & _fixed_true {
    position : fixed ;
    bottom : 0 ;
    left : 0 ;
    right : 0 ;
  }
}

يمكنك إنشاء مكون من هذه الملفات مع الأمر التالي:

 # For CSS
npx @phntms/css-components --css styles.module.css

# For SCSS
npx @phntms/css-components --css styles.module.scss

# or if you have the package installed
npx css-components --css styles.module.css
npx css-components --css styles.module.scss

سيؤدي هذا إلى إخراج ملف يسمى styles.ts يشبه هذا:

 import { styled } from "@phntms/css-components" ;

import css from "./test.css" ;

export const TopBar = styled ( "nav" , {
  css : css . topBar ,
  variants : {
    fixed : {
      true : css . topBar_fixed_true ,
    } ,
  } ,
} ) ;

تعريفات CSS الممكنة:

• a.link يسمح لك بتحديد نمط أساسي للمكون. هذا يعني أنها ستكون علامة مرساة مع link فئة CSS.
• يتيح لك a.link_big_true تعيين التصميم لمتغير يسمى big with the value true .
• a.link_theme_light_default كما هو مذكور أعلاه ولكن أيضًا يعين المتغير كقيمة افتراضية.
• يمنحك a.link_big_true_theme_light القدرة على تحديد أنماط المتغيرات المركبة.

خيارات CLI

• --css المسار إلى ملف CSS أو SCSS الذي تريد إنشاء مكون من. يمكن أن يكون هذا أيضًا نمطًا كرويًا متكررًا يتيح لك مسح دليل المكونات بالكامل.
• --output اسم الملف لملف الإخراج. الإعدادات الافتراضية إلى styles.ts التي سيتم حفظها في نفس الدليل مثل ملف CSS.
• --overwrite إذا كان ملف الإخراج موجودًا بالفعل ، فسيقوم هذا بالكتابة فوقه. الإعدادات الافتراضية إلى false .

مثال لإنشاء مكونات من جميع ملفات CSS و SCSS في دليل المكونات:

 # From CSS
npx @phntms/css-components --css ./src/components/ ** / * .css --output styles.ts

# Or from SCSS
npx @phntms/css-components --css ./src/components/ ** / * .scss --output styles.ts

# Or from both CSS and SCSS
npx @phntms/css-components --css ./src/components/ ** / * .{css,scss} --output styles.ts