Skip to content

Commit 5095779

Browse files
laruisslaruiss
committed
feat!: 👷 Simplifie le build
Les polices sont inclues dans vue-dsfr.css BREAKING CHANGE: Il ne faut plus importer vue-dsfr-fonts.css (inclus dans vue-dsfr.css)
1 parent 9dbe25d commit 5095779

File tree

6 files changed

+24
-188
lines changed

6 files changed

+24
-188
lines changed

‎build-css.mjs‎

Lines changed: 1 addition & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,13 @@ import fs from 'fs'
33
import mkdirp from 'mkdirp'
44
import postcss from 'postcss'
55
import atImport from 'postcss-import'
6-
import postcssNested from 'postcss-nested'
7-
import postcssPresetEnv from 'postcss-preset-env'
86
import postcssUrl from 'postcss-url'
97
import csso from 'postcss-csso'
108

119
const postcssPlugins = [
1210
atImport(),
13-
postcssNested,
1411
postcssUrl({ url: 'inline' }),
15-
postcssPresetEnv({
16-
autoprefixer: {
17-
flexbox: 'no-2009',
18-
},
19-
stage: 1,
20-
features: {
21-
'custom-properties': false,
22-
'focus-visible-pseudo-class': false,
23-
},
24-
}),
25-
csso,
12+
csso(),
2613
]
2714

2815
mkdirp.sync('dist')
@@ -56,39 +43,3 @@ fs.readFile('./src/main.css', 'utf8', (err, css) => {
5643
}
5744
})
5845
})
59-
60-
fs.readFile('src/assets/fonts-dsfr.css', 'utf8', (err, css) => {
61-
if (err) {
62-
console.error(err)
63-
throw err
64-
}
65-
postcss(postcssPlugins)
66-
.process(css, {
67-
from: 'src/assets/fonts-dsfr.css',
68-
to: 'dist/fonts-dsfr.css',
69-
})
70-
.then(result => {
71-
fs.writeFile('dist/vue-dsfr-fonts.css', result.css, () => true)
72-
if (result.map) {
73-
fs.writeFile('dist/vue-dsfr-fonts.css.map', result.map.toString(), () => true)
74-
}
75-
})
76-
})
77-
78-
fs.readFile('src/assets/fonts-essential-dsfr.css', 'utf8', (err, css) => {
79-
if (err) {
80-
console.error(err)
81-
throw err
82-
}
83-
postcss(postcssPlugins)
84-
.process(css, {
85-
from: 'src/assets/fonts-dsfr.css',
86-
to: 'dist/fonts-dsfr.css',
87-
})
88-
.then(result => {
89-
fs.writeFile('dist/vue-dsfr-fonts-essential.css', result.css, () => true)
90-
if (result.map) {
91-
fs.writeFile('dist/vue-dsfr-fonts-essential.css.map', result.map.toString(), () => true)
92-
}
93-
})
94-
})

‎package.json‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,25 +24,9 @@
2424
"require": "./dist/vue-dsfr.css",
2525
"import": "./dist/vue-dsfr.css"
2626
},
27-
"./dist/vue-dsfr-fonts.css": {
28-
"require": "./dist/vue-dsfr-fonts.css",
29-
"import": "./dist/vue-dsfr-fonts.css"
30-
},
31-
"./dist/vue-dsfr-fonts-essentials.css": {
32-
"require": "./dist/vue-dsfr-fonts-essentials.css",
33-
"import": "./dist/vue-dsfr-fonts-essentials.css"
34-
},
3527
"./styles": {
3628
"require": "./dist/vue-dsfr.css",
3729
"import": "./dist/vue-dsfr.css"
38-
},
39-
"./fonts": {
40-
"require": "./dist/vue-dsfr-fonts.css",
41-
"import": "./dist/vue-dsfr-fonts.css"
42-
},
43-
"./fonts-essentials": {
44-
"require": "./dist/vue-dsfr-fonts-essentials.css",
45-
"import": "./dist/vue-dsfr-fonts-essentials.css"
4630
}
4731
},
4832
"publishConfig": {

‎src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,4 @@ export default {
2020
export * from './components/index.js'
2121
export * from './utils/random-utils.js'
2222
export * from './composables.js'
23-
// export * as icons from './icons.js'
23+
export * as icons from './icons.js'

‎src/main.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url(@gouvfr/dsfr/dist/core/core.main.css);
2-
@import url(@gouvfr/dsfr/dist/scheme/scheme.css);
3-
@import url(@gouvfr/dsfr/dist/component/link/link.main.css);
4-
@import url(@gouvfr/dsfr/dist/component/form/form.main.css);
1+
@import url(@gouvfr/dsfr/dist/core/core.main.min.css);
2+
@import url(@gouvfr/dsfr/dist/scheme/scheme.min.css);
3+
@import url(@gouvfr/dsfr/dist/component/link/link.main.min.css);
4+
@import url(@gouvfr/dsfr/dist/component/form/form.main.min.css);

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

Lines changed: 14 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -73,66 +73,21 @@ ajouter les lignes commentées :
7373

7474
```js
7575
import { createApp } from 'vue'
76-
import App from './App.vue'
77-
import VueDsfr from '@laruiss/vue-dsfr' // Import (par défaut) de la bibliothèque
78-
79-
const app = createApp(App)
80-
.use(VueDsfr) // Ajout en tant que plugin
81-
.mount('#app')
82-
```
83-
84-
Pour ajouter les styles globaux :
85-
86-
```js
87-
import { createApp } from 'vue'
88-
import App from './App.vue'
89-
import VueDsfr from '@laruiss/vue-dsfr' // Import (par défaut) de la bibliothèque
90-
9176
import '@laruiss/vue-dsfr/dist/vue-dsfr.css' // Import des styles globaux
77+
import VueDsfr from '@laruiss/vue-dsfr' // Import (par défaut) de la bibliothèque
9278

93-
const app = createApp(App)
94-
.use(VueDsfr) // Ajout en tant que plugin
95-
.mount('#app')
96-
```
97-
98-
Pour ajouter Les styles globaux et les polices (recommandé) :
99-
100-
```js
101-
import { createApp } from 'vue'
10279
import App from './App.vue'
103-
import VueDsfr from '@laruiss/vue-dsfr' // Import (par défaut) de la bibliothèque
10480

105-
import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts.css' // Import des polices
106-
import '@laruiss/vue-dsfr/dist/vue-dsfr.css' // Import des styles globaux
10781

10882
const app = createApp(App)
109-
.use(VueDsfr) // Ajout en tant que plugin
83+
.use(VueDsfr) // Enregistrement de la bibliothèque en tant que plugin
11084
.mount('#app')
11185
```
11286

11387
#### Dans nuxt 3
11488

11589
La bibliothèque VueDsfr fournit bien plusieurs build (esm et umd entre autres) et Nuxt3 sait lequel choisir.
11690

117-
Cependant nous utilisons la bibliothèque `oh-vue-icons` avec leur build ESM pour être sûr de n'embarquer que les icônes
118-
utilisées. Il faut donc transpiler `oh-vue-icons`.
119-
120-
Pour ce faire, ajouter ceci dans `nuxt.config.js` :
121-
122-
```javascript
123-
import { defineNuxtConfig } from 'nuxt3';
124-
125-
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
126-
export default defineNuxtConfig({
127-
build: {
128-
transpile: [
129-
'oh-vue-icons/dist/v3/icon.es.js',
130-
'oh-vue-icons/icons/ri/index.js',
131-
],
132-
},
133-
})
134-
```
135-
13691
Ensuite, il faut ajouter le plugin en créant le dossier `/plugins` s’il n’existe pas et en créant dedans un fichier `vue-dsfr.js`
13792
avec le contenu suivant :
13893

@@ -147,11 +102,17 @@ export default defineNuxtPlugin((nuxtApp) => {
147102
})
148103
```
149104

150-
Enfin, il faudra ajouter les feuilles CSS :
105+
Enfin, il faudra ajouter les feuilles CSS, pour ce faire, ajouter ceci dans `nuxt.config.js` :
151106

152107
```javascript
153-
import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts.css'
154-
import '@laruiss/vue-dsfr/dist/vue-dsfr.css'
108+
import { defineNuxtConfig } from 'nuxt3';
109+
110+
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
111+
export default defineNuxtConfig({
112+
css: [
113+
'@laruiss/vue-dsfr/styles',
114+
],
115+
})
155116
```
156117

157118
Vous pouvez voir une implémentation **[sur Stackblitz ici](https://stackblitz.com/edit/nuxt-starter-suunj6?file=app.vue)**.
@@ -171,8 +132,7 @@ import {
171132
DsfrCard,
172133
} from '@laruiss/vue-dsfr' // Imports nommés de la bibliothèque
173134

174-
import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts-essential.css' // Import des polices (sans les variants bold/italic)
175-
import '@laruiss/vue-dsfr/dist/vue-dsfr.css' // Import des styles globaux
135+
import '@laruiss/vue-dsfr/styles' // Import des styles globaux
176136

177137
const app = createApp(App)
178138
.component('DsfrHeader', DsfrHeader) // Enregistrement global du composant DsfrHeader
@@ -184,47 +144,6 @@ const app = createApp(App)
184144

185145
## Ajouter des icônes
186146

187-
Pour ajouter des icônes qui ne sont pas importées dans la bibliothèque, voici comment procéder :
188-
189-
1. Créer un fichier `icons.js` avec un contenu comme dans l’exemple ci-dessous :
190-
2. Importer `icons.js` depuis `main.js` :
191-
192-
```javascript
193-
// /src/icons.js/
194-
195-
// Importer la fonction addIcons de la bibliothèque
196-
import { addIcons } from 'oh-vue-icons'
197-
198-
// Importer les icônes souhaitées depuis `oh-vue-icons`
199-
import {
200-
RiAddLine,
201-
RiChatCheckLine,
202-
RiFileList2Line,
203-
RiLogoutBoxLine,
204-
RiMenuLine,
205-
RiNotification3Line,
206-
RiQuestionLine,
207-
RiUserLine,
208-
} from 'oh-vue-icons/icons/ri/index.js'
209-
210-
// Ajouter les icônes
211-
addIcons(
212-
RiAddLine,
213-
RiChatCheckLine,
214-
RiFileList2Line,
215-
RiLogoutBoxLine,
216-
RiMenuLine,
217-
RiNotification3Line,
218-
RiQuestionLine,
219-
RiUserLine,
220-
)
221-
```
222-
223-
```javascript
224-
// main.js
225-
(...)
226-
227-
import './icons.js'
228-
229-
(...)
147+
Pour ajouter des icônes qui ne sont pas importées dans la bibliothèque, veuillez consulter
148+
[la page dédiée](/?path=/story/fondamentaux-4-1-icônes-personnalisées--page).
230149
```

‎src/stories/fondamentaux/icones-personnalisees.stories.mdx‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,6 @@ Il est possible d’utiliser facilement toutes les icônes [Remix Icon](https://
66
[OhVueIcons](https://oh-vue-icons.js.org/) : le composant `VIcon` est enregistré globalement si la bibliothèque est
77
utilisée en tant que plugin.
88

9-
### Utiliser la bibliothèque en tant que plugin (rappel) :
10-
11-
```javascript
12-
// src/main.js
13-
import '@laruiss/vue-dsfr/fonts' // Import des polices (Marianne et Spectral)
14-
import '@laruiss/vue-dsfr/styles' // Import des styles globaux
15-
16-
import { createApp } from 'vue'
17-
18-
import VueDsfr from '@laruiss/vue-dsfr' // Import du plugin
19-
20-
import App from './App.vue'
21-
22-
import './main.css'
23-
24-
createApp(App)
25-
.use(VueDsfr) // Enregistrement du Plugin
26-
.mount('#app')
27-
```
28-
299
### Ajouter des icônes personnalisées
3010

3111
Pour ajouter des icônes personnalisées, ajouter d’abord l’import du fichier `icons.js`
@@ -43,7 +23,8 @@ import App from './App.vue'
4323
import * as icons from './icons.js' // Import des icônes de Remix Icon (cf. plus loin)
4424

4525
createApp(App)
46-
.use(VueDsfr, { icons: Object.values(icons) })
26+
.use(VueDsfr, { icons: Object.values(icons) }) // Ajout des icônes pour tous les composants
27+
// de la bibliothèqe ET tout le projet
4728
.mount('#app')
4829
```
4930

@@ -92,7 +73,7 @@ export {
9273

9374
## Pour Nuxt 3
9475

95-
Créer/modifier un fichier `vue-dsfr.js` dans le dossier `plugins` avec un contenu comme celui-ci :
76+
Créer/modifier le fichier `vue-dsfr.js` dans le dossier `plugins` avec un contenu comme celui-ci :
9677

9778
```javascript
9879
import {
@@ -112,6 +93,7 @@ const icons = [
11293
export default defineNuxtPlugin((nuxtApp) => {
11394
// Enregistrement du plugin avec ajout de toutes les icônes du tableau `icons`
11495
nuxtApp.vueApp.use(VueDsfr, { icons }); // le deuxième paramètre est un objet contenant une propriété `icons`
96+
// qui est un tableau qui contient toutes les icônes que vous souhaitez utiliser
11597
});
11698
```
11799
Le composant `VIcon` et tous les composants de VueDsfr sont désormais utilisables dans toute l’application Nuxt3

0 commit comments

Comments
 (0)