css components
0.4.0
Uma biblioteca de componentes CSS simples, leve e personalizável que permite envolver seus estilos CSS em uma estrutura semelhante a um componente. Inspirado nas bibliotecas CSS-in-JS, como componentes de estilo e pontos.
Na sua essência, o CSS-Components é um invólucro simples em torno do CSS padrão. Ele permite que você escreva seu CSS como você deseja, em seguida, compô -los em um componente pronto para ser usado no React.
Aqui está um exemplo mínimo de um componente de botão com uma 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 ,
} ,
} ,
} ) ;Isso produz um bom componente limpo que pode ser usado no React:
import { Button } from "./Button" ;
export const App = ( ) => (
< div >
< Button > Default </ Button >
< Button primary > Primary </ Button >
</ div >
) ; Instale este pacote com npm .
npm i @phntms/css-components Aqui está um exemplo completo de um componente de botão com uma variante opcional chamada primary :
componentes/botão/styles.module.css
. root {
background-color : grey;
border-radius : 4 px ;
}
. primary {
background-color : black;
}componentes/botão/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 ,
} ,
} ,
} ) ;componentes/botão/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 >
) ; O objeto de configuração das variantes é um objeto simples que permite definir as variantes que seu componente suporta. Cada variante é uma chave no objeto e o valor é um objeto que define os possíveis valores (classes CSS) para essa 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 ,
} ,
} ,
} ) ; Você pode usar o recurso defaultVariants para definir uma variante por padrão:
const StyledButton = styled ( "button" , {
css : css . root ,
variants : {
big : {
// Boolean values are supported
true : css . big ,
} ,
} ,
defaultVariants : {
big : true ,
} ,
} ) ; Para configurações de variantes mais complexas, você pode usar o argumento das variantes compostas para definir quais estilos devem ser aplicados quando várias variantes forem usadas.
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 ,
} ,
] ,
} ) ; Onde quer que você especifique um seletor CSS, você também pode passar em uma variedade de classes para ajudar a compor e 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 ] ,
} ,
} ,
} ) ; Você também pode estilizar outros componentes de outros ecossistemas. Enquanto o componente tiver um suporte className , o estilo deve se propagar.
Exemplo estendendo o componente padrão Link 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 ,
} ,
} ,
} ) ; Por padrão, os valores da variante não acabam se propagando para o elemento que está se estendendo e é usado exclusivamente para modelar o componente atual. Isso é para parar de reagir, erros de tempo de execução específicos ocorreram em relação ao DOM. Se você realmente deseja passar um valor variante para o elemento que está estendendo, pode usar a opção passthrough .
No exemplo a seguir, readOnly é um atributo HTML intrínseco que nós dois queremos estilizar, mas também continua passando para o 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" ] ,
} ) ;Incluímos um ajudante que permite acessar os tipos de variantes que você definiu.
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" ] ; Incluímos uma ferramenta CLI que permite gerar componentes a partir de arquivos CSS e SCSS que confirmam a uma convenção de nomeação específica. Isso é altamente experimental e está sujeito a mudanças.
Considere este arquivo 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 usando SCSS (Sassy CSS):
// styles.module.scss
nav .topBar {
background-color : #aaa ;
padding : 32 px ;
& _fixed_true {
position : fixed ;
bottom : 0 ;
left : 0 ;
right : 0 ;
}
}Você pode gerar um componente a partir desses arquivos com o seguinte 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 Isso produzirá um arquivo chamado styles.ts que se parece com o seguinte:
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 , permitindo que você defina um estilo base para o componente. Isso significa que será uma tag de âncora com o link da classe CSS.a.link_big_true permite definir o estilo para uma variante chamada big com o valor true .a.link_theme_light_default o mesmo que acima, mas também define a variante como o valor padrão.a.link_big_true_theme_light fornece a capacidade de definir estilos de variantes compostos.--css O caminho para o arquivo CSS ou SCSS da qual você deseja gerar um componente. Esse também pode ser um padrão global recursivo, permitindo que você digitalize todo o diretório dos componentes.--output o nome do arquivo para o arquivo de saída. Padrões para styles.ts que serão salvos no mesmo diretório que o arquivo CSS.--overwrite Se o arquivo de saída já existir, isso o substituirá. Padrões para false .Exemplo para gerar componentes de todos os arquivos CSS e SCSS no diretório dos 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
