claxed

Aulas com o mesmo estilo de componentes de estilo
Visualizar demonstração · Relatório Bug · Solicitar recurso

Sobre o projeto

A idéia nasce ao usar o CSS do Tailwind, que é um quadro de classes muito úteis que nos dá todas as classes CSS para tamanhos, cores e espaçamentos. No entanto, pode ser confuso se você tiver muitas classes para digitar dentro do componente. E sem mencionar quando você deseja uma classe condicional baseada em um suporte? ‍♂️

Com clássico, fortemente inspirado por componentes com estilo, podemos manter nosso DOM um pouco mais limpo com a ajuda de alguns utilitários como interpolação de adereços dentro da string de modelo.

Instalação

npm install claxed

ou

yarn add claxed

Uso

Se você sabe componentes com estilo, essa sintaxe já pode estar familiarizada com você. Tudo o que você digitar na sequência de modelos será impresso no atributo HTML class do componente. No exemplo seguinte, cada linha é uma classe CSS.

 const Button = claxed . button `
  px-3
  py-2
` ;

const ButtonRed = claxed ( Button ) `
  ${ ( { border } ) => border && 'border' }
  text-red-500
` ;

const App = ( ) => (
  < div >
    < Button > Click me </ Button >
    < ButtonRed border > Click me </ ButtonRed >
  </ div >
) ;

// Note: All the falsy values are stripped from the output 

Roteiro

Veja os problemas abertos para uma lista dos recursos propostos (e problemas conhecidos).

Contribuindo

As contribuições são o que tornam a comunidade de código aberto uma forma de lugar tão incrível onde aprender, inspirar e criar. Quaisquer contribuições que você faz são muito apreciadas .

1. Bifurcar o projeto
2. Crie seu ramo de recursos ( git checkout -b feature/AmazingFeature )
3. Comprometa suas mudanças ( git commit -m 'Add some AmazingFeature' )
4. Empurre para o ramo ( git push origin feature/AmazingFeature )
5. Abra um pedido de tração

Perguntas frequentes

A ordem em que eu digito classes com cllaxi relevante para a especificidade do CSS?

Não. O CLAXED é responsável apenas por combinar classes CSS e colocar o resultado no atributo html `class` do componente. Se você tiver algum problema de especificidade, veja como as aulas são definidas no arquivo CSS

Licença

Distribuído sob a licença do MIT. Consulte LICENSE para obter mais informações.

Contato

Tommaso Poletti - @Tomma5o

Link do projeto: https://github.com/tomma5o/claxed