css components
0.4.0
Una biblioteca de componentes CSS simples, livianos y personalizables que le permite envolver sus estilos CSS en una estructura similar a un componente. Inspirado en bibliotecas CSS-in-JS como componentes y puntadas de estilo.
En su núcleo, CSS-Components es un envoltorio simple alrededor de CSS estándar. Le permite escribir su CSS cómo desea y luego componerlos en un componente listo para ser utilizado en React.
Aquí hay un ejemplo mínimo de un componente de botón con una variante opcional:
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 ,
} ,
} ,
} ) ;Esto genera un bonito componente limpio que se puede usar en React:
import { Button } from "./Button" ;
export const App = ( ) => (
< div >
< Button > Default </ Button >
< Button primary > Primary </ Button >
</ div >
) ; Instale este paquete con npm .
npm i @phntms/css-components Aquí hay un ejemplo completo de un componente de botón con una variante opcional llamada primary :
componentes/botón/estilos.module.css
. root {
background-color : grey;
border-radius : 4 px ;
}
. primary {
background-color : black;
}componentes/botón/estilos.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 ,
} ,
} ,
} ) ;componentes/botón/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 >
) ; El objeto de configuración Variants es un objeto simple que le permite definir las variantes que admite su componente. Cada variante es una clave en el objeto y el valor es un objeto que define los valores posibles (clases CSS) para esa 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 ,
} ,
} ,
} ) ; Puede usar la función defaultVariants para establecer una variante de forma predeterminada:
const StyledButton = styled ( "button" , {
css : css . root ,
variants : {
big : {
// Boolean values are supported
true : css . big ,
} ,
} ,
defaultVariants : {
big : true ,
} ,
} ) ; Para configuraciones de variantes más complejas, puede usar el argumento de variantes compuestos para definir qué estilos deben aplicarse cuando se usan múltiples variantes.
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 ,
} ,
] ,
} ) ; Donde sea que especifique un selector CSS, también puede pasar una variedad de clases para ayudar a componer y reutilizar estilos.
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 ] ,
} ,
} ,
} ) ; También puede diseñar otros componentes de otros ecosistemas. Mientras el componente tenga un accesorio className , el estilo debería propagar.
Ejemplo que extiende el componente Link Next.js estándar:
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 ,
} ,
} ,
} ) ; Por defecto, los valores de la variante no terminan propagándose al elemento que se extiende y se usa exclusivamente para diseñar el componente actual. Esto es para evitar que se produzcan errores de tiempo de ejecución específicos con respecto al DOM. Si realmente desea pasar un valor de variante al elemento que está extendiendo, puede usar la opción passthrough .
En el siguiente ejemplo, readOnly es un atributo HTML intrínseco que ambos queremos diseñar, pero que también continuamos pasando al elemento 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" ] ,
} ) ;Hemos incluido un ayudante que le permite acceder a los tipos de las variantes que ha definido.
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" ] ; Hemos incluido una herramienta CLI que le permite generar componentes a partir de archivos CSS y SCSS que confirman una convención específica de nomenclatura. Esto es muy experimental y está sujeto a cambios.
Considere este archivo CSS:
/* styles.module.css */
nav . topBar {
background-color : # aaa ;
padding : 32 px ;
}
nav . topBar_fixed_true {
position : fixed;
bottom : 0 ;
left : 0 ;
right : 0 ;
}O usar SCSS (CSS sassy):
// styles.module.scss
nav .topBar {
background-color : #aaa ;
padding : 32 px ;
& _fixed_true {
position : fixed ;
bottom : 0 ;
left : 0 ;
right : 0 ;
}
}Puede generar un componente a partir de estos archivos con el siguiente comando:
# 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 Esto generará un archivo llamado styles.ts que se ve así:
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 le permite definir un estilo base para el componente. Esto significa que será una etiqueta de anclaje con el link de clase CSS.a.link_big_true le permite establecer el estilo para una variante llamada big con el valor true .a.link_theme_light_default igual que el anterior, pero también establece la variante como el valor predeterminado.a.link_big_true_theme_light le brinda la capacidad de definir estilos de variantes compuestos.--css La ruta al archivo CSS o SCSS del que desea generar un componente. Este también puede ser un patrón de globo recursivo que le permite escanear todo su directorio de componentes.--output el nombre de archivo para el archivo de salida. El valor predeterminado a styles.ts que se guardará en el mismo directorio que el archivo CSS.--overwrite Si el archivo de salida ya existe, esto lo sobrescribirá. El valor predeterminado es false .Ejemplo para generar componentes de todos los archivos CSS y SCSS en el directorio de componentes:
# 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
