Le bundler de Bun dispose d'un support intégré pour CSS avec les fonctionnalités suivantes :

• Transpilation des fonctionnalités modernes/futures pour fonctionner sur tous les navigateurs (y compris le préfixe vendor)
• Minification
• Modules CSS
• Tailwind (via un plugin de bundler natif)

Transpilation

Le bundler CSS de Bun vous permet d'utiliser des fonctionnalités CSS modernes/futures sans avoir à vous soucier de la compatibilité des navigateurs — tout cela grâce à ses fonctionnalités de transpilation et de préfixe vendor qui sont activées par défaut.

L'analyseur et le bundler CSS de Bun sont un portage direct Rust → Zig de LightningCSS, avec une approche de bundling inspirée par esbuild. Le transpileur convertit la syntaxe CSS moderne en équivalents rétrocompatibles qui fonctionnent sur tous les navigateurs.

NOTE

Un grand merci va aux auteurs de LightningCSS et esbuild pour leur travail remarquable.

Compatibilité des navigateurs

Par défaut, le bundler CSS de Bun cible les navigateurs suivants :

• ES2020
• Edge 88+
• Firefox 78+
• Chrome 87+
• Safari 14+

Abaissement de syntaxe

Imbrication (Nesting)

La spécification CSS Nesting vous permet d'écrire des feuilles de style plus concises et intuitives en imbriquant les sélecteurs les uns dans les autres. Au lieu de répéter les sélecteurs parents dans votre fichier CSS, vous pouvez écrire les styles enfants directement dans leurs blocs parents.

/* Avec imbrication */
.card {
  background: white;
  border-radius: 4px;

  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .content {
    padding: 1rem;
  }
}

Le bundler CSS de Bun convertit automatiquement cette syntaxe imbriquée en CSS plat traditionnel qui fonctionne sur tous les navigateurs :

/* Sortie compilée */
.card {
  background: white;
  border-radius: 4px;
}

.card .title {
  font-size: 1.2rem;
  font-weight: bold;
}

.card .content {
  padding: 1rem;
}

Vous pouvez également imbriquer des requêtes média et d'autres règles at à l'intérieur des sélecteurs, éliminant le besoin de répéter les motifs de sélecteurs :

.responsive-element {
  display: block;

  @media (min-width: 768px) {
    display: flex;
  }
}

Ceci compile en :

.responsive-element {
  display: block;
}

@media (min-width: 768px) {
  .responsive-element {
    display: flex;
  }
}

Mélange de couleurs (color mix)

La fonction color-mix() vous offre un moyen facile de mélanger deux couleurs selon un ratio spécifié dans un espace colorimétrique choisi. Cette fonctionnalité puissante vous permet de créer des variations de couleurs sans avoir à calculer manuellement les valeurs résultantes.

.button {
  /* Mélanger bleu et rouge dans l'espace colorimétrique RGB avec une proportion 30/70 */
  background-color: color-mix(in srgb, blue 30%, red);

  /* Créer une variante plus claire pour l'état survol */
  &:hover {
    background-color: color-mix(in srgb, blue 30%, red, white 20%);
  }
}

Le bundler CSS de Bun évalue ces mélanges de couleurs au moment de la construction lorsque toutes les valeurs de couleur sont connues (pas des variables CSS), générant des valeurs de couleur statiques qui fonctionnent sur tous les navigateurs :

.button {
  /* Calculé à la couleur résultante exacte */
  background-color: #b31a1a;
}

.button:hover {
  background-color: #c54747;
}

Cette fonctionnalité est particulièrement utile pour créer des systèmes de couleurs avec des nuances, des teintes et des accents dérivés de manière programmatique sans avoir besoin de préprocesseurs ou d'outils personnalisés.

Couleurs relatives

CSS vous permet désormais de modifier des composants individuels d'une couleur en utilisant la syntaxe de couleur relative. Cette fonctionnalité puissante vous permet de créer des variations de couleurs en ajustant des attributs spécifiques comme la luminosité, la saturation ou des canaux individuels sans avoir à recalculer toute la couleur.

.theme-color {
  /* Commencer avec une couleur de base et augmenter la luminosité de 15% */
  --accent: lch(from purple calc(l + 15%) c h);

  /* Prendre notre bleu de marque et faire une version désaturée */
  --subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h);
}

Le bundler CSS de Bun calcule ces modifications de couleurs relatives au moment de la construction (lorsqu'il n'utilise pas de variables CSS) et génère des valeurs de couleur statiques pour la compatibilité des navigateurs :

.theme-color {
  --accent: lch(69.32% 58.34 328.37);
  --subtle-blue: oklch(60.92% 0.112 240.01);
}

Cette approche est extrêmement utile pour la génération de thèmes, la création de variantes de couleurs accessibles ou la construction d'échelles de couleurs basées sur des relations mathématiques au lieu de coder en dur chaque valeur.

Couleurs LAB

Le CSS moderne prend en charge les espaces colorimétriques perceptuellement uniformes comme LAB, LCH, OKLAB et OKLCH qui offrent des avantages significatifs par rapport au RGB traditionnel. Ces espaces colorimétriques peuvent représenter des couleurs au-delà du gamut RGB standard, résultant en des designs plus vibrants et visuellement cohérents.

.vibrant-element {
  /* Un rouge vibrant qui dépasse les limites du gamut sRGB */
  color: lab(55% 78 35);

  /* Un dégradé lisse utilisant l'espace colorimétrique perceptuel */
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

Le bundler CSS de Bun convertit automatiquement ces formats de couleur avancés en alternatives rétrocompatibles pour les navigateurs qui ne les prennent pas encore en charge :

.vibrant-element {
  /* Fallback vers l'approximation RGB la plus proche */
  color: #ff0f52;
  /* Fallback P3 pour les navigateurs avec un support de gamut plus large */
  color: color(display-p3 1 0.12 0.37);
  /* Valeur originale préservée pour les navigateurs qui la prennent en charge */
  color: lab(55% 78 35);

  background: linear-gradient(to right, #cd4e15, #3887ab);
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

Cette approche en couches assure un rendu de couleur optimal sur tous les navigateurs tout en vous permettant d'utiliser les dernières technologies de couleur dans vos designs.

Fonction color()

La fonction color() fournit un moyen normalisé de spécifier des couleurs dans divers espaces colorimétriques prédéfinis, élargissant vos options de design au-delà de l'espace RGB traditionnel. Cela vous permet d'accéder à des gamuts de couleurs plus larges et de créer des designs plus vibrants.

.vivid-element {
  /* Utilisation de l'espace colorimétrique Display P3 pour des couleurs de gamut plus large */
  color: color(display-p3 1 0.1 0.3);

  /* Utilisation de l'espace colorimétrique A98 RGB */
  background-color: color(a98-rgb 0.44 0.5 0.37);
}

Pour les navigateurs qui ne prennent pas encore en charge ces fonctions de couleur avancées, le bundler CSS de Bun fournit des fallbacks RGB appropriés :

.vivid-element {
  /* Fallback RGB en premier pour une compatibilité maximale */
  color: #fa1a4c;
  /* Original conservé pour les navigateurs qui le prennent en charge */
  color: color(display-p3 1 0.1 0.3);

  background-color: #6a805d;
  background-color: color(a98-rgb 0.44 0.5 0.37);
}

Cette fonctionnalité vous permet d'utiliser immédiatement des espaces colorimétriques modernes tout en garantissant que vos designs restent fonctionnels sur tous les navigateurs, avec des couleurs optimales affichées dans les navigateurs compatibles et des approximations raisonnables ailleurs.

Couleurs HWB

Le modèle de couleur HWB (Teinte, Blancheur, Noirceur) fournit un moyen intuitif d'exprimer des couleurs en fonction de la quantité de blanc ou de noir mélangé à une teinte pure. De nombreux designers trouvent cette approche plus naturelle pour créer des variations de couleurs par rapport à la manipulation des valeurs RGB ou HSL.

.easy-theming {
  /* Cyan pur sans blanc ni noir ajouté */
  --primary: hwb(180 0% 0%);

  /* Même teinte, mais avec 20% de blanc ajouté (teinte claire) */
  --primary-light: hwb(180 20% 0%);

  /* Même teinte, mais avec 30% de noir ajouté (teinte foncée) */
  --primary-dark: hwb(180 0% 30%);

  /* Version atténuée avec blanc et noir ajoutés */
  --primary-muted: hwb(180 30% 20%);
}

Le bundler CSS de Bun convertit automatiquement les couleurs HWB en RGB pour la compatibilité avec tous les navigateurs :

.easy-theming {
  --primary: #00ffff;
  --primary-light: #33ffff;
  --primary-dark: #00b3b3;
  --primary-muted: #339999;
}

Le modèle HWB rend particulièrement facile la création de variations de couleurs systématiques pour les systèmes de design, fournissant une approche plus intuitive pour créer des teintes claires et foncées cohérentes que de travailler directement avec des valeurs RGB ou HSL.

Notation de couleur

Le CSS moderne a introduit des moyens plus intuitifs et concis d'exprimer des couleurs. La syntaxe de couleur séparée par des espaces élimine le besoin de virgules dans les valeurs RGB et HSL, tandis que les couleurs hexadécimales avec canal alpha fournissent un moyen compact de spécifier la transparence.

.modern-styling {
  /* Notation RGB séparée par des espaces (sans virgules) */
  color: rgb(50 100 200);

  /* RGB séparé par des espaces avec alpha */
  border-color: rgba(100 50 200 / 75%);

  /* Hex avec canal alpha (8 chiffres) */
  background-color: #00aaff80;

  /* HSL avec notation simplifiée */
  box-shadow: 0 5px 10px hsl(200 50% 30% / 40%);
}

Le bundler CSS de Bun convertit automatiquement ces formats de couleur modernes pour assurer la compatibilité avec les anciens navigateurs :

.modern-styling {
  /* Converti au format avec virgules pour les anciens navigateurs */
  color: rgb(50, 100, 200);

  /* Canaux alpha gérés de manière appropriée */
  border-color: rgba(100, 50, 200, 0.75);

  /* Hex+alpha converti en rgba si nécessaire */
  background-color: rgba(0, 170, 255, 0.5);

  box-shadow: 0 5px 10px rgba(38, 115, 153, 0.4);
}

Ce processus de conversion vous permet d'écrire un CSS plus propre et plus moderne tout en garantissant que vos styles fonctionnent correctement sur tous les navigateurs.

Fonction de couleur light-dark()

La fonction light-dark() fournit une solution élégante pour implémenter des schémas de couleurs qui respectent la préférence système de l'utilisateur sans nécessiter de requêtes média complexes. Cette fonction accepte deux valeurs de couleur et sélectionne automatiquement celle appropriée en fonction du contexte de schéma de couleurs actuel.

:root {
  /* Définir le support du schéma de couleurs */
  color-scheme: light dark;
}

.themed-component {
  /* Choisit automatiquement la bonne couleur selon la préférence système */
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #eeeeee);
  border-color: light-dark(#dddddd, #555555);
}

/* Remplacer la préférence système si nécessaire */
.light-theme {
  color-scheme: light;
}

.dark-theme {
  color-scheme: dark;
}

Pour les navigateurs qui ne prennent pas encore en charge cette fonctionnalité, le bundler CSS de Bun la convertit pour utiliser des variables CSS avec des fallbacks appropriés :

:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
  }
}

.light-theme {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

.dark-theme {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

.themed-component {
  background-color: var(--lightningcss-light, #ffffff) var(--lightningcss-dark, #121212);
  color: var(--lightningcss-light, #333333) var(--lightningcss-dark, #eeeeee);
  border-color: var(--lightningcss-light, #dddddd) var(--lightningcss-dark, #555555);
}

Cette approche vous offre un moyen élégant de gérer les thèmes clair et sombre sans dupliquer les styles ou écrire des requêtes média complexes, tout en maintenant la compatibilité avec les navigateurs qui ne prennent pas encore en charge la fonctionnalité nativement.

Propriétés logiques

Les propriétés logiques CSS vous permettent de définir la mise en page, l'espacement et le dimensionnement par rapport au mode d'écriture du document et à la direction du texte plutôt qu'aux directions physiques de l'écran. Ceci est crucial pour créer de véritables mises en page internationales qui s'adaptent automatiquement à différents systèmes d'écriture.

.multilingual-component {
  /* Marge qui s'adapte à la direction d'écriture */
  margin-inline-start: 1rem;

  /* Padding qui a du sens quelle que soit la direction du texte */
  padding-block: 1rem 2rem;

  /* Rayon de bordure pour le coin de départ en haut */
  border-start-start-radius: 4px;

  /* Taille qui respecte le mode d'écriture */
  inline-size: 80%;
  block-size: auto;
}

Pour les navigateurs qui ne prennent pas entièrement en charge les propriétés logiques, le bundler CSS de Bun les compile en propriétés physiques avec des ajustements directionnels appropriés :

/* Pour les langues de gauche à droite */
.multilingual-component:dir(ltr) {
  margin-left: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-left-radius: 4px;
  width: 80%;
  height: auto;
}

/* Pour les langues de droite à gauche */
.multilingual-component:dir(rtl) {
  margin-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-right-radius: 4px;
  width: 80%;
  height: auto;
}

Si le sélecteur :dir() n'est pas pris en charge, des fallbacks supplémentaires sont automatiquement générés pour garantir que vos mises en page fonctionnent correctement sur tous les navigateurs et systèmes d'écriture. Cela rend la création de designs internationalisés beaucoup plus simple tout en maintenant la compatibilité avec les anciens navigateurs.

Sélecteur :dir()

Le pseudo-sélecteur :dir() vous permet de styliser des éléments en fonction de leur direction de texte (RTL ou LTR), fournissant un moyen puissant de créer des designs sensibles à la direction sans JavaScript. Ce sélecteur correspond aux éléments en fonction de leur directionalité telle que déterminée par le document ou les attributs de direction explicites.

/* Appliquer différents styles selon la direction du texte */
.nav-arrow:dir(ltr) {
  transform: rotate(0deg);
}

.nav-arrow:dir(rtl) {
  transform: rotate(180deg);
}

/* Positionner des éléments selon le flux de texte */
.sidebar:dir(ltr) {
  border-right: 1px solid #ddd;
}

.sidebar:dir(rtl) {
  border-left: 1px solid #ddd;
}

Pour les navigateurs qui ne prennent pas encore en charge le sélecteur :dir(), le bundler CSS de Bun le convertit en sélecteur :lang() plus largement pris en charge avec des mappages de langue appropriés :

/* Converti pour utiliser des sélecteurs basés sur la langue comme fallback */
.nav-arrow:lang(en, fr, de, es, it, pt, nl) {
  transform: rotate(0deg);
}

.nav-arrow:lang(ar, he, fa, ur) {
  transform: rotate(180deg);
}

.sidebar:lang(en, fr, de, es, it, pt, nl) {
  border-right: 1px solid #ddd;
}

.sidebar:lang(ar, he, fa, ur) {
  border-left: 1px solid #ddd;
}

Cette conversion vous permet d'écrire du CSS sensible à la direction qui fonctionne de manière fiable sur tous les navigateurs, même ceux qui ne prennent pas encore en charge nativement le sélecteur :dir(). Si plusieurs arguments pour :lang() ne sont pas pris en charge, des fallbacks supplémentaires sont automatiquement fournis.

Sélecteur :lang()

Le pseudo-sélecteur :lang() vous permet de cibler des éléments en fonction de la langue dans laquelle ils se trouvent, facilitant l'application de styles spécifiques à la langue. Le CSS moderne permet au sélecteur :lang() d'accepter plusieurs codes de langue, vous permettant de regrouper plus efficacement les règles spécifiques à la langue.

/* Ajustements typographiques pour les langues CJK */
:lang(zh, ja, ko) {
  line-height: 1.8;
  font-size: 1.05em;
}

/* Différents styles de citation par groupe de langue */
blockquote:lang(fr, it, es, pt) {
  font-style: italic;
}

blockquote:lang(de, nl, da, sv) {
  font-weight: 500;
}

Pour les navigateurs qui ne prennent pas en charge plusieurs arguments dans le sélecteur :lang(), le bundler CSS de Bun convertit cette syntaxe pour utiliser le sélecteur :is() afin de maintenir le même comportement :

/* Langues multiples regroupées avec :is() pour une meilleure prise en charge des navigateurs */
:is(:lang(zh), :lang(ja), :lang(ko)) {
  line-height: 1.8;
  font-size: 1.05em;
}

blockquote:is(:lang(fr), :lang(it), :lang(es), :lang(pt)) {
  font-style: italic;
}

blockquote:is(:lang(de), :lang(nl), :lang(da), :lang(sv)) {
  font-weight: 500;
}

Si nécessaire, Bun peut fournir des fallbacks supplémentaires pour :is() également, garantissant que vos styles spécifiques à la langue fonctionnent sur tous les navigateurs. Cette approche simplifie la création de designs internationalisés avec des règles typographiques et de style distinctes pour différents groupes de langues.

Sélecteur :is()

La fonction pseudo-classe :is() (anciennement :matches()) vous permet de créer des sélecteurs plus concis et lisibles en regroupant plusieurs sélecteurs ensemble. Elle accepte une liste de sélecteurs comme argument et correspond si l'un des sélecteurs de cette liste correspond, réduisant considérablement la répétition dans votre CSS.

/* Au lieu d'écrire ceci séparément */
/* 
.article h1,
.article h2,
.article h3 {
  margin-top: 1.5em;
}
*/

/* Vous pouvez écrire ceci */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* Exemple complexe avec plusieurs groupes */
:is(header, main, footer) :is(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

Pour les navigateurs qui ne prennent pas en charge :is(), le bundler CSS de Bun fournit des fallbacks en utilisant des alternatives préfixées par le vendor :

/* Fallback utilisant -webkit-any */
.article :-webkit-any(h1, h2, h3) {
  margin-top: 1.5em;
}

/* Fallback utilisant -moz-any */
.article :-moz-any(h1, h2, h3) {
  margin-top: 1.5em;
}

/* Original conservé pour les navigateurs modernes */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* Exemple complexe avec fallbacks */
:-webkit-any(header, main, footer) :-webkit-any(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

:-moz-any(header, main, footer) :-moz-any(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

:is(header, main, footer) :is(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

Sélecteur :not()

Le pseudo-classe :not() vous permet d'exclure des éléments qui correspondent à un sélecteur spécifique. La version moderne de ce sélecteur accepte plusieurs arguments, vous permettant d'exclure plusieurs motifs avec un seul sélecteur concis.

/* Sélectionner tous les boutons sauf les variantes primary et secondary */
button:not(.primary, .secondary) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* Appliquer des styles à tous les titres sauf ceux dans les sidebars ou footers */
h2:not(.sidebar *, footer *) {
  margin-top: 2em;
}

Pour les navigateurs qui ne prennent pas en charge plusieurs arguments dans :not(), le bundler CSS de Bun convertit cette syntaxe en une forme plus compatible tout en préservant le même comportement :

/* Converti pour utiliser :not avec :is() pour la compatibilité */
button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

h2:not(:is(.sidebar *, footer *)) {
  margin-top: 2em;
}

Et si :is() n'est pas pris en charge, Bun peut générer des fallbacks supplémentaires :

/* Encore plus de fallbacks pour une compatibilité maximale */
button:not(:-webkit-any(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

button:not(:-moz-any(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

Cette conversion garantit que vos sélecteurs négatifs fonctionnent correctement sur tous les navigateurs tout en maintenant la spécificité correcte et le comportement du sélecteur original.

Fonctions mathématiques

CSS inclut désormais un ensemble riche de fonctions mathématiques qui vous permettent d'effectuer des calculs complexes directement dans vos feuilles de style. Celles-ci incluent des fonctions mathématiques standard (round(), mod(), rem(), abs(), sign()), des fonctions trigonométriques (sin(), cos(), tan(), asin(), acos(), atan(), atan2()), et des fonctions exponentielles (pow(), sqrt(), exp(), log(), hypot()).

.dynamic-sizing {
  /* Placer une valeur entre un minimum et un maximum */
  width: clamp(200px, 50%, 800px);

  /* Arrondir au multiple le plus proche */
  padding: round(14.8px, 5px);

  /* Trigonométrie pour les animations ou mises en page */
  transform: rotate(calc(sin(45deg) * 50deg));

  /* Mathématiques complexes avec plusieurs fonctions */
  --scale-factor: pow(1.25, 3);
  font-size: calc(16px * var(--scale-factor));
}

Le bundler CSS de Bun évalue ces expressions mathématiques au moment de la construction lorsque toutes les valeurs sont des constantes connues (pas des variables), résultant en une sortie optimisée :

.dynamic-sizing {
  width: clamp(200px, 50%, 800px);
  padding: 15px;
  transform: rotate(35.36deg);
  --scale-factor: 1.953125;
  font-size: calc(16px * var(--scale-factor));
}

Cette approche vous permet d'écrire un CSS plus expressif et maintenable avec des relations mathématiques significatives, qui est ensuite compilé en valeurs optimisées pour une compatibilité et des performances maximales des navigateurs.

Plages de requêtes média

Le CSS moderne prend en charge une syntaxe de plage intuitive pour les requêtes média, vous permettant de spécifier des points de rupture en utilisant des opérateurs de comparaison comme <, >, <=, et >= au lieu des préfixes min- et max- plus verbeux. Cette syntaxe est plus lisible et correspond à la façon dont nous pensons normalement aux valeurs et aux plages.

/* Syntaxe moderne avec opérateurs de comparaison */
@media (width >= 768px) {
  .container {
    max-width: 720px;
  }
}

/* Plage inclusive utilisant <= et >= */
@media (768px <= width <= 1199px) {
  .sidebar {
    display: flex;
  }
}

/* Plage exclusive utilisant < et > */
@media (width > 320px) and (width < 768px) {
  .mobile-only {
    display: block;
  }
}

Le bundler CSS de Bun convertit ces requêtes de plage modernes en syntaxe de requête média traditionnelle pour la compatibilité avec tous les navigateurs :

/* Converti en syntaxe min/max traditionnelle */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .sidebar {
    display: flex;
  }
}

@media (min-width: 321px) and (max-width: 767px) {
  .mobile-only {
    display: block;
  }
}

Cela vous permet d'écrire des requêtes média plus intuitives et mathématiques tout en garantissant que vos feuilles de style fonctionnent correctement sur tous les navigateurs, y compris ceux qui ne prennent pas en charge la syntaxe de plage moderne.

Raccourcis (Shorthands)

CSS a introduit plusieurs propriétés shorthand modernes qui améliorent la lisibilité et la maintenabilité du code. Le bundler CSS de Bun garantit que ces raccourcis pratiques fonctionnent sur tous les navigateurs en les convertissant en leurs équivalents longhand si nécessaire.

/* Raccourcis d'alignement */
.flex-container {
  /* Raccourci pour align-items et justify-items */
  place-items: center start;

  /* Raccourci pour align-content et justify-content */
  place-content: space-between center;
}

.grid-item {
  /* Raccourci pour align-self et justify-self */
  place-self: end center;
}

/* Overflow à deux valeurs */
.content-box {
  /* Première valeur pour horizontal, deuxième pour vertical */
  overflow: hidden auto;
}

/* text-decoration amélioré */
.fancy-link {
  /* Combine plusieurs propriétés de décoration de texte */
  text-decoration: underline dotted blue 2px;
}

/* Syntaxe display à deux valeurs */
.component {
  /* Type d'affichage externe + type d'affichage interne */
  display: inline flex;
}

Pour les navigateurs qui ne prennent pas en charge ces raccourcis modernes, Bun les convertit en leurs propriétés longhand composantes :

.flex-container {
  /* Propriétés d'alignement développées */
  align-items: center;
  justify-items: start;

  align-content: space-between;
  justify-content: center;
}

.grid-item {
  align-self: end;
  justify-self: center;
}

.content-box {
  /* Propriétés overflow séparées */
  overflow-x: hidden;
  overflow-y: auto;
}

.fancy-link {
  /* Propriétés de décoration de texte individuelles */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: blue;
  text-decoration-thickness: 2px;
}

.component {
  /* Display à valeur unique */
  display: inline-flex;
}

Cette conversion garantit que vos feuilles de style restent propres et maintenables tout en fournissant la compatibilité la plus large possible avec les navigateurs.

Dégradés à double position

La syntaxe de dégradé à double position est une fonctionnalité CSS moderne qui vous permet de créer des arrêts de couleur nets dans les dégradés en spécifiant la même couleur à deux positions adjacentes. Cela crée une transition nette plutôt qu'un fondu doux, ce qui est utile pour créer des rayures, des bandes de couleur et d'autres designs multicolores.

.striped-background {
  /* Crée une transition nette du vert au rouge à 30%-40% */
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* La double position crée un arrêt net */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  /* Crée des sections de couleur distinctes */
  background: linear-gradient(
    to right,
    #4caf50 0% 25%,
    /* Vert de 0% à 25% */ #ffc107 25% 50%,
    /* Jaune de 25% à 50% */ #2196f3 50% 75%,
    /* Bleu de 50% à 75% */ #9c27b0 75% 100% /* Violet de 75% à 100% */
  );
}

Pour les navigateurs qui ne prennent pas en charge cette syntaxe, le bundler CSS de Bun la convertit automatiquement au format traditionnel en dupliquant les arrêts de couleur :

.striped-background {
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* Divisé en deux arrêts de couleur */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  background: linear-gradient(
    to right,
    #4caf50 0%,
    #4caf50 25%,
    /* Deux arrêts pour la section verte */ #ffc107 25%,
    #ffc107 50%,
    /* Deux arrêts pour la section jaune */ #2196f3 50%,
    #2196f3 75%,
    /* Deux arrêts pour la section bleue */ #9c27b0 75%,
    #9c27b0 100% /* Deux arrêts pour la section violette */
  );
}

Cette conversion vous permet d'utiliser la syntaxe de double position plus propre dans votre code source tout en garantissant que les dégradés s'affichent correctement dans tous les navigateurs.

Police system-ui

La famille de police générique system-ui vous permet d'utiliser la police UI native du périphérique, créant des interfaces qui semblent plus intégrées au système d'exploitation. Cela fournit un aspect et une sensation plus natifs sans avoir à spécifier différentes piles de polices pour chaque plateforme.

.native-interface {
  /* Utiliser la police UI par défaut du système */
  font-family: system-ui;
}

.fallback-aware {
  /* Police system-ui avec fallbacks explicites */
  font-family: system-ui, sans-serif;
}

Pour les navigateurs qui ne prennent pas en charge system-ui, le bundler CSS de Bun l'étend automatiquement en une pile de polices interplateforme complète :

.native-interface {
  /* Étendu pour prendre en charge toutes les principales plateformes */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue";
}

.fallback-aware {
  /* Conserve le fallback original après la pile étendue */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
}

Cette approche vous offre la simplicité d'écrire simplement system-ui dans votre code source tout en garantissant que votre interface s'adapte correctement à tous les systèmes d'exploitation et navigateurs. La pile de polices étendue inclut des polices système appropriées pour macOS/iOS, Windows, Android, Linux, et des fallbacks pour les anciens navigateurs.

Modules CSS

Le bundler de Bun prend également en charge le bundling de modules CSS en plus du CSS régulier avec la prise en charge des fonctionnalités suivantes :

• Détection automatique des fichiers de modules CSS (.module.css) avec zéro configuration
• Composition (propriété composes)
• Importation de modules CSS dans JSX/TSX
• Avertissements/erreurs pour les utilisations invalides de modules CSS

Un module CSS est un fichier CSS (avec l'extension .module.css) où tous les noms de classes et animations sont limités au fichier. Cela vous aide à éviter les collisions de noms de classes car les déclarations CSS sont limitées globalement par défaut.

Sous le capot, le bundler de Bun transforme les noms de classes limités localement en identifiants uniques.

Pour commencer

Créez un fichier CSS avec l'extension .module.css :

.button {
  color: red;
}

.button {
  color: blue;
}

Vous pouvez ensuite importer ce fichier, par exemple dans un fichier TSX :

import styles from "./styles.module.css";
import otherStyles from "./other-styles.module.css";

export default function App() {
  return (
    <>
      <button className={styles.button}>Bouton rouge !</button>
      <button className={otherStyles.button}>Bouton bleu !</button>
    </>
  );
}

L'objet styles issu de l'importation du fichier module CSS sera un objet avec tous les noms de classes comme clés et leurs identifiants uniques comme valeurs :

import styles from "./styles.module.css";
import otherStyles from "./other-styles.module.css";

console.log(styles);
console.log(otherStyles);

Cela affichera :

{
  button: "button_123";
}

{
  button: "button_456";
}

Comme vous pouvez le voir, les noms de classes sont uniques à chaque fichier, évitant toute collision !

Composition

Les modules CSS vous permettent de composer des sélecteurs de classe ensemble. Cela vous permet de réutiliser des règles de style sur plusieurs classes.

Par exemple :

.button {
  composes: background;
  color: red;
}

.background {
  background-color: blue;
}

Serait équivalent à écrire :

.button {
  background-color: blue;
  color: red;
}

.background {
  background-color: blue;
}

Il y a quelques règles à garder à l'esprit lors de l'utilisation de composes :

#button {
  /* Invalide ! `#button` n'est pas un sélecteur de classe */
  composes: background;
}

.button,
.button-secondary {
  /* Invalide ! `.button, .button-secondary` n'est pas un sélecteur simple */
  composes: background;
}

Composer à partir d'un fichier module CSS séparé

Vous pouvez également composer à partir d'un fichier module CSS séparé :

.background {
  background-color: blue;
}

.button {
  composes: background from "./background.module.css";
  color: red;
}