export more CSS to enable more precise usage of CSS imports

packages/integration/CHANGELOG.md

@@ -1,8 +1,12 @@
 # Changelog
 
+## 0.1.2
+
+- Export more CSS in `dist/css` to enable fine-grained CSS usage. It prevents having to include the Gaufre CSS two times if we consume both homepage and gaufre CSS files.
+
 ## 0.1.1
 
-- Added new services icons in public/logos
+- Add new services icons in public/logos
 
 ## 0.1.0
 

packages/integration/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr-lasuite/integration",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "dist"

packages/integration/src/styles/homepage-gaufre-dsfr.css → packages/integration/src/styles/homepage-full.css

@@ -1,4 +1,3 @@
-@import "./fonts.css";
-@import "./dsfr.css";
+@import "./required-dsfr.css";
 @import "./homepage.css";
 @import "./gaufre.css";

packages/integration/src/styles/required-dsfr.css

@@ -0,0 +1,2 @@
+@import "./fonts.css";
+@import "./dsfr.css";

packages/integration/vite.css-config.ts

@@ -15,9 +15,10 @@ export default defineConfig({
     emptyOutDir: false,
     rollupOptions: {
       input: {
+        "css-required-dsfr": resolve(__dirname, "src/styles/required-dsfr.css"),
         "css-homepage": resolve(__dirname, "src/styles/homepage.css"),
         "css-gaufre": resolve(__dirname, "src/styles/gaufre.css"),
-        "css-homepage-gaufre-dsfr": resolve(__dirname, "src/styles/homepage-gaufre-dsfr.css"),
+        "css-homepage-full": resolve(__dirname, "src/styles/homepage-full.css"),
         "css-homepage-gaufre": resolve(__dirname, "src/styles/homepage-gaufre.css"),
       },
       output: {

website/src/content/docs/guides/homepage.mdx

@@ -32,7 +32,7 @@ lettre, voici les points importants à retenir :
   visuel proposé,
 - elle doit permettre à l'utilisateur de se connecter à votre application,
 - elle doit afficher en fond de page
-  [une des photos communes de La Suite](/reference/api#arrière-plan-de-page-daccueil)
+  [une des photos communes de La Suite](/reference/api#arrière-plan-de-page-daccueil).
 
 ## Installation
 
@@ -46,7 +46,7 @@ vous l'utilisiez déjà ou non dans votre projet, un fichier CSS différent est
     Le fichier CSS à utiliser est :
 
     ```
-    @gouvfr-lasuite/integration/dist/css/homepage-gaufre-dsfr.css
+    @gouvfr-lasuite/integration/dist/css/homepage-full.css
     ```
 
     Si durant l'installation vous avez décidé de
@@ -64,6 +64,14 @@ vous l'utilisiez déjà ou non dans votre projet, un fichier CSS différent est
   </TabItem>
 </Tabs>
 
+Si vous voulez finement gérer vos styles car vous utilisez le bouton Gaufre sur tout votre site, vous pouvez choisir parmi tous les fichiers CSS présents :
+
+- `css/homepage-full.css` : contient l'extrait de DSFR nécessaire + les styles de la homepage + les styles de la gaufre,
+- `css/homepage-gaufre.css` : contient les styles de la homepage + les styles de la gaufre (sans DSFR),
+- `css/homepage.css` : contient les styles de la homepage (sans DSFR ni gaufre),
+- `css/gaufre.css` : contient les styles de la gaufre (sans DSFR ni homepage),
+- `css/required-dsfr.css` : contient l'extrait de DSFR nécessaire (rien d'autre),
+
 ### 2. JS
 
 Pour faire fonctionner le bouton Gaufre présent en haut à droite de la page, il est nécessaire de