|
1 | | -// vite.config.ts |
2 | 1 | import { defineConfig } from 'vite'; |
| 2 | +import type { UserConfig, PluginOption } from 'vite'; |
3 | 3 | import react from '@vitejs/plugin-react'; |
4 | 4 | import { resolve } from 'path'; |
5 | 5 | import { glob } from 'glob'; |
| 6 | +import purgecss from '@fullhuman/postcss-purgecss'; |
6 | 7 |
|
7 | | -// Function to collect all FFE LESS imports |
8 | 8 | async function collectFfeImports() { |
9 | | - try { |
10 | | - const nodeModulesPath = resolve(__dirname, 'node_modules/@sb1'); |
11 | | - console.log('Searching for LESS files in:', nodeModulesPath); |
12 | | - |
13 | | - const lessFiles = await glob('**/less/*.less', { |
14 | | - cwd: nodeModulesPath, |
15 | | - ignore: ['**/node_modules/**'], |
16 | | - absolute: false, |
17 | | - }); |
18 | | - |
19 | | - console.log('Found LESS files:', lessFiles); |
20 | | - |
21 | | - // Start with core colors as it's a dependency for other components |
22 | | - const imports = ['@import "@sb1/ffe-core/less/colors";']; |
23 | | - |
24 | | - // Add all other FFE imports, excluding core colors |
25 | | - for (const file of lessFiles) { |
26 | | - // Skip if it's colors.less since we already imported it |
27 | | - if (!file.includes('ffe-core/less/colors.less')) { |
28 | | - // Remove the .less extension for the import |
29 | | - const importPath = file.replace('.less', ''); |
30 | | - imports.push(`@import "@sb1/${importPath}";`); |
31 | | - } |
| 9 | + const nodeModulesPath = resolve(__dirname, 'node_modules/@sb1'); |
| 10 | + const lessFiles = await glob('**/less/*.less', { |
| 11 | + cwd: nodeModulesPath, |
| 12 | + ignore: ['**/node_modules/**'], |
| 13 | + }); |
| 14 | + const imports = ['@import "@sb1/ffe-core/less/colors";']; |
| 15 | + for (const file of lessFiles) { |
| 16 | + if (!file.includes('ffe-core/less/variables.less')) { |
| 17 | + const importPath = file.replace('.less', ''); |
| 18 | + imports.push(`@import "@sb1/${importPath}";`); |
32 | 19 | } |
33 | | - |
34 | | - const finalImports = imports.join('\n'); |
35 | | - console.log('Generated imports:', finalImports); |
36 | | - |
37 | | - return finalImports; |
38 | | - } catch (error) { |
39 | | - console.error('Error collecting FFE imports:', error); |
40 | | - // Return just the core colors import as fallback |
41 | | - return '@import "@sb1/ffe-core/less/colors";'; |
42 | 20 | } |
| 21 | + return imports.join('\n'); |
43 | 22 | } |
44 | 23 |
|
45 | | -export default defineConfig(async () => ({ |
46 | | - plugins: [react()], |
47 | | - server: { |
48 | | - port: 3000, |
49 | | - open: true, |
50 | | - }, |
51 | | - css: { |
52 | | - preprocessorOptions: { |
53 | | - less: { |
54 | | - javascriptEnabled: true, |
55 | | - math: 'always', |
56 | | - additionalData: await collectFfeImports(), |
| 24 | +export default defineConfig(async () => { |
| 25 | + const { viteStaticCopy } = await import('vite-plugin-static-copy'); |
| 26 | + const config: UserConfig = { |
| 27 | + plugins: [ |
| 28 | + react() as PluginOption, |
| 29 | + viteStaticCopy({ |
| 30 | + targets: [ |
| 31 | + { |
| 32 | + src: 'node_modules/@sb1/**/fonts/*', |
| 33 | + dest: 'assets/fonts', |
| 34 | + }, |
| 35 | + ], |
| 36 | + }) as PluginOption, |
| 37 | + ], |
| 38 | + css: { |
| 39 | + preprocessorOptions: { |
| 40 | + less: { |
| 41 | + javascriptEnabled: true, |
| 42 | + math: 'always', |
| 43 | + additionalData: await collectFfeImports(), |
| 44 | + paths: [resolve(__dirname, 'node_modules')], |
| 45 | + }, |
| 46 | + }, |
| 47 | + postcss: { |
| 48 | + plugins: [ |
| 49 | + purgecss({ |
| 50 | + content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'], |
| 51 | + defaultExtractor: content => |
| 52 | + content.match(/[\w-/:]+(?<!:)/g) || [], |
| 53 | + safelist: { |
| 54 | + standard: [ |
| 55 | + /^ffe-/, |
| 56 | + /^sb1-/, |
| 57 | + 'js-focus-visible', |
| 58 | + /^data-/, |
| 59 | + /^aria-/, |
| 60 | + ], |
| 61 | + deep: [/ffe-.+$/, /sb1-.+$/], |
| 62 | + greedy: [/^ffe-.*$/, /^sb1-.*$/, /^js-.*$/], |
| 63 | + keyframes: [/^ffe-/, /^sb1-/], |
| 64 | + variables: [/^--ffe-/, /^--sb1-/], |
| 65 | + }, |
| 66 | + }), |
| 67 | + ], |
57 | 68 | }, |
58 | 69 | }, |
59 | | - }, |
60 | | - resolve: { |
61 | | - alias: { |
62 | | - '@src': resolve(__dirname, './src'), |
63 | | - '@components': resolve(__dirname, './src/components'), |
64 | | - '@styles': resolve(__dirname, './src/styles'), |
| 70 | + resolve: { |
| 71 | + alias: { |
| 72 | + '@': resolve(__dirname, 'src'), |
| 73 | + '@src': resolve(__dirname, 'src'), |
| 74 | + '@components': resolve(__dirname, 'src/components'), |
| 75 | + '@styles': resolve(__dirname, 'src/styles'), |
| 76 | + }, |
65 | 77 | }, |
66 | | - }, |
67 | | - build: { |
68 | | - outDir: 'dist', |
69 | | - sourcemap: true, |
70 | | - rollupOptions: { |
71 | | - output: { |
72 | | - manualChunks: { |
73 | | - 'react-vendor': ['react', 'react-dom'], |
74 | | - 'sb1-core': ['@sb1/ffe-core', '@sb1/ffe-core-react'], |
| 78 | + build: { |
| 79 | + rollupOptions: { |
| 80 | + output: { |
| 81 | + manualChunks: { |
| 82 | + 'react-vendor': ['react', 'react-dom'], |
| 83 | + 'sb1-core': ['@sb1/ffe-core', '@sb1/ffe-core-react'], |
| 84 | + }, |
75 | 85 | }, |
76 | 86 | }, |
| 87 | + cssCodeSplit: true, |
77 | 88 | }, |
78 | | - }, |
79 | | -})); |
| 89 | + }; |
| 90 | + return config; |
| 91 | +}); |
0 commit comments