css components
0.4.0
Perpustakaan komponen CSS yang sederhana, ringan, dan dapat disesuaikan yang memungkinkan Anda membungkus gaya CSS Anda dalam struktur seperti komponen. Terinspirasi oleh perpustakaan CSS-in-JS seperti komponen dan jahitan gaya.
Pada intinya, komponen CSS adalah pembungkus sederhana di sekitar CSS standar. Ini memungkinkan Anda untuk menulis CSS Anda seperti yang Anda inginkan kemudian menyusunnya ke dalam komponen yang siap digunakan dalam React.
Berikut adalah contoh minimal dari komponen tombol dengan varian opsional:
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 ,
} ,
} ,
} ) ;Ini menghasilkan komponen bersih yang bagus yang dapat digunakan dalam bereaksi:
import { Button } from "./Button" ;
export const App = ( ) => (
< div >
< Button > Default </ Button >
< Button primary > Primary </ Button >
</ div >
) ; Instal paket ini dengan npm .
npm i @phntms/css-components Berikut adalah contoh lengkap komponen tombol dengan varian opsional yang disebut primary :
komponen/tombol/styles.module.css
. root {
background-color : grey;
border-radius : 4 px ;
}
. primary {
background-color : black;
}komponen/tombol/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 ,
} ,
} ,
} ) ;komponen/tombol/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 >
) ; Objek Varian Config adalah objek sederhana yang memungkinkan Anda untuk menentukan varian yang didukung komponen Anda. Setiap varian adalah kunci dalam objek dan nilai adalah objek yang mendefinisikan nilai yang mungkin (kelas CSS) untuk varian itu.
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 ,
} ,
} ,
} ) ; Anda dapat menggunakan fitur defaultVariants untuk mengatur varian secara default:
const StyledButton = styled ( "button" , {
css : css . root ,
variants : {
big : {
// Boolean values are supported
true : css . big ,
} ,
} ,
defaultVariants : {
big : true ,
} ,
} ) ; Untuk pengaturan varian yang lebih kompleks, Anda dapat menggunakan argumen varian senyawa untuk menentukan gaya apa yang harus diterapkan ketika beberapa varian digunakan.
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 ,
} ,
] ,
} ) ; Di mana pun Anda menentukan pemilih CSS, Anda juga dapat lulus dalam berbagai kelas untuk membantu menyusun dan menggunakan kembali gaya.
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 ] ,
} ,
} ,
} ) ; Anda juga dapat menata komponen lain dari ekosistem lain. Selama komponen memiliki prop className , styling harus merambat.
Contoh Memperluas Komponen Link Standar 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 ,
} ,
} ,
} ) ; Secara default nilai varian tidak berakhir merambat ke elemen yang diperpanjang dan secara eksklusif digunakan untuk menata komponen saat ini. Ini untuk berhenti bereaksi kesalahan runtime spesifik dari terjadi sehubungan dengan DOM. Jika Anda memang ingin memberikan nilai varian ke elemen yang Anda perluas, Anda dapat menggunakan opsi passthrough .
Dalam contoh berikut, readOnly adalah atribut HTML intrinsik yang ingin kami gaya, tetapi juga terus melewati elemen 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" ] ,
} ) ;Kami telah menyertakan penolong yang memungkinkan Anda mengakses jenis varian yang telah Anda tentukan.
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" ] ; Kami telah menyertakan alat CLI yang memungkinkan Anda untuk menghasilkan komponen dari file CSS dan SCSS yang mengkonfirmasi ke konvensi penamaan tertentu. Ini sangat eksperimental dan dapat berubah.
Pertimbangkan file CSS ini:
/* styles.module.css */
nav . topBar {
background-color : # aaa ;
padding : 32 px ;
}
nav . topBar_fixed_true {
position : fixed;
bottom : 0 ;
left : 0 ;
right : 0 ;
}Atau menggunakan SCSS (Sassy CSS):
// styles.module.scss
nav .topBar {
background-color : #aaa ;
padding : 32 px ;
& _fixed_true {
position : fixed ;
bottom : 0 ;
left : 0 ;
right : 0 ;
}
}Anda dapat menghasilkan komponen dari file ini dengan perintah berikut:
# 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 Ini akan menghasilkan file yang disebut styles.ts yang terlihat seperti ini:
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 ,
} ,
} ,
} ) ;a.link memungkinkan Anda untuk mendefinisikan gaya dasar untuk komponen. Ini berarti itu akan menjadi tag jangkar dengan link kelas CSS.a.link_big_true memungkinkan Anda mengatur gaya untuk varian yang disebut big dengan nilai true .a.link_theme_light_default sama seperti di atas tetapi juga menetapkan varian sebagai nilai default.a.link_big_true_theme_light memberi Anda kemampuan untuk mendefinisikan gaya varian senyawa.--css Path ke file CSS atau SCSS yang ingin Anda hasilkan komponen. Ini juga bisa menjadi pola glob rekursif yang memungkinkan Anda memindai seluruh direktori komponen Anda.--output nama file untuk file output. Default ke styles.ts yang akan disimpan di direktori yang sama dengan file CSS.--overwrite Jika file output sudah ada, ini akan menimpanya. Default ke false .Contoh untuk menghasilkan komponen dari semua file CSS dan SCSS di direktori komponen:
# 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
