Vamos explorar uma novidade: Stylex

Stylex é uma biblioteca JavaScript criada, testada e usada pelo Facebook.

Stylex é uma solução CSS-in-JS, onde você escreve a estrutura de CSS dentro de um arquivo JavaScript. No entanto, isso não significa que você só usará JavaScript puro. Ele oferece suporte a frameworks como React, Angular, Vue, etc.

É uma ferramenta valiosa para grandes projetos que constroem sistemas de design complexos. O Facebook tem usado o Stylex internamente por três anos antes de lançá-lo como um projeto de código aberto.

Como Usar o Stylex

Após instalá-lo no seu projeto, importe-o em sua página ou componente. Crie uma instância chamada, por exemplo, CSS. Em seguida, use CSS.Create para definir estilos. Exemplo básico:

import { CSS } from 'stylex';

const styles = CSS.Create({
  base: {
    fontSize: '16px',
    lineHeight: '1.5',
    color: 'black',
  },
});

// Aplicando a classe 'base' a um elemento H1
const element = <H1 className={styles.base}>Hello Stylex!</H1>;

Pseudo Classes e Condicionais

Você pode usar pseudo classes como :hover, :active, :focus, etc. Exemplo com hover:

const buttonStyles = CSS.Create({
  base: {
    backgroundColor: 'blue',
    color: 'white',
  },
  over: {
    backgroundColor: 'lightblue',
  },
});

// Aplicando ao botão
const button = <Button className={buttonStyles.base} over={buttonStyles.over}>Click me</Button>;

Além disso, você pode usar condicionais. Exemplo com isActive:

const buttonStyles = CSS.Create({
  active: {
    backgroundColor: 'red',
  },
  inactive: {
    backgroundColor: 'grey',
    color: 'black',
  },
});

// Aplicando ao botão com base na propriedade isActive
const button = <Button className={isActive ? buttonStyles.active : buttonStyles.inactive}>Toggle me</Button>;

Variantes

Você pode definir estilos de acordo com variantes. Exemplo com tipos de botão:

type ButtonType = 'primary' | 'secondary';

const buttonStyles = CSS.Create({
  primary: {
    backgroundColor: 'purple',
    color: 'white',
  },
  secondary: {
    backgroundColor: 'orange',
    color: 'black',
  },
});

// Aplicando a variante ao botão
const button = <Button className={buttonStyles[buttonType]}>My Button</Button>;

Esse é um breve resumo do Stylex. O que vocês acha? Até a próxima! 👋🚀

Obs.: Tirei esse artigo desse video https://www.youtube.com/watch?v=H4-mb-XoqrU então fica os creditos pra ele