react-app-shared/rollup.config.js at develop · NCIOCPL/react-app-shared · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import scss from 'rollup-plugin-scss';
import postcssModules from 'postcss-modules';

const external = ['react', 'react-dom', 'react/jsx-runtime'];

function scssModules() {
	const cssModulesExports = {};
	return scss({
		processor: () => ({
			plugins: [
				postcssModules({
					generateScopedName: '[name]__[local]___[hash:base64:5]',
					getJSON(cssFileName, json) {
						cssModulesExports[cssFileName] = json;
					},
				}),
			],
		}),
		output: false,
	});
}

export default [
	// ESM build
	{
		input: 'src/index.ts',
		output: {
			dir: 'dist/esm',
			format: 'esm',
			sourcemap: true,
			preserveModules: true,
			preserveModulesRoot: 'src',
		},
		plugins: [
			resolve(),
			commonjs(),
			typescript({
				tsconfig: './tsconfig.build.json',
				outDir: 'dist/esm',
				declaration: false,
				declarationDir: undefined,
			}),
			scssModules(),
		],
		external,
	},
	// CJS build
	{
		input: 'src/index.ts',
		output: {
			dir: 'dist/cjs',
			format: 'cjs',
			sourcemap: true,
			preserveModules: true,
			preserveModulesRoot: 'src',
		},
		plugins: [
			resolve(),
			commonjs(),
			typescript({
				tsconfig: './tsconfig.build.json',
				outDir: 'dist/cjs',
				declaration: false,
				declarationDir: undefined,
			}),
			scssModules(),
		],
		external,
	},
	// Type declarations
	{
		input: 'src/index.ts',
		output: {
			dir: 'dist/types',
			format: 'esm',
			preserveModules: true,
			preserveModulesRoot: 'src',
		},
		plugins: [dts()],
		external: [/\.scss$/, /\.css$/],
	},
	// Standalone CSS bundle
	{
		input: 'src/index.ts',
		output: {
			dir: 'dist/styles',
			format: 'esm',
			assetFileNames: '[name][extname]',
		},
		plugins: [
			resolve(),
			commonjs(),
			typescript({
				tsconfig: './tsconfig.build.json',
				outDir: 'dist/styles',
				declaration: false,
				declarationDir: undefined,
			}),
			scss({
				output: 'dist/styles/index.css',
			}),
		],
		external,
	},
];