feat: 🔥 Supprime le CSS qui sera de toute façon importé

Author: laruiss

src/demo-app/main.js

@@ -1,18 +1,16 @@
+// import '@gouvfr/dsfr/dist/dsfr.min.css'
 import { createApp } from 'vue'
 
 import {
   RiCheckboxCircleLine,
   RiNotification3Line,
 } from 'oh-vue-icons/icons/ri/index.js'
 
-// import '@/main.css'
-// import '@gouvfr/dsfr/dist/dsfr.min.css'
 import '@gouvfr/dsfr/dist/core/core.main.min.css'
-// import '@gouvfr/dsfr/dist/scheme/scheme.min.css'
-import '@gouvfr/dsfr/dist/component/link/link.main.min.css'
-import '@gouvfr/dsfr/dist/component/form/form.main.min.css'
+import '@gouvfr/dsfr/dist/scheme/scheme.min.css'
+import '@gouvfr/dsfr/dist/component/component.main.min.css'
 import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
-// import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
+import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
 
 import VueDsfr from '@/index.js'
 import router from './router.js'

src/index.js

@@ -1,4 +1,3 @@
-import '@gouvfr/dsfr/dist/dsfr.min.css'
 import { addIcons, OhVueIcon } from 'oh-vue-icons'
 import * as components from './components/index.js'
 import * as defaultIcons from './icons.js'

src/stories/docs/02-guide.stories.mdx

@@ -149,4 +149,45 @@ puisque c’est le CSS officiel du DSFR qui est utilisé.
 
 Pour ajouter des icônes qui ne sont pas importées dans la bibliothèque, veuillez consulter
 [la page dédiée](/story/fondamentaux-4-1-icônes-personnalisées--page).
+
+## Avoir un bundle minimal
+
+Il est possible d’intégrer moins de CSS pour les petits projets.
+
+### Vue3
+
+Dans le point d’entrée de votre application Vue (souvent `main.js` ou `main.ts`) :
+
+```javascript
+import '@gouvfr/dsfr/dist/core/core.main.min.css'            // Le CSS minimal du DSFR
+import '@gouvfr/dsfr/dist/component/component.main.min.css'  // Styles de tous les composants
+import '@gouvfr/dsfr/dist/utility/utility.main.min.css'      // Classes utilitaires : les composants de VueDsfr en ont besoin
+import '@gouvminint/vue-dsfr/styles'                         // Les styles propres aux composants de VueDsfr
+
+import '@gouvfr/dsfr/dist/scheme/scheme.min.css'             // Facultatif : Si les thèmes sont utilisés (thème sombre, thème clair)
+import '@gouvfr/dsfr/dist/utility/icons/icons.min.css'       // Facultatif : Si des icônes sont utilisées avec les classes "fr-icon-..."
+```
+
+### Nuxt3
+
+Dans `nuxt.config.js` :
+
+```javascript
+export default defineNuxtConfig({
+  css: [
+    '@gouvfr/dsfr/dist/core/core.main.min.css',           // Le CSS du DSFR
+    '@gouvfr/dsfr/dist/utility/utility.main.min.css'      // Classes utilitaires : les composants de VueDsfr en ont besoin
+    '@gouvminint/vue-dsfr/styles',                        // Les styles propres aux composants de VueDsfr
+
+    '@gouvfr/dsfr/dist/component/componant.main.min.css'  // Styles des liens
+    '@gouvfr/dsfr/dist/component/form/form.min.css'       // Facultatif : Si l’application utilise des éléments de formulaire
+    '@gouvfr/dsfr/dist/scheme/scheme.min.css'             // Facultatif : Si les thèmes sont utilisés (thème sombre, thème en bernes)
+    '@gouvfr/dsfr/dist/utility/icons/icons.min.css',      // Facultatif : Si des icônes sont utilisées avec les classes "fr-icon-..."
+  ],
+  ignore: [
+    '**/*.test.*',
+    '**/*.spec.*',
+    '**/*.cy.*',
+  ],
+})
 ```

src/stories/docs/04-migration.stories.mdx

@@ -64,12 +64,11 @@ Utiliser le minimum de CSS du DSFR :
 
 ```javascript
 import '@gouvfr/dsfr/dist/core/core.main.min.css'            // Le CSS minimal du DSFR
-import '@gouvfr/dsfr/dist/component/link/link.main.min.css'  // Styles des liens
+import '@gouvfr/dsfr/dist/component/component.main.min.css'  // Styles de tous les composants
 import '@gouvfr/dsfr/dist/utility/utility.main.min.css'      // Classes utilitaires : les composants de VueDsfr en ont besoin
 import '@gouvminint/vue-dsfr/styles'                         // Les styles propres aux composants de VueDsfr
 
-import '@gouvfr/dsfr/dist/component/form/form.min.css'       // Facultatif : Si l’application utilise des éléments de formulaire
-import '@gouvfr/dsfr/dist/scheme/scheme.min.css'             // Facultatif : Si les thèmes sont utilisés (thème sombre, thème en bernes)
+import '@gouvfr/dsfr/dist/scheme/scheme.min.css'             // Facultatif : Si les thèmes sont utilisés (thème sombre, thème clair)
 import '@gouvfr/dsfr/dist/utility/icons/icons.min.css'       // Facultatif : Si des icônes sont utilisées avec les classes "fr-icon-..."
 ```
 
@@ -116,11 +115,10 @@ Ou
 export default defineNuxtConfig({
   css: [
     '@gouvfr/dsfr/dist/core/core.main.min.css',           // Le CSS du DSFR
+    '@gouvfr/dsfr/dist/component/component.main.min.css'  // Styles de tous les composants du DSFR
     '@gouvfr/dsfr/dist/utility/utility.main.min.css'      // Classes utilitaires : les composants de VueDsfr en ont besoin
     '@gouvminint/vue-dsfr/styles',                        // Les styles propres aux composants de VueDsfr
 
-    '@gouvfr/dsfr/dist/component/link/link.main.min.css'  // Styles des liens
-    '@gouvfr/dsfr/dist/component/form/form.min.css'       // Facultatif : Si l’application utilise des éléments de formulaire
     '@gouvfr/dsfr/dist/scheme/scheme.min.css'             // Facultatif : Si les thèmes sont utilisés (thème sombre, thème en bernes)
     '@gouvfr/dsfr/dist/utility/icons/icons.min.css',      // Facultatif : Si des icônes sont utilisées avec les classes "fr-icon-..."
   ],