Buns Bundler verfügt über integrierte Unterstützung für CSS mit den folgenden Funktionen:

• Transpilierung moderner/zukünftiger Funktionen für alle Browser (einschließlich Vendor-Prefixing)
• Minifizierung
• CSS-Module
• Tailwind (über ein natives Bundler-Plugin)

Transpilierung

Mit Buns CSS-Bundler können Sie moderne/zukünftige CSS-Funktionen verwenden, ohne sich um Browser-Kompatibilität sorgen zu müssen – alles dank der Transpilierungs- und Vendor-Prefixing-Funktionen, die standardmäßig aktiviert sind.

Buns CSS-Parser und Bundler ist ein direkter Rust → Zig Port von LightningCSS, mit einem Bündelungsansatz, der von esbuild inspiriert ist. Der Transpiler konvertiert moderne CSS-Syntax in abwärtskompatible Äquivalente, die browserübergreifend funktionieren.

NOTE

Ein großes Dankeschön geht an die erstaunliche Arbeit der Autoren von LightningCSS und esbuild.

Browser-Kompatibilität

Standardmäßig zielt Buns CSS-Bundler auf die folgenden Browser ab:

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

Syntax-Reduzierung

Nesting

Die CSS-Nesting-Spezifikation ermöglicht es Ihnen, präzisere und intuitivere Stylesheets zu schreiben, indem Selektoren ineinander verschachtelt werden. Anstatt Eltern-Selektoren in Ihrer CSS-Datei zu wiederholen, können Sie Kind-Stile direkt innerhalb ihrer Eltern-Blöcke schreiben.

styles.css

/* Mit Nesting */
.card {
  background: white;
  border-radius: 4px;

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

  .content {
    padding: 1rem;
  }
}

Buns CSS-Bundler konvertiert diese verschachtelte Syntax automatisch in traditionelles flaches CSS, das in allen Browsern funktioniert:

styles.css

/* Kompilierte Ausgabe */
.card {
  background: white;
  border-radius: 4px;
}

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

.card .content {
  padding: 1rem;
}

Sie können auch Media Queries und andere At-Regeln innerhalb von Selektoren verschachteln, wodurch die Notwendigkeit entfällt, Selektor-Muster zu wiederholen:

styles.css

.responsive-element {
  display: block;

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

Dies kompiliert zu:

styles.css

.responsive-element {
  display: block;
}

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

Color mix

Die color-mix()-Funktion bietet eine einfache Möglichkeit, zwei Farben gemäß einem angegebenen Verhältnis in einem gewählten Farbraum zu mischen. Diese leistungsstarke Funktion ermöglicht es Ihnen, Farbvariationen zu erstellen, ohne die resultierenden Werte manuell berechnen zu müssen.

styles.css

.button {
  /* Mischt Blau und Rot im RGB-Farbraum mit einem 30/70-Verhältnis */
  background-color: color-mix(in srgb, blue 30%, red);

  /* Erstellt eine hellere Variante für den Hover-Zustand */
  &:hover {
    background-color: color-mix(in srgb, blue 30%, red, white 20%);
  }
}

Buns CSS-Bundler wertet diese Farbmischungen zur Build-Zeit aus, wenn alle Farbwerte bekannt sind (keine CSS-Variablen), und generiert statische Farbwerte, die in allen Browsern funktionieren:

styles.css

.button {
  /* Berechnet auf die exakte resultierende Farbe */
  background-color: #b31a1a;
}

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

Diese Funktion ist besonders nützlich für die Erstellung von Farbsystemen mit programmatisch abgeleiteten Schattierungen, Tönungen und Akzenten ohne Präprozessoren oder benutzerdefinierte Tools.

Relative Farben

CSS ermöglicht es Ihnen nun, einzelne Komponenten einer Farbe mit relativer Farbsyntax zu modifizieren. Diese leistungsstarke Funktion ermöglicht es Ihnen, Farbvariationen zu erstellen, indem Sie spezifische Attribute wie Helligkeit, Sättigung oder einzelne Kanäle anpassen, ohne die gesamte Farbe neu berechnen zu müssen.

styles.css

.theme-color {
  /* Beginnt mit einer Basisfarbe und erhöht die Helligkeit um 15% */
  --accent: lch(from purple calc(l + 15%) c h);

  /* Nimmt unser Markenblau und erstellt eine entsättigte Version */
  --subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h);
}

Buns CSS-Bundler berechnet diese relativen Farbmodifikationen zur Build-Zeit (wenn keine CSS-Variablen verwendet werden) und generiert statische Farbwerte für Browser-Kompatibilität:

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

Dieser Ansatz ist äußerst nützlich für die Theme-Generierung, die Erstellung zugänglicher Farbvarianten oder den Aufbau von Farbskalen basierend auf mathematischen Beziehungen, anstatt jeden Wert hart zu kodieren.

LAB-Farben

Modernes CSS unterstützt wahrnehmungsgleichmäßige Farbräume wie LAB, LCH, OKLAB und OKLCH, die erhebliche Vorteile gegenüber traditionellem RGB bieten. Diese Farbräume können Farben außerhalb des Standard-RGB-Gamuts darstellen, was zu lebendigeren und visuell konsistenteren Designs führt.

styles.css

.vibrant-element {
  /* Ein lebendiges Rot, das sRGB-Gamut-Grenzen überschreitet */
  color: lab(55% 78 35);

  /* Ein sanfter Verlauf mit wahrnehmendem Farbraum */
  background: linear-gradient(to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg));
}

Buns CSS-Bundler konvertiert diese erweiterten Farbformate automatisch in abwärtskompatible Alternativen für Browser, die sie noch nicht unterstützen:

styles.css

.vibrant-element {
  /* Fallback zur nächsten RGB-Annäherung */
  color: #ff0f52;
  /* P3-Fallback für Browser mit breiterer Gamut-Unterstützung */
  color: color(display-p3 1 0.12 0.37);
  /* Originalwert für Browser erhalten, die ihn unterstützen */
  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));
}

Dieser geschichtete Ansatz gewährleistet eine optimale Farbwiedergabe über alle Browser hinweg und ermöglicht es Ihnen, die neuesten Farbtechnologien in Ihren Designs zu verwenden.

Color-Funktion

Die color()-Funktion bietet eine standardisierte Möglichkeit, Farben in verschiedenen vordefinierten Farbräumen anzugeben und erweitert Ihre Designoptionen über den traditionellen RGB-Raum hinaus. Dies ermöglicht Ihnen den Zugriff auf breitere Farbgamuts und die Erstellung lebendigerer Designs.

styles.css

.vivid-element {
  /* Verwendet den Display-P3-Farbraum für breitere Gamut-Farben */
  color: color(display-p3 1 0.1 0.3);

  /* Verwendet A98-RGB-Farbraum */
  background-color: color(a98-rgb 0.44 0.5 0.37);
}

Für Browser, die diese erweiterten Farbfunktionen noch nicht unterstützen, bietet Buns CSS-Bundler geeignete RGB-Fallbacks:

styles.css

.vivid-element {
  /* RGB-Fallback zuerst für maximale Kompatibilität */
  color: #fa1a4c;
  /* Original für Browser erhalten, die es unterstützen */
  color: color(display-p3 1 0.1 0.3);

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

Diese Funktionalität ermöglicht es Ihnen, moderne Farbräume sofort zu verwenden und gleichzeitig sicherzustellen, dass Ihre Designs browserübergreifend funktionsfähig bleiben, mit optimalen Farben in unterstützenden Browsern und angemessenen Annäherungen anderswo.

HWB-Farben

Das HWB-Farbmodell (Hue, Whiteness, Blackness) bietet eine intuitive Möglichkeit, Farben basierend darauf auszudrücken, wie viel Weiß oder Schwarz mit einem reinen Farbton gemischt wird. Viele Designer finden diesen Ansatz natürlicher für die Erstellung von Farbvariationen im Vergleich zur Manipulation von RGB- oder HSL-Werten.

styles.css

.easy-theming {
  /* Reines Cyan ohne Weiß oder Schwarz hinzugefügt */
  --primary: hwb(180 0% 0%);

  /* Gleicher Farbton, aber mit 20% Weiß hinzugefügt (Tönung) */
  --primary-light: hwb(180 20% 0%);

  /* Gleicher Farbton, aber mit 30% Schwarz hinzugefügt (Schattierung) */
  --primary-dark: hwb(180 0% 30%);

  /* Gedämpfte Version mit sowohl Weiß als auch Schwarz hinzugefügt */
  --primary-muted: hwb(180 30% 20%);
}

Buns CSS-Bundler konvertiert HWB-Farben automatisch in RGB für Kompatibilität mit allen Browsern:

styles.css

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

Das HWB-Modell macht es besonders einfach, systematische Farbvariationen für Design-Systeme zu erstellen und bietet einen intuitiveren Ansatz für die Erstellung konsistenter Tönungen und Schattierungen als die direkte Arbeit mit RGB- oder HSL-Werten.

Farbnotation

Modernes CSS hat intuitivere und prägnantere Möglichkeiten zur Darstellung von Farben eingeführt. Die durch Leerzeichen getrennte Farbsyntax eliminiert die Notwendigkeit von Kommas in RGB- und HSL-Werten, während Hex-Farben mit Alpha-Kanälen eine kompakte Möglichkeit zur Angabe von Transparenz bieten.

styles.css

.modern-styling {
  /* Durch Leerzeichen getrennte RGB-Notation (keine Kommas) */
  color: rgb(50 100 200);

  /* Durch Leerzeichen getrenntes RGB mit Alpha */
  border-color: rgba(100 50 200 / 75%);

  /* Hex mit Alpha-Kanal (8 Ziffern) */
  background-color: #00aaff80;

  /* HSL mit vereinfachter Notation */
  box-shadow: 0 5px 10px hsl(200 50% 30% / 40%);
}

Buns CSS-Bundler konvertiert diese modernen Farbformate automatisch, um Kompatibilität mit älteren Browsern sicherzustellen:

styles.css

.modern-styling {
  /* Für ältere Browser in Komma-Format konvertiert */
  color: rgb(50, 100, 200);

  /* Alpha-Kanäle entsprechend behandelt */
  border-color: rgba(100, 50, 200, 0.75);

  /* Hex+Alpha bei Bedarf in rgba konvertiert */
  background-color: rgba(0, 170, 255, 0.5);

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

Dieser Konvertierungsprozess ermöglicht es Ihnen, saubereres, moderneres CSS zu schreiben und gleichzeitig sicherzustellen, dass Ihre Styles browserübergreifend korrekt funktionieren.

light-dark()-Farbfunktion

Die light-dark()-Funktion bietet eine elegante Lösung für die Implementierung von Farbschemata, die die Systemeinstellung des Benutzers respektieren, ohne komplexe Media Queries zu erfordern. Diese Funktion akzeptiert zwei Farbwerte und wählt automatisch den geeigneten basierend auf dem aktuellen Farbschema-Kontext aus.

styles.css

:root {
  /* Farbschema-Unterstützung definieren */
  color-scheme: light dark;
}

.themed-component {
  /* Wählt automatisch die richtige Farbe basierend auf Systemeinstellung */
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #eeeeee);
  border-color: light-dark(#dddddd, #555555);
}

/* Systemeinstellung bei Bedarf überschreiben */
.light-theme {
  color-scheme: light;
}

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

Für Browser, die diese Funktion noch nicht unterstützen, konvertiert Buns CSS-Bundler sie zur Verwendung von CSS-Variablen mit geeigneten Fallbacks:

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

Dieser Ansatz bietet eine saubere Möglichkeit, helle und dunkle Themes zu handhaben, ohne Styles zu duplizieren oder komplexe Media Queries zu schreiben, während die Kompatibilität mit Browsern erhalten bleibt, die die Funktion noch nicht nativ unterstützen.

Logische Eigenschaften

CSS-logische Eigenschaften ermöglichen es Ihnen, Layout, Abstand und Größe relativ zum Schreibmodus und zur Textrichtung des Dokuments zu definieren, anstatt zu physischen Bildschirmrichtungen. Dies ist entscheidend für die Erstellung wirklich internationaler Layouts, die sich automatisch an verschiedene Schriftsysteme anpassen.

styles.css

.mehrsprachige-komponente {
  /* Margin, das sich an die Schreibrichtung anpasst */
  margin-inline-start: 1rem;

  /* Padding, das unabhängig von der Textrichtung Sinn ergibt */
  padding-block: 1rem 2rem;

  /* Border-Radius für die Startecke oben */
  border-start-start-radius: 4px;

  /* Größe, die den Schreibmodus respektiert */
  inline-size: 80%;
  block-size: auto;
}

Für Browser, die logische Eigenschaften nicht vollständig unterstützen, kompiliert Buns CSS-Bundler sie zu physischen Eigenschaften mit entsprechenden Richtungsanpassungen:

styles.css

/* Für Links-nach-Rechts-Sprachen */
.mehrsprachige-komponente:dir(ltr) {
  margin-left: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-left-radius: 4px;
  width: 80%;
  height: auto;
}

/* Für Rechts-nach-Links-Sprachen */
.mehrsprachige-komponente:dir(rtl) {
  margin-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top-right-radius: 4px;
  width: 80%;
  height: auto;
}

Wenn der :dir()-Selektor nicht unterstützt wird, werden zusätzliche Fallbacks automatisch generiert, um sicherzustellen, dass Ihre Layouts über alle Browser und Schriftsysteme hinweg ordnungsgemäß funktionieren. Dies macht die Erstellung internationalisierter Designs viel einfacher und erhält gleichzeitig die Kompatibilität mit älteren Browsern.

:dir()-Selektor

Der :dir()-Pseudo-Klassen-Selektor ermöglicht es Ihnen, Elemente basierend auf ihrer Textrichtung (RTL oder LTR) zu stylen und bietet eine leistungsstarke Möglichkeit, richtungsbewusste Designs ohne JavaScript zu erstellen. Dieser Selektor passt Elemente basierend auf ihrer durch das Dokument oder explizite Richtungsattribute bestimmten Directionalität an.

styles.css

/* Unterschiedliche Styles basierend auf Textrichtung anwenden */
.nav-arrow:dir(ltr) {
  transform: rotate(0deg);
}

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

/* Elemente basierend auf Textfluss positionieren */
.sidebar:dir(ltr) {
  border-right: 1px solid #ddd;
}

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

Für Browser, die den :dir()-Selektor noch nicht unterstützen, konvertiert Buns CSS-Bundler ihn in den breiter unterstützten :lang()-Selektor mit entsprechenden Sprachzuordnungen:

styles.css

/* Zur Verwendung sprachbasierter Selektoren als Fallback konvertiert */
.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;
}

Diese Konvertierung ermöglicht es Ihnen, richtungsbewusstes CSS zu schreiben, das browserübergreifend zuverlässig funktioniert, auch in Browsern, die den :dir()-Selektor noch nicht nativ unterstützen. Wenn mehrere Argumente für :lang() nicht unterstützt werden, werden weitere Fallbacks automatisch bereitgestellt.

:lang()-Selektor

Der :lang()-Pseudo-Klassen-Selektor ermöglicht es Ihnen, Elemente basierend auf der Sprache, in der sie sich befinden, anzusprechen und macht es einfach, sprachspezifisches Styling anzuwenden. Modernes CSS erlaubt dem :lang()-Selektor, mehrere Sprachcodes zu akzeptieren, wodurch Sie sprachspezifische Regeln effizienter gruppieren können.

styles.css

/* Typografie-Anpassungen für CJK-Sprachen */
:lang(zh, ja, ko) {
  line-height: 1.8;
  font-size: 1.05em;
}

/* Unterschiedliche Zitatstile nach Sprachgruppe */
blockquote:lang(fr, it, es, pt) {
  font-style: italic;
}

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

Für Browser, die mehrere Argumente im :lang()-Selektor nicht unterstützen, konvertiert Buns CSS-Bundler diese Syntax zur Verwendung des :is()-Selektors, um das gleiche Verhalten beizubehalten:

styles.css

/* Mehrere Sprachen mit :is() für bessere Browser-Unterstützung gruppiert */
: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;
}

Bei Bedarf kann Bun zusätzliche Fallbacks für :is() bereitstellen und sicherstellen, dass Ihre sprachspezifischen Styles browserübergreifend funktionieren. Dieser Ansatz vereinfacht die Erstellung internationalisierter Designs mit unterschiedlichen typografischen und Styling-Regeln für verschiedene Sprachgruppen.

:is()-Selektor

Die :is()-Pseudo-Klassen-Funktion (früher :matches()) ermöglicht es Ihnen, prägnantere und lesbarere Selektoren zu erstellen, indem Sie mehrere Selektoren zusammen gruppieren. Sie akzeptiert eine Selektor-Liste als Argument und passt, wenn einer der Selektoren in dieser Liste passt, was die Wiederholung in Ihrem CSS erheblich reduziert.

styles.css

/* Anstatt diese separat zu schreiben */
/* 
.article h1,
.article h2,
.article h3 {
  margin-top: 1.5em;
}
*/

/* Können Sie dies schreiben */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* Komplexes Beispiel mit mehreren Gruppen */
:is(header, main, footer) :is(h1, h2, .title) {
  font-family: "Heading Font", sans-serif;
}

Für Browser, die :is() nicht unterstützen, bietet Buns CSS-Bundler Fallbacks mit Hersteller-Präfixen:

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

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

/* Original für moderne Browser erhalten */
.article :is(h1, h2, h3) {
  margin-top: 1.5em;
}

/* Komplexes Beispiel mit 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;
}

:not()-Selektor

Die :not()-Pseudo-Klasse ermöglicht es Ihnen, Elemente auszuschließen, die einem bestimmten Selektor entsprechen. Die moderne Version dieses Selektors akzeptiert mehrere Argumente und ermöglicht es Ihnen, mehrere Muster mit einem einzigen, prägnanten Selektor auszuschließen.

styles.css

/* Alle Buttons außer Primary- und Secondary-Varianten auswählen */
button:not(.primary, .secondary) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/* Styles auf alle Überschriften außer denen in Sidebars oder Footern anwenden */
h2:not(.sidebar *, footer *) {
  margin-top: 2em;
}

Für Browser, die mehrere Argumente in :not() nicht unterstützen, konvertiert Buns CSS-Bundler diese Syntax in eine kompatibelere Form unter Beibehaltung des gleichen Verhaltens:

styles.css

/* Zur Verwendung von :not mit :is() für Kompatibilität konvertiert */
button:not(:is(.primary, .secondary)) {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

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

Und wenn :is() nicht unterstützt wird, kann Bun weitere Fallbacks generieren:

styles.css

/* Noch mehr Fallbacks für maximale Kompatibilität */
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;
}

Diese Konvertierung stellt sicher, dass Ihre negativen Selektoren browserübergreifend korrekt funktionieren und dabei die korrekte Spezifität und das Verhalten des ursprünglichen Selektors beibehalten.

Mathematische Funktionen

CSS umfasst nun eine reiche Auswahl mathematischer Funktionen, mit denen Sie komplexe Berechnungen direkt in Ihren Stylesheets durchführen können. Dazu gehören Standard-Mathematikfunktionen (round(), mod(), rem(), abs(), sign()), trigonometrische Funktionen (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) und Exponentialfunktionen (pow(), sqrt(), exp(), log(), hypot()).

styles.css

.dynamic-sizing {
  /* Einen Wert zwischen Minimum und Maximum klemmen */
  width: clamp(200px, 50%, 800px);

  /* Auf das nächste Vielfache runden */
  padding: round(14.8px, 5px);

  /* Trigonometrie für Animationen oder Layouts */
  transform: rotate(calc(sin(45deg) * 50deg));

  /* Komplexe Mathematik mit mehreren Funktionen */
  --scale-factor: pow(1.25, 3);
  font-size: calc(16px * var(--scale-factor));
}

Buns CSS-Bundler wertet diese mathematischen Ausdrücke zur Build-Zeit aus, wenn alle Werte bekannte Konstanten sind (keine Variablen), was zu optimierter Ausgabe führt:

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

Dieser Ansatz ermöglicht es Ihnen, ausdrucksstärkeres und wartbareres CSS mit aussagekräftigen mathematischen Beziehungen zu schreiben, das dann zu optimierten Werten für maximale Browser-Kompatibilität und Leistung kompiliert wird.

Media-Query-Bereiche

Modernes CSS unterstützt intuitive Bereichssyntax für Media Queries und ermöglicht es Ihnen, Breakpoints mit Vergleichsoperatoren wie <, >, <= und >= anstelle der umständlicheren min- und max--Präfixe anzugeben. Diese Syntax ist lesbarer und entspricht der Art, wie wir normalerweise über Werte und Bereiche denken.

styles.css

/* Moderne Syntax mit Vergleichsoperatoren */
@media (width >= 768px) {
  .container {
    max-width: 720px;
  }
}

/* Inklusiver Bereich mit <= und >= */
@media (768px <= width <= 1199px) {
  .sidebar {
    display: flex;
  }
}

/* Exklusiver Bereich mit < und > */
@media (width > 320px) and (width < 768px) {
  .mobile-only {
    display: block;
  }
}

Buns CSS-Bundler konvertiert diese modernen Bereichsabfragen in traditionelle Media-Query-Syntax für Kompatibilität mit allen Browsern:

styles.css

/* In traditionelle min/max-Syntax konvertiert */
@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;
  }
}

Dies ermöglicht es Ihnen, intuitivere und mathematischere Media Queries zu schreiben und gleichzeitig sicherzustellen, dass Ihre Stylesheets browserübergreifend korrekt funktionieren, einschließlich solcher, die die moderne Bereichssyntax nicht unterstützen.

Kurzschreibweisen

CSS hat mehrere moderne Kurzschreibweisen-Eigenschaften eingeführt, die die Code-Lesbarkeit und Wartbarkeit verbessern. Buns CSS-Bundler stellt sicher, dass diese praktischen Kurzschreibweisen auf allen Browsern funktionieren, indem sie bei Bedarf in ihre Langschreibweisen-Äquivalente konvertiert werden.

styles.css

/* Ausrichtungs-Kurzschreibweisen */
.flex-container {
  /* Kurzschreibweise für align-items und justify-items */
  place-items: center start;

  /* Kurzschreibweise für align-content und justify-content */
  place-content: space-between center;
}

.grid-item {
  /* Kurzschreibweise für align-self und justify-self */
  place-self: end center;
}

/* Zwei-Wert-Overflow */
.content-box {
  /* Erster Wert für horizontal, zweiter für vertikal */
  overflow: hidden auto;
}

/* Erweiterte Text-Dekoration */
.fancy-link {
  /* Kombiniert mehrere Text-Dekorations-Eigenschaften */
  text-decoration: underline dotted blue 2px;
}

/* Zwei-Wert-Display-Syntax */
.component {
  /* Äußerer Display-Typ + innerer Display-Typ */
  display: inline flex;
}

Für Browser, die diese modernen Kurzschreibweisen nicht unterstützen, konvertiert Bun sie in ihre Komponenten-Langschreibweisen:

styles.css

.flex-container {
  /* Erweiterte Ausrichtungseigenschaften */
  align-items: center;
  justify-items: start;

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

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

.content-box {
  /* Separate Overflow-Eigenschaften */
  overflow-x: hidden;
  overflow-y: auto;
}

.fancy-link {
  /* Einzelne Text-Dekorations-Eigenschaften */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: blue;
  text-decoration-thickness: 2px;
}

.component {
  /* Einzelner Display-Wert */
  display: inline-flex;
}

Diese Konvertierung stellt sicher, dass Ihre Stylesheets sauber und wartbar bleiben und gleichzeitig die breiteste mögliche Browser-Kompatibilität bieten.

Doppelte Positions-Verläufe

Die Syntax für doppelte Positions-Verläufe ist ein modernes CSS-Feature, das es Ihnen ermöglicht, harte Farbübergänge in Verläufen zu erstellen, indem Sie die gleiche Farbe an zwei benachbarten Positionen angeben. Dies erzeugt einen scharfen Übergang anstelle eines sanften Verlaufs, was nützlich ist für die Erstellung von Streifen, Farbbändern und anderen mehrfarbigen Designs.

styles.css

.striped-background {
  /* Erstellt einen scharfen Übergang von Grün zu Rot bei 30%-40% */
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* Doppelte Position erzeugt harten Stopp */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  /* Erstellt deutliche Farbabschnitte */
  background: linear-gradient(
    to right,
    #4caf50 0% 25%,
    /* Grün von 0% bis 25% */ #ffc107 25% 50%,
    /* Gelb von 25% bis 50% */ #2196f3 50% 75%,
    /* Blau von 50% bis 75% */ #9c27b0 75% 100% /* Lila von 75% bis 100% */
  );
}

Für Browser, die diese Syntax nicht unterstützen, konvertiert Buns CSS-Bundler sie automatisch in das traditionelle Format durch Duplizierung von Farbstopps:

styles.css

.striped-background {
  background: linear-gradient(
    to right,
    yellow 0%,
    green 20%,
    green 30%,
    red 30%,
    /* In zwei Farbstopps aufgeteilt */ red 70%,
    blue 70%,
    blue 100%
  );
}

.progress-bar {
  background: linear-gradient(
    to right,
    #4caf50 0%,
    #4caf50 25%,
    /* Zwei Stopps für grünen Abschnitt */ #ffc107 25%,
    #ffc107 50%,
    /* Zwei Stopps für gelben Abschnitt */ #2196f3 50%,
    #2196f3 75%,
    /* Zwei Stopps für blauen Abschnitt */ #9c27b0 75%,
    #9c27b0 100% /* Zwei Stopps für lila Abschnitt */
  );
}

Diese Konvertierung ermöglicht es Ihnen, die sauberere Doppelpositions-Syntax in Ihrem Quellcode zu verwenden und gleichzeitig sicherzustellen, dass Verläufe in allen Browsern korrekt angezeigt werden.

system-ui-Schriftart

Die generische Schriftartfamilie system-ui ermöglicht es Ihnen, die native UI-Schriftart des Geräts zu verwenden und erstellt Schnittstellen, die sich integrierter mit dem Betriebssystem anfühlen. Dies bietet ein nativeres Aussehen und Gefühl, ohne für jede Plattform unterschiedliche Schriftart-Stacks angeben zu müssen.

styles.css

.native-interface {
  /* Die standardmäßige UI-Schriftart des Systems verwenden */
  font-family: system-ui;
}

.fallback-aware {
  /* System-UI-Schriftart mit expliziten Fallbacks */
  font-family: system-ui, sans-serif;
}

Für Browser, die system-ui nicht unterstützen, erweitert Buns CSS-Bundler es automatisch zu einem umfassenden plattformübergreifenden Schriftart-Stack:

styles.css

.native-interface {
  /* Erweitert zur Unterstützung aller wichtigen Plattformen */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue";
}

.fallback-aware {
  /* Behält das ursprüngliche Fallback nach dem erweiterten Stack bei */
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
}

Dieser Ansatz bietet Ihnen die Einfachheit, nur system-ui in Ihrem Quellcode zu schreiben und gleichzeitig sicherzustellen, dass Ihre Schnittstelle sich korrekt an alle Betriebssysteme und Browser anpasst. Der erweiterte Schriftart-Stack umfasst geeignete Systemschriftarten für macOS/iOS, Windows, Android, Linux und Fallbacks für ältere Browser.

CSS-Module

Buns Bundler unterstützt zusätzlich zu regulärem CSS auch das Bündeln von CSS-Modulen mit Unterstützung für die folgenden Funktionen:

• Automatische Erkennung von CSS-Modul-Dateien (.module.css) ohne Konfiguration
• Komposition (composes-Eigenschaft)
• Importieren von CSS-Modulen in JSX/TSX
• Warnungen/Fehler bei ungültiger Verwendung von CSS-Modulen

Ein CSS-Modul ist eine CSS-Datei (mit der .module.css-Erweiterung), bei der alle Klassennamen und Animationen auf die Datei beschränkt sind. Dies hilft Ihnen, Kollisionen von Klassennamen zu vermeiden, da CSS-Deklarationen standardmäßig global gültig sind.

Unter der Haube transformiert Buns Bundler lokal beschränkte Klassennamen in eindeutige Bezeichner.

Erste Schritte

Erstellen Sie eine CSS-Datei mit der .module.css-Erweiterung:

styles.module.css

.button {
  color: red;
}

other-styles.module.css

.button {
  color: blue;
}

Sie können diese Datei dann importieren, zum Beispiel in eine TSX-Datei:

app.tsx

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

export default function App() {
  return (
    <>
      <button className={styles.button}>Roter Button!</button>
      <button className={otherStyles.button}>Blauer Button!</button>
    </>
  );
}

Das Styles-Objekt aus dem Import der CSS-Modul-Datei ist ein Objekt mit allen Klassennamen als Schlüssel und ihren eindeutigen Bezeichnern als Werte:

app.tsx

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

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

Dies gibt aus:

app.tsx

{
  button: "button_123";
}

{
  button: "button_456";
}

Wie Sie sehen können, sind die Klassennamen für jede Datei eindeutig, wodurch Kollisionen vermieden werden!

Komposition

CSS-Module ermöglichen es Ihnen, Klassen-Selektoren zusammen zu komponieren. Dies ermöglicht es Ihnen, Style-Regeln über mehrere Klassen hinweg wiederzuverwenden.

Zum Beispiel:

styles.module.css

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

.background {
  background-color: blue;
}

Wäre dasselbe wie das Schreiben von:

styles.module.css

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

.background {
  background-color: blue;
}

Es gibt einige Regeln, die Sie bei der Verwendung von composes beachten sollten:

styles.module.css

#button {
  /* Ungültig! `#button` ist kein Klassen-Selektor */
  composes: background;
}

.button,
.button-secondary {
  /* Ungültig! `.button, .button-secondary` ist kein einfacher Selektor */
  composes: background;
}

Komponieren aus einer separaten CSS-Modul-Datei

Sie können auch aus einer separaten CSS-Modul-Datei komponieren:

background.module.css

.background {
  background-color: blue;
}

styles.module.css

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