build: 👷 Optimise le build

Author: laruiss

.storybook/preview.js

@@ -8,7 +8,7 @@ import '../src/main.css'
 
 import './theme.css'
 
-import VIcon from '../src/icons.js'
+import {OhVueIcon as VIcon} from 'oh-vue-icons'
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

cypress/plugins/index.js

@@ -12,15 +12,6 @@
 // For component testing 1/2
 const { startDevServer } = require('@cypress/vite-dev-server')
 
-module.exports = (on, config) => {
-  on('dev-server:start', options =>
-    startDevServer({
-      options,
-    }),
-  )
-
-  return config
-}
 module.exports = (on, config) => {
   // on('file:preprocessor', webpack({
   //  webpackOptions: require('@vue/cli-service/webpack.config'),

package.json

@@ -19,6 +19,18 @@
     ".": {
       "require": "./dist/vue-dsfr.umd.js",
       "import": "./dist/vue-dsfr.mjs"
+    },
+    "./dist/vue-dsfr.css": {
+      "require": "./dist/vue-dsfr.css",
+      "import": "./dist/vue-dsfr.css"
+    },
+    "./dist/vue-dsfr-fonts.css": {
+      "require": "./dist/vue-dsfr-fonts.css",
+      "import": "./dist/vue-dsfr-fonts.css"
+    },
+    "./dist/vue-dsfr-fonts-essentials.css": {
+      "require": "./dist/vue-dsfr-fonts-essentials.css",
+      "import": "./dist/vue-dsfr-fonts-essentials.css"
     }
   },
   "publishConfig": {
@@ -36,7 +48,7 @@
     "build": "run-p build:css build:js",
     "postbuild": "copyfiles types/composable.d.ts dist/composable.d.ts",
     "build:css": "node build-css.mjs",
-    "build:js": "cross-env NODE_ENV=production rollup --config rollup.config.js",
+    "build:js": "cross-env NODE_ENV=production rollup -c",
     "demo-app": "vite",
     "vitest": "vitest",
     "coverage": "vitest run --coverage",

rollup.config.js

@@ -1,3 +1,4 @@
+import { defineConfig } from 'rollup'
 import vue from 'rollup-plugin-vue'
 
 import { nodeResolve } from '@rollup/plugin-node-resolve'
@@ -23,15 +24,16 @@ const postcssPlugins = [
       'focus-visible-pseudo-class': false,
     },
   }),
-  csso,
+  csso(),
 ]
 
 const baseOutput = {
   globals: {
     vue: 'vue',
+    'oh-vue-icons': 'OhVueIcon',
+    'oh-vue-icons/icons': 'oh-vue-icons/icons',
+    'oh-vue-icons/icons/ri/index.js': 'oh-vue-icons/icons/ri/index.js',
     'vue-router': 'vue-router',
-    'oh-vue-icons/dist/v3/icon.es': 'VIcon',
-    'oh-vue-icons/icons': 'icons',
     'focus-trap': 'focus-trap',
     'focus-trap-vue': 'focus-trap-vue',
   },
@@ -43,8 +45,8 @@ const baseConfig = {
     'vue',
     'vue-router',
     'oh-vue-icons',
-    'oh-vue-icons/dist/v3/icon.es',
     'oh-vue-icons/icons',
+    'oh-vue-icons/icons/ri/index.js',
     'focus-trap',
     'focus-trap-vue',
   ],
@@ -63,7 +65,7 @@ const baseConfig = {
   ],
 }
 
-export default [
+export default defineConfig([
   // ESM build to be used with webpack/rollup.
   {
     ...baseConfig,
@@ -114,4 +116,4 @@ export default [
       name: 'VueDsfr',
     },
   },
-]
+])

src/components/DsfrAccordion/DsfrAccordion.e2e.js

@@ -1,7 +1,7 @@
 import { mount } from '@cypress/vue'
 import DsfrAccordion from './DsfrAccordion.vue'
 import DsfrAccordionsGroup from './DsfrAccordionsGroup.vue'
-import VIcon from '../../icons.js'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 import '../../main.css'
 

src/components/DsfrAccordion/DsfrAccordion.spec.js

@@ -1,5 +1,5 @@
 import { fireEvent, render } from '@testing-library/vue'
-import { VIcon } from '../../index.js'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrAccordion from './DsfrAccordion.vue'

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -64,7 +64,7 @@ export default defineComponent({
   </section>
 </template>
 
-<style src="@gouvfr/dsfr/dist/component/accordion/accordion.main.css" />
+<style src="@gouvfr/dsfr/dist/component/accordion/accordion.main.min.css" />
 
 <style scoped>
 .fr-collapse--expanded {

src/components/DsfrAlert/DsfrAlert.e2e.js

@@ -1,6 +1,6 @@
 import { mount } from '@cypress/vue'
 import DsfrAlert from './DsfrAlert.vue'
-import VIcon from '../../icons.js'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 import '../../main.css'
 

src/components/DsfrAlert/DsfrAlert.spec.js

@@ -1,4 +1,4 @@
-import { VIcon, addIcons } from '../../index.js'
+import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
 import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrAlert from './DsfrAlert.vue'

src/components/DsfrAlert/DsfrAlert.vue

@@ -99,7 +99,7 @@ export default defineComponent({
   </transition>
 </template>
 
-<style src="@gouvfr/dsfr/dist/component/alert/alert.main.css" />
+<style src="@gouvfr/dsfr/dist/component/alert/alert.main.min.css" />
 
 <style scoped>
 .fr-alert,