build(build): [package] remove imports with side effects

internal/build/src/tasks/modules.ts

@@ -1,3 +1,5 @@
+import path from 'path'
+import { series } from 'gulp'
 import { rollup } from 'rollup'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
@@ -7,15 +9,47 @@ import commonjs from '@rollup/plugin-commonjs'
 import esbuild from 'rollup-plugin-esbuild'
 import glob from 'fast-glob'
 import { epRoot, excludeFiles, pkgRoot } from '@element-plus/build-utils'
-import { generateExternal, writeBundles } from '../utils'
+import { generateExternal, withTaskName, writeBundles } from '../utils'
 import { ElementPlusAlias } from '../plugins/element-plus-alias'
 import { buildConfigEntries, target } from '../build-info'
+import type { TaskFunction } from 'gulp'
 
-import type { OutputOptions } from 'rollup'
+import type { OutputOptions, Plugin } from 'rollup'
 
-export const buildModules = async () => {
+const plugins: Plugin[] = [
+  ElementPlusAlias(),
+  VueMacros({
+    setupComponent: false,
+    setupSFC: false,
+    plugins: {
+      vue: vue({
+        isProduction: true,
+        template: {
+          compilerOptions: {
+            hoistStatic: false,
+            cacheHandlers: false,
+          },
+        },
+      }),
+      vueJsx: vueJsx(),
+    },
+  }),
+  nodeResolve({
+    extensions: ['.mjs', '.js', '.json', '.ts'],
+  }),
+  commonjs(),
+  esbuild({
+    sourceMap: true,
+    target,
+    loaders: {
+      '.vue': 'ts',
+    },
+  }),
+]
+
+async function buildModulesComponents() {
   const input = excludeFiles(
-    await glob('**/*.{js,ts,vue}', {
+    await glob(['**/*.{js,ts,vue}', '!**/style/(index|css).{js,ts,vue}'], {
       cwd: pkgRoot,
       absolute: true,
       onlyFiles: true,
@@ -23,39 +57,11 @@ export const buildModules = async () => {
   )
   const bundle = await rollup({
     input,
-    plugins: [
-      ElementPlusAlias(),
-      VueMacros({
-        setupComponent: false,
-        setupSFC: false,
-        plugins: {
-          vue: vue({
-            isProduction: true,
-            template: {
-              compilerOptions: {
-                hoistStatic: false,
-                cacheHandlers: false,
-              },
-            },
-          }),
-          vueJsx: vueJsx(),
-        },
-      }),
-      nodeResolve({
-        extensions: ['.mjs', '.js', '.json', '.ts'],
-      }),
-      commonjs(),
-      esbuild({
-        sourceMap: true,
-        target,
-        loaders: {
-          '.vue': 'ts',
-        },
-      }),
-    ],
+    plugins,
     external: await generateExternal({ full: false }),
-    treeshake: false,
+    treeshake: { moduleSideEffects: false },
   })
+
   await writeBundles(
     bundle,
     buildConfigEntries.map(([module, config]): OutputOptions => {
@@ -71,3 +77,38 @@ export const buildModules = async () => {
     })
   )
 }
+
+async function buildModulesStyles() {
+  const input = excludeFiles(
+    await glob('**/style/(index|css).{js,ts,vue}', {
+      cwd: pkgRoot,
+      absolute: true,
+      onlyFiles: true,
+    })
+  )
+  const bundle = await rollup({
+    input,
+    plugins,
+    treeshake: false,
+  })
+
+  await writeBundles(
+    bundle,
+    buildConfigEntries.map(([module, config]): OutputOptions => {
+      return {
+        format: config.format,
+        dir: path.resolve(config.output.path, 'components'),
+        exports: module === 'cjs' ? 'named' : undefined,
+        preserveModules: true,
+        preserveModulesRoot: epRoot,
+        sourcemap: true,
+        entryFileNames: `[name].${config.ext}`,
+      }
+    })
+  )
+}
+
+export const buildModules: TaskFunction = series(
+  withTaskName('buildModulesComponents', buildModulesComponents),
+  withTaskName('buildModulesStyles', buildModulesStyles)
+)

packages/components/package.json

@@ -10,6 +10,8 @@
     "vue": "^3.2.0"
   },
   "types": "index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "*/style/*"
+  ],
   "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd"
 }