Il bundler di Bun ha supporto integrato per CSS con le seguenti funzionalità:

• Transpilazione di funzionalità moderne/future per funzionare su tutti i browser (incluso il vendor prefixing)
• Minificazione
• CSS Modules
• Tailwind (tramite un plugin nativo del bundler)

Transpilazione

Il bundler CSS di Bun ti permette di usare funzionalità CSS moderne/future senza doversi preoccupare della compatibilità dei browser - tutto grazie alle sue funzionalità di transpilazione e vendor prefixing abilitate di default.

Il parser e bundler CSS di Bun è un port diretto Rust → Zig di LightningCSS, con un approccio al bundling ispirato da esbuild. Il transpiler converte la sintassi CSS moderna in equivalenti retrocompatibili che funzionano su tutti i browser.

NOTE

Un enorme ringraziamento va all'ammirevole lavoro degli autori di LightningCSS e esbuild.

Compatibilità Browser

Di default, il bundler CSS di Bun targetta i seguenti browser:

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

Syntax Lowering

Nesting

La specifica CSS Nesting ti permette di scrivere fogli di stile più concisi e intuitivi annidando i selettori uno dentro l'altro. Invece di ripetere i selettori genitore attraverso il file CSS, puoi scrivere gli stili figli direttamente dentro i loro blocchi genitore.

styles.css

/* Con nesting */
.card {
  background: white;
  border-radius: 4px;

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

  .content {
    padding: 1rem;
  }
}

Il bundler CSS di Bun converte automaticamente questa sintassi annidata in CSS flat tradizionale che funziona su tutti i browser:

styles.css

/* Output compilato */
.card {
  background: white;
  border-radius: 4px;
}

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

.card .content {
  padding: 1rem;
}

Puoi anche annidare media query e altre at-rule dentro i selettori, eliminando la necessità di ripetere pattern di selettori:

styles.css

.responsive-element {
  display: block;

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

Questo compila in:

styles.css

.responsive-element {
  display: block;
}

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

Color mix

La funzione color-mix() ti offre un modo semplice per fondere due colori insieme secondo una proporzione specificata in uno spazio colore scelto. Questa potente funzionalità ti permette di creare variazioni di colore senza calcolare manualmente i valori risultanti.

styles.css

.button {
  /* Miscela blu e rosso nello spazio colore RGB con proporzione 30/70 */
  background-color: color-mix(in srgb, blue 30%, red);

  /* Crea una variante più chiara per lo stato hover */
  &:hover {
    background-color: color-mix(in srgb, blue 30%, red, white 20%);
  }
}

Il bundler CSS di Bun valuta queste miscele di colori a build time quando tutti i valori colore sono noti (non variabili CSS), generando valori colore statici che funzionano su tutti i browser:

styles.css

.button {
  /* Calcolato al colore risultante esatto */
  background-color: #b31a1a;
}

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

Questa funzionalità è particolarmente utile per creare sistemi di colore con sfumature, tinte e accenti derivati programmaticamente senza bisogno di preprocessori o tooling personalizzato.

Colori relativi

CSS ora ti permette di modificare singoli componenti di un colore usando la sintassi dei colori relativi. Questa potente funzionalità ti permette di creare variazioni di colore regolando attributi specifici come luminosità, saturazione o singoli canali senza dover ricalcolare l'intero colore.

styles.css

.theme-color {
  /* Inizia con un colore base e aumenta la luminosità del 15% */
  --accent: lch(from purple calc(l + 15%) c h);

  /* Prendi il nostro blu brand e crea una versione desaturata */
  --subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h);
}

Il bundler CSS di Bun calcola queste modifiche di colore relative a build time (quando non si usano variabili CSS) e genera valori colore statici per la compatibilità con i browser:

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

Questo approccio è estremamente utile per la generazione di temi, creando varianti di colore accessibili o costruendo scale di colore basate su relazioni matematiche invece di hard-codare ogni valore.

Colori LAB

Il CSS moderno supporta spazi colore percettivamente uniformi come LAB, LCH, OKLAB e OKLCH che offrono vantaggi significativi rispetto al RGB tradizionale. Questi spazi colore possono rappresentare colori al di fuori del gamut RGB standard, risultando in design più vivaci e visivamente coerenti.

styles.css

.vibrant-element {
  /* Un rosso vivace che supera i confini del gamut sRGB */
  color: lab(55% 78 35);

  /* Una sfumatura morbida usando lo spazio colore percettivo */
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

Il bundler CSS di Bun converte automaticamente questi formati colore avanzati in alternative retrocompatibili per i browser che non li supportano ancora:

styles.css

.vibrant-element {
  /* Fallback all'approssimazione RGB più vicina */
  color: #ff0f52;
  /* Fallback P3 per browser con supporto gamut più ampio */
  color: color(display-p3 1 0.12 0.37);
  /* Valore originale preservato per browser che lo supportano */
  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));
}

Questo approccio a strati assicura un rendering ottimale del colore su tutti i browser permettendoti di usare le ultime tecnologie colore nei tuoi design.

Funzione color

La funzione color() fornisce un modo standardizzato per specificare colori in vari spazi colore predefiniti, espandendo le opzioni di design oltre lo spazio RGB tradizionale. Questo ti permette di accedere a gamut di colore più ampi e creare design più vivaci.

styles.css

.vivid-element {
  /* Usando lo spazio colore Display P3 per colori gamut più ampio */
  color: color(display-p3 1 0.1 0.3);

  /* Usando lo spazio colore A98 RGB */
  background-color: color(a98-rgb 0.44 0.5 0.37);
}

Per i browser che non supportano ancora queste funzioni colore avanzate, il bundler CSS di Bun fornisce fallback RGB appropriati:

styles.css

.vivid-element {
  /* Fallback RGB prima per massima compatibilità */
  color: #fa1a4c;
  /* Originale mantenuto per browser che lo supportano */
  color: color(display-p3 1 0.1 0.3);

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

Questa funzionalità ti permette di usare spazi colore moderni immediatamente assicurando che i tuoi design rimangano funzionali su tutti i browser, con colori ottimali visualizzati nei browser che li supportano e approssimazioni ragionevoli altrove.

Colori HWB

Il modello colore HWB (Hue, Whiteness, Blackness) fornisce un modo intuitivo per esprimere colori basato su quanto bianco o nero è miscelato con una tonalità pura. Molti designer trovano questo approccio più naturale per creare variazioni di colore rispetto alla manipolazione di valori RGB o HSL.

styles.css

.easy-theming {
  /* Ciano puro senza bianco o nero aggiunto */
  --primary: hwb(180 0% 0%);

  /* Stessa tonalità, ma con 20% di bianco aggiunto (tinta) */
  --primary-light: hwb(180 20% 0%);

  /* Stessa tonalità, ma con 30% di nero aggiunto (ombra) */
  --primary-dark: hwb(180 0% 30%);

  /* Versione smorzata con bianco e nero aggiunti */
  --primary-muted: hwb(180 30% 20%);
}

Il bundler CSS di Bun converte automaticamente i colori HWB in RGB per la compatibilità con tutti i browser:

styles.css

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

Il modello HWB rende particolarmente facile creare variazioni di colore sistematiche per i design system, fornendo un approccio più intuitivo per creare tinte e ombre coerenti rispetto al lavorare direttamente con valori RGB o HSL.

Notazione colore

Il CSS moderno ha introdotto modi più intuitivi e concisi per esprimere i colori. La sintassi colore separata da spazi elimina la necessità di virgole nei valori RGB e HSL, mentre i colori hex con canali alfa forniscono un modo compatto per specificare la trasparenza.

styles.css

.modern-styling {
  /* Notazione RGB separata da spazi (senza virgole) */
  color: rgb(50 100 200);

  /* RGB separato da spazi con alfa */
  border-color: rgba(100 50 200 / 75%);

  /* Hex con canale alfa (8 cifre) */
  background-color: #00aaff80;

  /* HSL con notazione semplificata */
  box-shadow: 0 5px 10px hsl(200 50% 30% / 40%);
}

Il bundler CSS di Bun converte automaticamente questi formati colore moderni per assicurare la compatibilità con i browser più vecchi:

styles.css

.modern-styling {
  /* Convertito in formato con virgole per browser più vecchi */
  color: rgb(50, 100, 200);

  /* Canali alfa gestiti appropriatamente */
  border-color: rgba(100, 50, 200, 0.75);

  /* Hex+alfa convertito in rgba quando necessario */
  background-color: rgba(0, 170, 255, 0.5);

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

Questo processo di conversione ti permette di scrivere CSS più pulito e moderno assicurando che i tuoi stili funzionino correttamente su tutti i browser.

Funzione colore light-dark()

La funzione light-dark() fornisce una soluzione elegante per implementare schemi colore che rispettano la preferenza di sistema dell'utente senza richiedere media query complesse. Questa funzione accetta due valori colore e seleziona automaticamente quello appropriato basato sul contesto dello schema colore corrente.

styles.css

:root {
  /* Definisci supporto schema colore */
  color-scheme: light dark;
}

.themed-component {
  /* Sceglie automaticamente il colore giusto basato sulla preferenza di sistema */
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #eeeeee);
  border-color: light-dark(#dddddd, #555555);
}

/* Sovrascrivi preferenza di sistema quando necessario */
.light-theme {
  color-scheme: light;
}

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

Per i browser che non supportano ancora questa funzionalità, il bundler CSS di Bun la converte per usare variabili CSS con fallback appropriati:

styles.css

: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);
}

Questo approccio ti offre un modo pulito per gestire temi chiari e scuri senza duplicare stili o scrivere media query complesse, mantenendo la compatibilità con i browser che non supportano ancora nativamente la funzionalità.

Proprietà logiche

Le proprietà logiche CSS ti permettono di definire layout, spaziatura e dimensioni relative alla modalità di scrittura del documento e direzione del testo piuttosto che alle direzioni fisiche dello schermo. Questo è cruciale per creare layout veramente internazionali che si adattano automaticamente a diversi sistemi di scrittura.

styles.css

.multilingual-component {
  /* Margine che si adatta alla direzione di scrittura */
  margin-inline-start: 1rem;

  /* Padding che ha senso indipendentemente dalla direzione del testo */
  padding-block: 1rem 2rem;

  /* Raggio bordo per l'angolo iniziale in alto */
  border-start-start-radius: 4px;

  /* Dimensione che rispetta la modalità di scrittura */
  inline-size: 80%;
  block-size: auto;
}

Per i browser che non supportano completamente le proprietà logiche, il bundler CSS di Bun le compila in proprietà fisiche con aggiustamenti direzionali appropriati:

styles.css

/* Per lingue da sinistra a destra */
.multilingual-component:dir(ltr) {
  margin-left: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-left-radius: 4px;
  width: 80%;
  height: auto;
}

/* Per lingue da destra a sinistra */
.multilingual-component:dir(rtl) {
  margin-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-right-radius: 4px;
  width: 80%;
  height: auto;
}

Se il selettore :dir() non è supportato, vengono generati automaticamente fallback aggiuntivi per assicurare che i tuoi layout funzionino correttamente su tutti i browser e sistemi di scrittura. Questo rende la creazione di design internazionalizzati molto più semplice mantenendo la compatibilità con i browser più vecchi.

Selettore :dir()

Il selettore pseudo-classe :dir() ti permette di stilizzare elementi basati sulla loro direzione del testo (RTL o LTR), fornendo un modo potente per creare design direction-aware senza JavaScript. Questo selettore corrisponde agli elementi basati sulla loro direzionalità come determinata dal documento o attributi di direzione espliciti.

styles.css

/* Applica stili diversi basati sulla direzione del testo */
.nav-arrow:dir(ltr) {
  transform: rotate(0deg);
}

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

/* Posiziona elementi basati sul flusso del testo */
.sidebar:dir(ltr) {
  border-right: 1px solid #ddd;
}

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

Per i browser che non supportano ancora il selettore :dir(), il bundler CSS di Bun lo converte nel selettore :lang() più ampiamente supportato con mappature linguistiche appropriate:

styles.css

/* Convertito per usare selettori basati su lingua come 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;
}

Questa conversione ti permette di scrivere CSS direction-aware che funziona in modo affidabile su tutti i browser, anche quelli che non supportano ancora nativamente il selettore :dir(). Se più argomenti a :lang() non sono supportati, vengono forniti automaticamente ulteriori fallback.

Selettore :lang()

Il selettore pseudo-classe :lang() ti permette di targettare elementi basati sulla lingua in cui si trovano, rendendo facile applicare stili specifici per lingua. Il CSS moderno permette al selettore :lang() di accettare più codici lingua, permettendoti di raggruppare regole specifiche per lingua in modo più efficiente.

styles.css

/* Aggiustamenti tipografici per lingue CJK */
:lang(zh, ja, ko) {
  line-height: 1.8;
  font-size: 1.05em;
}

/* Stili citazione diversi per gruppo linguistico */
blockquote:lang(fr, it, es, pt) {
  font-style: italic;
}

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

Per i browser che non supportano più argomenti nel selettore :lang(), il bundler CSS di Bun converte questa sintassi per usare il selettore :is() per mantenere lo stesso comportamento:

styles.css

/* Più lingue raggruppate con :is() per miglior supporto browser */
: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;
}

Se necessario, Bun può fornire ulteriori fallback per :is() anche, assicurando che i tuoi stili specifici per lingua funzionino su tutti i browser. Questo approccio semplifica la creazione di design internazionalizzati con regole tipografiche e di stile distinte per diversi gruppi linguistici.

Selettore :is()

La funzione pseudo-classe :is() (precedentemente :matches()) ti permette di creare selettori più concisi e leggibili raggruppando più selettori insieme. Accetta una lista di selettori come argomento e corrisponde se uno qualsiasi dei selettori in quella lista corrisponde, riducendo significativamente la ripetizione nel tuo CSS.

styles.css

/* Invece di scrivere questi separatamente */
/* 
.article h1,
.article h2,
.article h3 {
  margin-top: 1.5em;
}
*/

/* Puoi scrivere questo */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* Esempio complesso con più gruppi */
:is(header, main, footer) :is(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

Per i browser che non supportano :is(), il bundler CSS di Bun fornisce fallback usando alternative con prefisso vendor:

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

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

/* Originale preservato per browser moderni */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* Esempio complesso con fallback */
:-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;
}

Selettore :not()

La pseudo-classe :not() ti permette di escludere elementi che corrispondono a un selettore specifico. La versione moderna di questo selettore accetta più argomenti, permettendoti di escludere più pattern con un singolo selettore conciso.

styles.css

/* Seleziona tutti i bottoni eccetto le varianti primary e secondary */
button:not(.primary, .secondary) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* Applica stili a tutti i titoli eccetto quelli dentro sidebar o footer */
h2:not(.sidebar *, footer *) {
  margin-top: 2em;
}

Per i browser che non supportano più argomenti in :not(), il bundler CSS di Bun converte questa sintassi in una forma più compatibile preservando lo stesso comportamento:

styles.css

/* Convertito per usare :not con :is() per compatibilità */
button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

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

E se :is() non è supportato, Bun può generare ulteriori fallback:

styles.css

/* Ancora più fallback per massima compatibilità */
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;
}

Questa conversione assicura che i tuoi selettori negativi funzionino correttamente su tutti i browser mantenendo la specificità corretta e il comportamento del selettore originale.

Funzioni matematiche

CSS ora include un ricco set di funzioni matematiche che ti permettono di eseguire calcoli complessi direttamente nei tuoi fogli di stile. Queste includono funzioni matematiche standard (round(), mod(), rem(), abs(), sign()), funzioni trigonometriche (sin(), cos(), tan(), asin(), acos(), atan(), atan2()), e funzioni esponenziali (pow(), sqrt(), exp(), log(), hypot()).

styles.css

.dynamic-sizing {
  /* Clampa un valore tra minimo e massimo */
  width: clamp(200px, 50%, 800px);

  /* Arrotonda al multiplo più vicino */
  padding: round(14.8px, 5px);

  /* Trigonometria per animazioni o layout */
  transform: rotate(calc(sin(45deg) * 50deg));

  /* Matematica complessa con più funzioni */
  --scale-factor: pow(1.25, 3);
  font-size: calc(16px * var(--scale-factor));
}

Il bundler CSS di Bun valuta queste espressioni matematiche a build time quando tutti i valori sono costanti note (non variabili), risultando in output ottimizzato:

styles.css

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

Questo approccio ti permette di scrivere CSS più espressivo e manutenibile con relazioni matematiche significative, che viene poi compilato in valori ottimizzati per massima compatibilità e prestazioni browser.

Intervalli media query

Il CSS moderno supporta una sintassi intuitiva per gli intervalli nelle media query, permettendoti di specificare breakpoint usando operatori di confronto come <, >, <=, e >= invece dei prefissi min- e max- più verbosi. Questa sintassi è più leggibile e corrisponde a come normalmente pensiamo a valori e intervalli.

styles.css

/* Sintassi moderna con operatori di confronto */
@media (width >= 768px) {
  .container {
    max-width: 720px;
  }
}

/* Intervallo inclusivo usando <= e >= */
@media (768px <= width <= 1199px) {
  .sidebar {
    display: flex;
  }
}

/* Intervallo esclusivo usando < e > */
@media (width > 320px) and (width < 768px) {
  .mobile-only {
    display: block;
  }
}

Il bundler CSS di Bun converte queste query di intervallo moderne in sintassi media query tradizionale per la compatibilità con tutti i browser:

styles.css

/* Convertito in sintassi min/max tradizionale */
@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;
  }
}

Questo ti permette di scrivere media query più intuitive e matematiche assicurando che i tuoi fogli di stile funzionino correttamente su tutti i browser, inclusi quelli che non supportano la sintassi di intervallo moderna.

Shorthand

CSS ha introdotto diverse proprietà shorthand moderne che migliorano la leggibilità e manutenibilità del codice. Il bundler CSS di Bun assicura che questi shorthand convenienti funzionino su tutti i browser convertendoli nei loro equivalenti longhand quando necessario.

styles.css

/* Shorthand allineamento */
.flex-container {
  /* Shorthand per align-items e justify-items */
  place-items: center start;

  /* Shorthand per align-content e justify-content */
  place-content: space-between center;
}

.grid-item {
  /* Shorthand per align-self e justify-self */
  place-self: end center;
}

/* Overflow a due valori */
.content-box {
  /* Primo valore per orizzontale, secondo per verticale */
  overflow: hidden auto;
}

/* text-decoration migliorata */
.fancy-link {
  /* Combina più proprietà di decorazione testo */
  text-decoration: underline dotted blue 2px;
}

/* Sintassi display a due valori */
.component {
  /* Tipo display outer + tipo display inner */
  display: inline flex;
}

Per i browser che non supportano questi shorthand moderni, Bun li converte nelle loro proprietà longhand componente:

styles.css

.flex-container {
  /* Proprietà allineamento espanse */
  align-items: center;
  justify-items: start;

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

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

.content-box {
  /* Proprietà overflow separate */
  overflow-x: hidden;
  overflow-y: auto;
}

.fancy-link {
  /* Proprietà decorazione testo individuali */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: blue;
  text-decoration-thickness: 2px;
}

.component {
  /* Display a valore singolo */
  display: inline-flex;
}

Questa conversione assicura che i tuoi fogli di stile rimangano puliti e manutenibili fornendo la più ampia compatibilità browser possibile.

Gradienti doppia posizione

La sintassi gradiente doppia posizione è una funzionalità CSS moderna che ti permette di creare interruzioni di colore nette nei gradienti specificando lo stesso colore in due posizioni adiacenti. Questo crea una transizione netta invece di una sfumatura morbida, utile per creare strisce, bande di colore e altri design multi-colore.

styles.css

.striped-background {
  /* Crea una transizione netta da verde a rosso al 30%-40% */
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* Doppia posizione crea interruzione netta */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  /* Crea sezioni colore distinte */
  background: linear-gradient(
    to right,
    #4caf50 0% 25%,
    /* Verde da 0% a 25% */ #ffc107 25% 50%,
    /* Giallo da 25% a 50% */ #2196f3 50% 75%,
    /* Blu da 50% a 75% */ #9c27b0 75% 100% /* Viola da 75% a 100% */
  );
}

Per i browser che non supportano questa sintassi, il bundler CSS di Bun la converte automaticamente nel formato tradizionale duplicando le interruzioni di colore:

styles.css

.striped-background {
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* Diviso in due interruzioni colore */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  background: linear-gradient(
    to right,
    #4caf50 0%,
    #4caf50 25%,
    /* Due interruzioni per sezione verde */ #ffc107 25%,
    #ffc107 50%,
    /* Due interruzioni per sezione gialla */ #2196f3 50%,
    #2196f3 75%,
    /* Due interruzioni per sezione blu */ #9c27b0 75%,
    #9c27b0 100% /* Due interruzioni per sezione viola */
  );
}

Questa conversione ti permette di usare la sintassi doppia posizione più pulita nel tuo codice sorgente assicurando che i gradienti vengano visualizzati correttamente in tutti i browser.

Font system-ui

La famiglia font generica system-ui ti permette di usare il font UI nativo del dispositivo, creando interfacce che si sentono più integrate con il sistema operativo. Questo fornisce un look and feel più nativo senza dover specificare diversi font stack per ogni piattaforma.

styles.css

.native-interface {
  /* Usa il font UI predefinito del sistema */
  font-family: system-ui;
}

.fallback-aware {
  /* Font system UI con fallback espliciti */
  font-family: system-ui, sans-serif;
}

Per i browser che non supportano system-ui, il bundler CSS di Bun lo espande automaticamente in un font stack cross-platform completo:

styles.css

.native-interface {
  /* Espanso per supportare tutte le principali piattaforme */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue";
}

.fallback-aware {
  /* Preserva il fallback originale dopo lo stack espanso */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
}

Questo approccio ti offre la semplicità di scrivere solo system-ui nel tuo codice sorgente assicurando che la tua interfaccia si adatti correttamente a tutti i sistemi operativi e browser. Lo stack font espanso include font di sistema appropriati per macOS/iOS, Windows, Android, Linux e fallback per browser più vecchi.

CSS Modules

Il bundler di Bun supporta anche il bundling di CSS modules oltre al CSS regolare con supporto per le seguenti funzionalità:

• Rilevamento automatico dei file CSS module (.module.css) con zero configurazione
• Composizione (proprietà composes)
• Importazione di CSS modules in JSX/TSX
• Avvisi/errori per usi non validi di CSS modules

Un CSS module è un file CSS (con l'estensione .module.css) dove tutti i nomi di classe e animazioni sono scope al file. Questo ti aiuta a evitare collisioni di nomi di classe poiché le dichiarazioni CSS sono scope globalmente di default.

Sotto il cofano, il bundler di Bun trasforma i nomi di classe scope localmente in identificatori unici.

Iniziare

Crea un file CSS con l'estensione .module.css:

styles.module.css

.button {
  color: red;
}

other-styles.module.css

.button {
  color: blue;
}

Puoi poi importare questo file, per esempio in un file TSX:

app.tsx

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

export default function App() {
  return (
    <>
      <button className={styles.button}>Bottone rosso!</button>
      <button className={otherStyles.button}>Bottone blu!</button>
    </>
  );
}

L'oggetto styles dall'importazione del file CSS module sarà un oggetto con tutti i nomi di classe come chiavi e i loro identificatori unici come valori:

app.tsx

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

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

Questo produrrà:

app.tsx

{
  button: "button_123";
}

{
  button: "button_456";
}

Come puoi vedere, i nomi di classe sono unici per ogni file, evitando qualsiasi collisione!

Composizione

I CSS modules ti permettono di comporre selettori di classe insieme. Questo ti permette di riutilizzare regole di stile attraverso più classi.

Per esempio:

styles.module.css

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

.background {
  background-color: blue;
}

Sarebbe lo stesso di scrivere:

styles.module.css

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

.background {
  background-color: blue;
}

Ci sono un paio di regole da tenere a mente quando si usa composes:

styles.module.css

#button {
  /* Non valido! `#button` non è un selettore di classe */
  composes: background;
}

.button,
.button-secondary {
  /* Non valido! `.button, .button-secondary` non è un selettore semplice */
  composes: background;
}

Comporre da un file CSS module separato

Puoi anche comporre da un file CSS module separato:

background.module.css

.background {
  background-color: blue;
}

styles.module.css

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