css components
0.4.0
Eine einfache, leichte und anpassbare CSS-Komponentenbibliothek, mit der Sie Ihre CSS-Stile in eine Komponentenstruktur einwickeln können. Inspiriert von CSS-in-JS-Bibliotheken wie gestalteten Komponenten und Stichen.
Im Kern ist CSS-Komponenten ein einfacher Wrapper um Standard-CSS. Dadurch können Sie Ihrem CSS so schreiben, wie Sie es wünschen, dann in eine Komponente zu komponieren, die in React verwendet werden kann.
Hier finden Sie ein minimales Beispiel für eine Tastenkomponente mit einer optionalen Variante:
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 ,
} ,
} ,
} ) ;Dies gibt eine schöne saubere Komponente aus, die in React verwendet werden kann:
import { Button } from "./Button" ;
export const App = ( ) => (
< div >
< Button > Default </ Button >
< Button primary > Primary </ Button >
</ div >
) ; Installieren Sie dieses Paket mit npm .
npm i @phntms/css-components Hier finden Sie ein vollständiges Beispiel für eine Tastenkomponente mit einer optionalen Variante, die als primary bezeichnet wird:
Komponenten/Taste/Styles.module.css
. root {
background-color : grey;
border-radius : 4 px ;
}
. primary {
background-color : black;
}Komponenten/Schaltflächen/Stile.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 ,
} ,
} ,
} ) ;Komponenten/Taste/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 >
) ; Das Varianten -Konfigurationsobjekt ist ein einfaches Objekt, mit dem Sie die von Ihrer Komponente unterstützten Varianten definieren können. Jede Variante ist ein Schlüssel im Objekt und der Wert ist ein Objekt, das die möglichen Werte (CSS -Klassen) für diese Variante definiert.
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 ,
} ,
} ,
} ) ; Sie können die Funktion defaultVariants verwenden, um standardmäßig eine Variante festzulegen:
const StyledButton = styled ( "button" , {
css : css . root ,
variants : {
big : {
// Boolean values are supported
true : css . big ,
} ,
} ,
defaultVariants : {
big : true ,
} ,
} ) ; Für komplexere Varianten -Setups können Sie das Argument für zusammengesetzte Varianten verwenden, um zu definieren, welche Stile angewendet werden sollen, wenn mehrere Varianten verwendet werden.
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 ,
} ,
] ,
} ) ; Wo immer Sie einen CSS -Selektor angeben, können Sie auch eine Reihe von Klassen übergeben, um Stile zu komponieren und wiederzuverwenden.
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 ] ,
} ,
} ,
} ) ; Sie können auch andere Komponenten aus anderen Ökosystemen stylen. Solange die Komponente über eine className -Requisite verfügt, sollte sich das Styling ausbreiten.
Beispiel, um die Standard Link von Standard.JS zu erweitern:
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 ,
} ,
} ,
} ) ; Standardmäßig werden die Variante nicht zu dem Element ausbreitet, das es erweitert, und wird ausschließlich zum Styling der aktuellen Komponente verwendet. Dies dient dazu, die Reaktion spezifischer Laufzeitfehler in Bezug auf das DOM zu verhindern. Wenn Sie tatsächlich einen Variantenwert an das von Ihnen erweiterte Element übergeben möchten, können Sie die Option passthrough verwenden.
Im folgenden Beispiel ist readOnly ein intrinsisches HTML -Attribut, das wir beide stylen möchten, aber auch weiterhin an das DOM -Element weitergeben.
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" ] ,
} ) ;Wir haben einen Helfer aufgenommen, mit dem Sie auf die Typen der von Ihnen definierten Varianten zugreifen können.
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" ] ; Wir haben ein CLI -Tool beigefügt, mit dem Sie Komponenten aus CSS- und SCSS -Dateien generieren können, die eine bestimmte Namenskonvention bestätigen. Dies ist sehr experimentell und ändert sich.
Betrachten Sie diese CSS -Datei:
/* styles.module.css */
nav . topBar {
background-color : # aaa ;
padding : 32 px ;
}
nav . topBar_fixed_true {
position : fixed;
bottom : 0 ;
left : 0 ;
right : 0 ;
}Oder verwenden SCSS (freche CSS):
// styles.module.scss
nav .topBar {
background-color : #aaa ;
padding : 32 px ;
& _fixed_true {
position : fixed ;
bottom : 0 ;
left : 0 ;
right : 0 ;
}
}Mit dem folgenden Befehl können Sie eine Komponente aus diesen Dateien generieren:
# 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 Dadurch wird eine Datei namens styles.ts ausgestattet, die so aussieht:
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 ermöglicht es Ihnen, einen Grundstil für die Komponente zu definieren. Dies bedeutet, dass es sich um ein Anker -Tag mit dem CSS -Klasse link handelt.a.link_big_true können Sie das Styling für eine Variante namens big mit dem Wert true festlegen.a.link_theme_light_default wie oben, legt aber auch die Variante als Standardwert fest.a.link_big_true_theme_light gibt Ihnen die Möglichkeit, Verbundvarianten Stile zu definieren.--css Der Pfad zur CSS- oder SCSS-Datei, aus der Sie eine Komponente generieren möchten. Dies kann auch ein rekursives GLOB -Muster sein, mit dem Sie Ihr gesamter Komponentenverzeichnis scannen können.--output des Dateinamens für die Ausgabedatei. Standardwerte zu styles.ts , die im selben Verzeichnis wie die CSS -Datei gespeichert werden.--overwrite Wenn die Ausgabedatei bereits vorhanden ist, überschreibt dies sie überschreiben. Standardmäßig false .Beispiel, um Komponenten aus allen CSS- und SCSS -Dateien im Komponentenverzeichnis zu generieren:
# 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
