使用Rollup打包引入CSS的WebComponent时报Unexpected token错误如何解决

你遇到的SyntaxError指向代码第3行的assert { type: 'css' }语法段：

• 这是ES规范新增的Import Assertions语法，你当前使用的Rollup版本、@rollup/plugin-commonjs插件版本默认不支持该语法
• 你配置的rollup-plugin-postcss也不兼容带assert声明的CSS导入规则，无法正确解析转换这段导入语句

1. 调整CSS导入语句，移除assert声明部分，修改为：

import sheet from './styles/swal.css';

2. 修改Rollup配置里的postcss插件配置，让它直接导出可被adoptedStyleSheets直接使用的CSSStyleSheet实例：

postcss({
  plugins: [],
  extensions: [".css"],
  // 禁止自动注入样式到head
  inject: false,
  // 禁止抽离单独css文件
  extract: false,
  // 导出CSSStyleSheet实例格式
  exportType: 'css-style-sheet'
}),

3. 移除冗余的uglify插件配置：你已经配置了支持ESModule的terser做压缩，uglify不支持ES6+语法，会导致生产打包报错，直接删除配置最后一行的process.env.NODE_ENV === "production" && uglify(),即可
4. 可选：如果你要保留Import Assertions语法，需要将Rollup升级到2.77.0以上版本，同时将@rollup/plugin-commonjs升级到最新版，即可原生支持该语法解析

你代码中使用的Demo.content.cloneNode(true)存在逻辑问题，你当前并没有给Demo类挂载静态content属性，需要提前把对应的template模板赋值给Demo.content，否则组件运行时会抛出undefined报错。

内容的提问来源于stack exchange，提问作者The Dead Man