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:
@@ -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
|
## Squelette minimal d'un module
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -1,5 +1,9 @@
|
|||||||
/* Tailwind v4: tells the consumer's Tailwind to scan this package's components */
|
/* Tailwind v4: tells the consumer's Tailwind to scan this package's components */
|
||||||
@source "../../**/*.js";
|
@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) ──────────────────────────────────────── */
|
/* ── IBM Plex Sans (variable font) ──────────────────────────────────────── */
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|||||||
Reference in New Issue
Block a user