Dites bonjour à Panda CSS : nouvelle bibliothèque CSS-in-JS Zero Runtime

Découvrez Panda CSS, la nouvelle bibliothèque CSS-in-JS sécurisée avec un temps d’exécution nul, une prise en charge multi-variantes et une compatibilité RSC ! Dans cet article, nous expliquerons comment ajouter Panda CSS à un nouveau projet et quels types de fonctionnalités il offre.

Panda CSS est un nouveau concurrent qui vient d’atterrir dans le monde du CSS-in-JS. Il s’agit d’une solution de type sécurisé sans surcharge d’exécution qui offre une prise en charge multi-variantes et une compatibilité avec les composants React Server.

Mais pourquoi devriez-vous même vous en soucier ? Jetons un coup d’œil à ce qu’est CSS-in-JS, aux avantages de Panda CSS et à la manière dont il peut être utilisé pour styliser les applications.

Qu’est-ce que CSS-in-JS ?

Il y a des années, peu de gens envisageaient d’écrire des styles uniquement en JavaScript. L’idée semblait farfelue, voire absurde, à de nombreux développeurs Web. Cependant, le monde du développement Web a continué d’évoluer et l’innovation n’a pas de limites, c’est pourquoi les développeurs ont commencé à proposer de nouvelles solutions CSS-in-JS.

De nos jours, il existe de nombreuses bibliothèques CSS-in-JS, chacune ayant des fonctionnalités et des avantages uniques. Certains des plus populaires comprennent Composants stylisés, Émotion, des points de suture ou Extrait de vanille, JSS et Aphrodite. Bien qu’ils puissent différer par leur syntaxe et leur fonctionnement, ils visent tous à rendre le style JavaScript plus gérable et maintenable.

En savoir plus: CSS sans exécution avec extrait de vanille

Les bibliothèques CSS-in-JS ont changé notre façon de penser et d’aborder le style des sites Web et des applications. Ils encouragent la conception basée sur les composants, facilitant ainsi la gestion et la réutilisation des styles.

Ils profitent des fonctionnalités de JavaScript, telles que les variables, les instructions conditionnelles et les fonctions, pour créer des styles dynamiques et les adapter à diverses situations. Cela se traduit non seulement par un code plus propre, mais offre également de nouvelles façons de créer et de gérer des styles et des conceptions dynamiques.

De plus, étant donné que les solutions CSS-in-JS ont été adoptées par de nombreux développeurs, de nombreux outils et écosystèmes de qualité les entourent.

Malheureusement, tout n’est pas que du soleil et des roses, car les bibliothèques CSS-in-JS présentent certains inconvénients. Tout d’abord, il existe une courbe d’apprentissage supplémentaire, car chaque bibliothèque CSS-in-JS peut avoir sa propre façon d’écrire des styles, que ce soit avec des balises de modèle ou des objets. Les bibliothèques d’exécution CSS-in-JS génèrent des styles à la volée, puis mettent à jour le DOM en conséquence lorsqu’une application s’exécute. Cela entraîne une surcharge de performances, qui peut ne pas être acceptable pour certaines applications.

De plus, certaines solutions d’exécution ne fonctionnent pas bien avec le rendu côté serveur (SSR) ou ne fonctionnent pas du tout. Par exemple, la plupart des bibliothèques CSS-in-JS actuelles sont incompatibles avec les composants React Server (RSC).

C’est là qu’interviennent les bibliothèques sans exécution. Au lieu de générer des styles à la volée, elles sont créées au moment de la construction. De bons exemples en sont Extrait de vanille, linéaire et le nouveau sorti Panda CSSsur lequel nous nous concentrerons dans cet article.

Bonjour Panda CSS

Panda CSS a été créé par Ségun Adebayoqui est également l’auteur de projets populaires comme Interface utilisateur des chakras et Zag. Il s’agit d’une bibliothèque CSS-in-JS qui promet des styles simples et sécurisés. Il n’a pas de temps d’exécution, car les styles sont générés au moment de la construction et sont livrés avec un support multi-variantes.

Si vous êtes un développeur React, vous pourriez être intéressé par le fait que Panda CSS est compatible avec les composants du serveur React. En plus de cela, il peut être utilisé dans de nombreux frameworks, tels que React, Remix, Vue, Solid et Svelte.

Vous pouvez trouver un exemple de code complet pour cet article dans ce qui suit Dépôt GitHub et un exemple interactif de StackBlitz ci-dessous.

Configuration de Panda CSS

Ajouter Panda CSS à un projet est assez simple. Créons un nouveau projet React avec Vite et configurons Panda CSS.

Créer un nouveau projet Vite

npm create vite@latest panda-css-app -- --template react-ts
cd panda-css-app
npm install

Installer Panda CSS

npm install -D @pandacss/dev
npx panda init --postcss

Ajouter le script Panda CSS Codegen

package.json

{
  "scripts": {
    "prepare": "panda codegen",
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
	},
}

Ajouter un fichier de configuration

panda.config.ts

import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  
  preflight: true,

  
  include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],

  
  exclude: [],

  
  outdir: "styled-system",
});

Configurer le CSS d’entrée avec des calques

src/index.css

@layer reset, base, tokens, recipes, utilities;

Si vous utilisez TypeScript, c’est une bonne idée d’inclure également le styled-system dossier dans le tsconfig.json déposer.

{
  "compilerOptions": {
    
  },
  "include": ["src", "styled-system"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Voilà pour la configuration. Essayons-le ! Pour créer des styles avec Panda CSS, nous devons utiliser le css méthode.

src/App.jsx

import "./App.css";
import { css } from "../styled-system/css";

function App() {
  return (
    <>
      <div
        className={css({
          minHeight: "100vh",
          backgroundColor: "blue.100",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        })}
      >
        <div
          className={css({
            width: 400,
            height: 400,
            bg: "blue.200",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: "3xl",
            padding: "10px 15px",
          })}
        >
          <h1
            className={css({
              fontSize: "3xl",
              fontWeight: "bold",
              color: "blue.800",
            })}
          >
            Hello Panda CSS
          </h1>
        </div>
      </div>
    </>
  );
}

export default App;

Nous avons div et h1 éléments qui ont le className prop avec le résultat du css méthode à laquelle nous passons un objet avec différents styles.

Littéraux de modèle et objets

Certaines bibliothèques CSS-in-JS utilisent des littéraux de modèles au lieu d’objets pour créer des styles. Par exemple, dans les composants stylisés, les styles peuvent être créés de cette manière :

const styles = css`
	display: flex;
	justify-content: center;
	align-items: center;
`

Au moment de la rédaction, Panda CSS ne prend pas en charge les littéraux de modèles, mais l’auteur de la bibliothèque travaille sur l’ajout de la possibilité d’utiliser des littéraux de modèles au lieu d’objets.

Jetons

Panda CSS propose un certain nombre de fonctionnalités intégrées jetons pour les couleurs, les tailles, les espacements et plus encore. Ceux-ci peuvent être configurés dans le panda.config.ts déposer. Nous avons utilisé blue.100 pour le fond, blue.800 pour la couleur du texte, et 3xl pour la taille de la police. Lorsque nous commencerons à saisir des valeurs pour les styles, nous obtiendrons automatiquement des conseils de saisie utiles.

Si vous souhaitez voir tous les jetons principaux disponibles par défaut, vous pouvez consulter système-style/jetons/tokens.d.ts déposer.

Écrire des noms de propriétés CSS complets peut être un peu fastidieux, c’est pourquoi Panda CSS prend en charge les raccourcis que vous connaissez peut-être déjà dans d’autres bibliothèques. Nous pouvons mettre à jour le code ci-dessus comme suit :

import "./App.css";
import { css } from "../styled-system/css";

function App() {
  return (
    <>
      <div
        className={css({
          minH: "100vh",
          bg: "blue.100",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        })}
      >
        <div
          className={css({
            w: 400,
            h: 400,
            bg: "blue.200",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            rounded: "3xl",
            p: "10px 15px",
          })}
        >
          <h1
            className={css({
              fontSize: "3xl",
              fontWeight: "bold",
              color: "blue.800",
            })}
          >
            Hello Panda CSS
          </h1>
        </div>
      </div>
    </>
  );
}

export default App;

Au lieu d’écrire background-color, border-radius et paddingon peut utiliser bg, rounded et p.

Pseudo-éléments

Panda CSS propose des pseudo-classes intégrées pour les états de survol, actif, focus et désactivé. Il permet également de cibler les premiers, derniers enfants, impairs et pairs. Tous ces éléments peuvent être utilisés en les ajoutant comme propriétés de style avec le _ préfixe. Par exemple, voici comment modifier les couleurs du texte et de l’arrière-plan en survol.

{
  bg: {
    base: "blue.100",
    _hover: "blue.800"
  },
  color: {
    base: 'blue.800',
    _hover: 'blue.100'
  }
}	

Le base La propriété spécifie quelle devrait être la valeur par défaut. Celui défini pour _hover La propriété sera utilisée lorsqu’un utilisateur survole un élément.

Voici un exemple complet :

src/App.tsx

import "./App.css";
import { css } from "../styled-system/css";

function App() {
  return (
    <>
      <div
        className={css({
          minH: "100vh",
          bg: "blue.100",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        })}
      >
        <div
          className={`group ${css({
            w: 400,
            h: 400,
            bg: {
              base: "blue.200",
              _hover: "blue.900",
            },
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            rounded: "3xl",
            p: "10px 15px",
          })}`}
        >
          <h1
            className={css({
              fontSize: "3xl",
              fontWeight: "bold",
              color: {
                base: "blue.800",
                _groupHover: "blue.100",
              },
            })}
          >
            Hello Panda CSS
          </h1>
        </div>
      </div>
    </>
  );
}

export default App;

Le GIF ci-dessous montre à quoi cela ressemble en action.

Conception de réponses avec Panda CSS

Créer des styles réactifs avec Panda CSS qui s’adaptent à différentes tailles d’écran est très simple. Prêt à l’emploi, Panda CSS fournit cinq points d’arrêt qui peuvent être utilisés pour cibler différentes tailles d’écran.

const breakpoints = {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px'
}

Ce sont de bons paramètres par défaut, mais si vous souhaitez les configurer ou même en ajouter de nouveaux, vous pouvez le faire dans le fichier de configuration.

panda.config.ts

export default defineConfig({
  
  theme: {
    extend: {
      breakpoints: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px'
      }
    }
  }
})

Voici comment utiliser les points d’arrêt pour créer des styles réactifs.

src/App.tsx

import "./App.css";
import { css } from "../styled-system/css";

function App() {
  return (
    <>
      <div
        className={css({
          minH: "100vh",
          bg: "blue.100",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        })}
      >
        <div
          className={`group ${css({
            w: {
              base: 250,
              sm: 300,
              md: 400,
              lg: 500,
            },
            h: {
              base: 250,
              sm: 300,
              md: 400,
              lg: 500,
            },
            bg: {
              base: "blue.200",
              _hover: "blue.800",
              md: "orange.200",
              lg: "red.200",
            },
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            rounded: "3xl",
            p: "10px 15px",
          })}`}
        >
          <h1
            className={css({
              fontSize: {
                base: "lg",
                sm: "xl",
                md: "2xl",
                lg: "3xl",
              },
              fontWeight: "bold",
              color: {
                base: "blue.800",
                _groupHover: "blue.200",
                md: "orange.800",
                lg: "red.800",
              },
            })}
          >
            Hello Panda CSS
          </h1>
        </div>
      </div>
    </>
  );
}

export default App;

Le conteneur carré changera de taille et de couleur en fonction de la taille de l’écran. Sur les très petits écrans, il aura une taille de 250 pixels et la couleur bleue, tandis que sur les plus grands la couleur rouge et la taille de 400 pixels. La couleur du texte s’adaptera également en conséquence.

Recettes

Une fonctionnalité très intéressante offerte par Panda CSS est la prise en charge de plusieurs variantes, que Panda CSS appelle « Recettes ». Vous avez peut-être déjà utilisé des variantes, car elles sont proposées par de nombreux frameworks d’interface utilisateur. Par exemple, un bouton peut avoir un certain nombre de variantes visuelles comme primary, success et dangerainsi que les tailles, telles que sm, md ou lg.

<Button variant="primary" size="lg">Click me</Button>

Panda CSS fournit une méthode appelée cvaQui veut dire Autorité de dérogation de classe. Il permet la création de plusieurs variantes avec une API d’exécution de type sécurisé. Voici un exemple de la façon dont nous pouvons créer une recette pour un composant Button.

src/components/Button.tsx

import { cva } from "../../styled-system/css";

const button = cva({
  base: {
    display: "flex",
    justifyContent: "center",
    rounded: "sm",
  },
  variants: {
    variant: {
      primary: {
        bg: "blue.800",
        color: "blue.100",
      },
      success: {
        bg: "green.800",
        color: "green.100",
      },
      danger: {
        bg: "red.800",
        color: "red.100",
      },
    },
    size: {
      sm: { padding: "6px 8px", fontSize: "12px" },
      md: { padding: "8px 12px", fontSize: "16px" },
      lg: { padding: "10px 16px", fontSize: "20px" },
    },
  },
});

type ButtonCVAProps = NonNullable<Parameters<typeof button>[0]>;

export type ButtonProps = {
  className?: string;
  children: React.ReactNode;
  variant?: ButtonCVAProps["variant"];
  size?: ButtonCVAProps["size"];
};

const Button = (props: ButtonProps) => {
  const { className, children, variant, size } = props;
  return (
    <button
      className={`${button({
        variant,
        size,
      })} ${className}`}
    >
      {children}
    </button>
  );
};

export default Button;

Nous avons défini deux variantes différentes. Le premier s’appelle variant avec primary, success et danger valeurs, et il est utilisé pour déterminer la couleur du texte et de l’arrière-plan. Le deuxième s’appelle sizeet il peut être réglé sur sm, md ou lg. Ajoutons les boutons dans le App composant.

src/App.tsx

import "./App.css";
import { css } from "../styled-system/css";
import Button from "./components/Button";
import { vstack } from "../styled-system/patterns";

function App() {
  return (
    <div
      className={css({
        minH: "100vh",
        bg: "blue.100",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      })}
    >
      <div className={vstack()}>
        <Button variant="primary" size="md">
          Primary
        </Button>
        <Button variant="success" size="lg">
          Success
        </Button>
        <Button variant="danger" size="sm">
          Danger
        </Button>
      </div>
    </div>
  );
}

export default App;

Le App Le composant affichera trois boutons avec différentes variantes, tailles et texte. L’image ci-dessous montre à quoi ressembleront les boutons.

Résumé

CSS-in-JS est une approche populaire pour styliser les applications Web, et Panda CSS pourrait devenir l’un des choix de base dans ce domaine.

Cependant, il est essentiel de rappeler que ces bibliothèques ne sont que des outils dans la boîte à outils d’un développeur. Bien qu’ils puissent offrir des avantages significatifs, il est essentiel d’évaluer les besoins de chaque projet et de prendre une décision éclairée quant à l’utilisation d’une solution CSS-in-JS ou d’une approche plus traditionnelle du style.

Néanmoins, si vous n’avez jamais utilisé CSS-in-JS, Panda CSS pourrait être celui qui vous convaincra de l’essayer. Notez que nous n’avons couvert qu’un petit sous-ensemble des fonctionnalités, alors assurez-vous de consulter le Documentation.