docs(styles): add tailwind source scanning for zen modules

- add `@source` directive in zen.css to auto-scan `@zen/module-*/dist/**/*.js`
- document tailwind class auto-discovery mechanism for modules in MODULES.md
This commit is contained in:
2026-04-26 11:53:18 -04:00
parent cdd1e39c9a
commit c9d41a8abe
2 changed files with 20 additions and 0 deletions
+16
View File
@@ -371,6 +371,22 @@ Toute variable requise par le module doit être déclarée dans `manifest.envVar
---
## Classes Tailwind
Le projet consommateur importe `@zen/core/styles/zen.css`, qui déclare deux directives `@source` :
1. `@source "../../**/*.js"` — scanne `node_modules/@zen/core/dist/**/*.js`
2. `@source "../../../../module-*/dist/**/*.js"` — scanne `node_modules/@zen/module-*/dist/**/*.js`
Conséquence pour un module : les classes Tailwind utilisées dans les composants du module sont générées **automatiquement** par le Tailwind du consommateur, à condition que :
- Le package soit publié sous le nom `@zen/module-<nom>` (la convention est déjà imposée par la découverte runtime des modules).
- Les fichiers compilés se trouvent dans `dist/` (pattern de scan).
Aucune action n'est requise côté module ni côté consommateur — un module peut donc utiliser librement n'importe quelle classe Tailwind, y compris des variantes responsives (`md:`, `lg:`...) ou des valeurs arbitraires (`w-[300px]`).
---
## Squelette minimal d'un module
```
+4
View File
@@ -1,5 +1,9 @@
/* Tailwind v4: tells the consumer's Tailwind to scan this package's components */
@source "../../**/*.js";
/* Découverte automatique des classes Tailwind dans les modules `@zen/module-*`
installés dans le projet consommateur. Chemin résolu depuis
node_modules/@zen/core/dist/shared/styles/zen.css. */
@source "../../../../module-*/dist/**/*.js";
/* ── IBM Plex Sans (variable font) ──────────────────────────────────────── */
@font-face {