Moteur CSS Rust

bext comprend un compilateur Tailwind CSS v4 natif Rust optimisé par encre-css. Il remplace le pipeline TypeScript Tailwind par une implémentation pure Rust qui s'exécute à l'intérieur du processus serveur – aucun sous-processus Node.js ou Bun n'est nécessaire pour CSS.

Pourquoi#

Le pipeline de construction Tailwind traditionnel nécessite Bun pour exécuter le package npm tailwindcss. Cela fonctionne mais ajoute de la latence aux builds, nécessite un runtime JS pour CSS et permet aux modifications CSS uniquement de déclencher des reconstructions complètes du bundle.

Le moteur CSS Rust élimine tout cela :

Activation#

La fonctionnalité route-css est incluse dans les versions par défaut. Aucune configuration nécessaire : cela fonctionne automatiquement.

Pour vérifier qu'il est compilé dans :

bext version
# Look for "route-css" in the feature flags

Pour le désactiver explicitement :

cargo build -p bext-server --release \
  --no-default-features \
  --features v8,tls,nginx-compat

Comment ça marche#

Au démarrage#

Lorsque bext initialise un site PRISM, il construit public/styles.css à partir de Rust avant le démarrage du pool de rendu :

PRISM init → bext_css::build_site_css() → scan src/**/*.{tsx,ts,jsx,css,html}
           → extract class candidates → encre-css generate → write public/styles.css

Le script de construction TypeScript ignore automatiquement sa propre étape Tailwind (via la variable d'environnement BEXT_RUST_CSS=1).

CSS par itinéraire#

Après chaque rendu SSR, bext analyse le HTML rendu pour les attributs class="..." et génère un bloc <style data-bext-css> contenant uniquement les utilitaires Tailwind utilisés sur cette page spécifique. Celui-ci est injecté avant </head>.

<!-- Before: generic styles.css with everything -->
<link rel="stylesheet" href="/styles.css" />

<!-- After: also includes per-route minimal CSS -->
<link rel="stylesheet" href="/styles.css" />
<style data-bext-css>
  .flex { display: flex; }
  .items-center { align-items: center; }
  .gap-4 { gap: 1rem; }
  /* only classes used on THIS page */
</style>

Cela fonctionne sur les deux chemins de rendu :

• Mode à la demande : après renderToString() renvoie HTML
• Mode prédéfini : après que __fetch renvoie une réponse HTML

Rechargement en direct CSS uniquement#

Lorsque l'observateur de fichiers détecte que seuls les fichiers .css ont été modifiés (pas de .ts / .tsx ), il emprunte un chemin rapide :

1. Saute complètement le chignon
2. Appelle bext_css::build_site_css() dans Rust (~ 1 ms)
3. Efface le cache de réponse ISR
4. Envoie HMR css-update aux navigateurs connectés

En mode développement, le client HMR échange à chaud les feuilles de style <link> et les blocs <style data-bext-css> en ligne sans recharger la page.

CLI#

Créer du CSS pour un site#

bext css sites/cloud

Construire du CSS pour tous les sites#

bext css sites/ --all

Sortir:

Building CSS for all sites in sites/
  main                 12.4 KB
  registry              8.6 KB
  learn                 8.4 KB
  status                8.4 KB
  companion-site        8.3 KB
  blog                  8.1 KB
  docs                  7.6 KB
  cloud                 5.9 KB

  8 sites, 66.8 KB total, 280ms

Construire avec bext build#

CSS est construit automatiquement avant le bundle JS :

bext build
#   css        12.4 KB (Rust)
#   Build complete in 1200ms (bundle: .bext/production.js)

Ignorez CSS si vous souhaitez utiliser un styles.css existant :

bext build --no-css

Thème#

Les jetons de conception bext sont compilés dans le moteur :

Couleurs#

Polices#

• Sans : "Inter", system-ui, -apple-system, sans-serif
• Mono : "JetBrains Mono", "Fira Code", monospace

Mode sombre#

Mode sombre basé sur les classes à l'aide du sélecteur .dark :

<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
  Adapts to dark mode
</div>

Points d'arrêt réactifs#

Tous les points d’arrêt standards Tailwind v4 sont disponibles :

<div className="hidden md:flex lg:grid lg:grid-cols-3">
  Responsive layout
</div>

Propriétés personnalisées CSS#

Le moteur génère également des propriétés CSS personnalisées (jetons de conception) à utiliser dans les CSS écrits à la main :

:root {
  --bext-black: #0a0a0a;
  --bext-white: #fafafa;
  --bext-accent: #3b82f6;
  --bg: var(--bext-white);
  --text: var(--bext-black);
  --border: #e5e7eb;
  --surface: #f9fafb;
}
:root.dark {
  --bg: #111827;
  --text: #f3f4f6;
  --border: #374151;
  --surface: #1f2937;
}

Utilisez-les dans les styles de composants :

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

Architecture#

Le moteur CSS réside dans crates/bext-css/ et dépend de encre-css (compatible MIT, Tailwind v4). Fonctions clés :

Compatibilité avec TypeScript Tailwind#

Les deux moteurs peuvent cohabiter. Lorsque le moteur Rust est actif, il définit BEXT_RUST_CSS=1 avant d'exécuter les scripts de build Bun. Les fonctions TypeScript buildCSS() et ensureCSS() vérifient cette variable et ignorent leur travail :

// In build.ts / serve.ts — automatically skipped
if (process.env.BEXT_RUST_CSS === "1") {
  console.log("css (handled by bext-server Rust engine)");
  return;
}

Pour forcer le pipeline TypeScript (par exemple, pour le débogage), supprimez la variable :

BEXT_RUST_CSS=0 bext build

En rapport#

• Indicateurs de construction et de fonctionnalités — Indicateur de fonctionnalité route-css et profils de construction
• bext.config.toml — Sources et fichiers supplémentaires [build.css]
• Cadres : vent arrière — utilisation des utilitaires Tailwind dans les itinéraires PRISM
• Architecture : Pipeline de rendu PRISM — où l'injection CSS par route se produit dans la chaîne de rendu
• Variables d'environnement — BEXT_RUST_CSS et variables de build associées

Links#

• encre-css — le moteur Rust Tailwind v4 bext s'appuie sur