css components

@phntms/css-components

ไลบรารีส่วนประกอบ CSS ที่เรียบง่ายน้ำหนักเบาและปรับแต่งได้ซึ่งช่วยให้คุณห่อสไตล์ CSS ของคุณในโครงสร้างที่คล้ายกับส่วนประกอบ แรงบันดาลใจจากไลบรารี CSS-in-JS เช่นองค์ประกอบสไตล์และการเย็บแผล

การแนะนำ

ที่แกนกลางของมันองค์ประกอบ CSS เป็น wrapper ง่าย ๆ รอบ CSS มาตรฐาน ช่วยให้คุณเขียน CSS ของคุณตามที่คุณต้องการจากนั้นเขียนลงในส่วนประกอบที่พร้อมใช้ในการตอบสนอง

นี่คือตัวอย่างน้อยที่สุดขององค์ประกอบปุ่มที่มีตัวแปรเสริม:

 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 :

ส่วนประกอบ/ปุ่ม/styles.module.css

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

. primary {
  background-color : black;
}

ส่วนประกอบ/ปุ่ม/styles.ts

 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 ] ,
    } ,
  } ,
} ) ;

ส่วนประกอบอื่น ๆ

นอกจากนี้คุณยังสามารถจัดสไตล์ส่วนประกอบอื่น ๆ จากระบบนิเวศอื่น ๆ ตราบใดที่ส่วนประกอบมี prop className การจัดแต่งทรงผมควรเผยแพร่

ตัวอย่างการขยายส่วนประกอบ Link Standard 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 (Sassy CSS):

 // 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 ด้วยค่า 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