css components
0.4.0
Une bibliothèque CSS simple, légère et personnalisable et personnalisable qui vous permet d'envelopper vos styles CSS dans une structure de type composant. Inspiré par les bibliothèques CSS-in-JS comme les composants de style et les points.
À la base, CSS-Components est un simple wrapper autour de CSS standard. Il vous permet d'écrire votre CSS comme vous le souhaitez, puis de les composer dans un composant prêt à être utilisé dans React.
Voici un exemple minimal d'un composant de bouton avec une variante facultative:
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 ,
} ,
} ,
} ) ;Cela produit un joli composant propre qui peut être utilisé dans React:
import { Button } from "./Button" ;
export const App = ( ) => (
< div >
< Button > Default </ Button >
< Button primary > Primary </ Button >
</ div >
) ; Installez ce package avec npm .
npm i @phntms/css-components Voici un exemple complet d'un composant de bouton avec une variante facultative appelée primary :
composants / bouton / styles.module.css
. root {
background-color : grey;
border-radius : 4 px ;
}
. primary {
background-color : black;
}composants / bouton / 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 ,
} ,
} ,
} ) ;composants / bouton / 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 >
) ; L'objet de configuration des variantes est un objet simple qui vous permet de définir les variantes que votre composant prend en charge. Chaque variante est une clé de l'objet et la valeur est un objet qui définit les valeurs possibles (classes CSS) pour cette variante.
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 ,
} ,
} ,
} ) ; Vous pouvez utiliser la fonction defaultVariants pour définir une variante par défaut:
const StyledButton = styled ( "button" , {
css : css . root ,
variants : {
big : {
// Boolean values are supported
true : css . big ,
} ,
} ,
defaultVariants : {
big : true ,
} ,
} ) ; Pour des configurations de variantes plus complexes, vous pouvez utiliser l'argument des variantes composées pour définir quels styles doivent être appliqués lorsque plusieurs variantes sont utilisées.
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 ,
} ,
] ,
} ) ; Partout où vous spécifiez un sélecteur CSS, vous pouvez également passer dans une gamme de classes pour aider à composer et à réutiliser les styles.
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 ] ,
} ,
} ,
} ) ; Vous pouvez également styliser d'autres composants d'autres écosystèmes. Tant que le composant a un accessoire className , le style doit se propager.
Exemple étendant le composant 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 ,
} ,
} ,
} ) ; Par défaut, les valeurs variantes ne se propagent pas à l'élément qu'il étend et est exclusivement utilisée pour styliser le composant actuel. Il s'agit d'empêcher les erreurs d'exécution spécifiques de réagir en ce qui concerne le DOM. Si vous souhaitez effectivement passer une valeur de variante à l'élément que vous étendez, vous pouvez utiliser l'option passthrough .
Dans l'exemple suivant, readOnly est un attribut HTML intrinsèque que nous voulons tous les deux styliser, mais continuer à passer à l'élément 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" ] ,
} ) ;Nous avons inclus une aide qui vous permet d'accéder aux types des variantes que vous avez définies.
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" ] ; Nous avons inclus un outil CLI qui vous permet de générer des composants à partir de fichiers CSS et SCSS qui confirment une convention de dénomination spécifique. Ceci est hautement expérimental et est susceptible de changer.
Considérez ce fichier CSS:
/* styles.module.css */
nav . topBar {
background-color : # aaa ;
padding : 32 px ;
}
nav . topBar_fixed_true {
position : fixed;
bottom : 0 ;
left : 0 ;
right : 0 ;
}Ou en utilisant SCSS (Sassy CSS):
// styles.module.scss
nav .topBar {
background-color : #aaa ;
padding : 32 px ;
& _fixed_true {
position : fixed ;
bottom : 0 ;
left : 0 ;
right : 0 ;
}
}Vous pouvez générer un composant à partir de ces fichiers avec la commande suivante:
# 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 Cela sortira un fichier appelé styles.ts qui ressemble à ceci:
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 vous permettant de définir un style de base pour le composant. Cela signifie que ce sera une balise d'ancrage avec le link de classe CSS.a.link_big_true vous permet de définir le style d'une variante appelée big avec la valeur true .a.link_theme_light_default Idem que ci-dessus mais définit également la variante comme valeur par défaut.a.link_big_true_theme_light vous donne la possibilité de définir les styles de variantes composées.--css Le chemin d'accès au fichier CSS ou SCSS dont vous souhaitez générer un composant. Cela peut également être un modèle de glob récursif vous permettant de scanner l'ensemble de votre répertoire de composants.--output le nom de fichier du fichier de sortie. Par défaut, styles.ts qui sera enregistré dans le même répertoire que le fichier CSS.--overwrite Si le fichier de sortie existe déjà, cela l'écrasera. Par défaut est false .Exemple pour générer des composants à partir de tous les fichiers CSS et SCSS dans le répertoire des composants:
# 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
