Merge 209e134 into 355fa24

package.json

@@ -22,6 +22,7 @@
 		"@types/node": "^18.7.13",
 		"changeset": "^0.2.6",
 		"esbuild": "^0.15.8",
+		"rimraf": "^5.0.0",
 		"turbo": "^1.8.8",
 		"vue": "^3.2.37"
 	}

packages/components/CHANGELOG.md

@@ -1,5 +1,16 @@
 # rudder-ui
 
+## 0.2.0
+
+### Minor Changes
+
+- 7717013: add extract scss compile
+
+### Patch Changes
+
+- Updated dependencies [7717013]
+  - @rudder-ui/utils@0.2.0
+
 ## 0.1.0
 
 ### Minor Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rudder-ui",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "all components are settled here",
 	"license": "MIT",
 	"main": "./lib/index.js",
@@ -30,8 +30,8 @@
 	},
 	"unpkg": "./dist/index.js",
 	"scripts": {
-		"dev": "vite build -w",
-		"build": "vite build"
+		"dev": "rimraf dist es lib && vite build -w",
+		"build": "rimraf dist es lib && vite build"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -41,17 +41,18 @@
 	},
 	"sideEffects": false,
 	"devDependencies": {
-		"@vitejs/plugin-vue": "^3.0.3",
-		"@vitejs/plugin-vue-jsx": "^2.0.1",
+		"@rollup/plugin-terser": "^0.4.1",
+		"@vitejs/plugin-vue": "^4.1.0",
+		"@vitejs/plugin-vue-jsx": "^3.0.1",
+		"rollup-plugin-sass": "^1.12.19",
 		"rollup-plugin-scss": "^3.0.0",
-		"rollup-plugin-terser": "^7.0.2",
 		"sass": "^1.54.6",
-		"unplugin-vue-macros": "^0.12.0",
-		"vite": "^3.0.7",
+		"unplugin-vue-macros": "^2.0.0",
+		"vite": "^4.2.2",
 		"vite-plugin-dts": "^1.4.1",
 		"vue": "^3.2.37"
 	},
 	"dependencies": {
-		"@rudder-ui/utils": "workspace:^0.1.0"
+		"@rudder-ui/utils": "workspace:^0.2.0"
 	}
 }

packages/components/rudder.scss

@@ -1,3 +1,5 @@
+@import './style/base.scss';
+
 [class^='rudder-'],
 [class*=' rudder-'] {
 	padding: 0;
@@ -9,7 +11,9 @@
 body {
 	// 为什么这样写 font-family
 	// 答案见 https://github.com/zenozeng/fonts.css/
-	font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans',
-		'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei',
-		'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
+	font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
+		'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
+		'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
+		'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
+		SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
 }

packages/components/style/base.scss

@@ -0,0 +1,21 @@
+$h: 32px;
+$border-color: #918787;
+$color: #333;
+$blue: #40a9ff;
+$red: red;
+$grey: grey;
+
+:root {
+	--r-border-color: #{$blue};
+	--r-border-radius: 4px;
+}
+
+html:not(.dark) {
+	--r-text-color: #333;
+	--r-background: #fff;
+}
+
+html.dark {
+	--r-text-color: #fff;
+	--r-background: #333;
+}

packages/components/tabs/src/Tabs.vue

@@ -83,13 +83,12 @@ export default defineComponent({
 
 <style lang="scss">
 $blue: #40a9ff;
-$color: #333;
 $border-color: #d9d9d9;
 
 .rudder-tabs {
 	&-nav {
 		display: flex;
-		color: $color;
+		color: var(--r-text-color);
 		border-bottom: 1px solid $border-color;
 
 		&-item {

packages/components/vite.config.ts

@@ -1,13 +1,89 @@
-import { defineConfig } from 'vite'
-import { resolve } from 'path'
+import { defineConfig, PluginOption } from 'vite'
+import path from 'path'
 import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
-import { terser } from 'rollup-plugin-terser'
-import scss from 'rollup-plugin-scss'
+import terser from '@rollup/plugin-terser'
 import * as dartSass from 'sass'
-import VueMacros from 'unplugin-vue-macros/vite'
+import VueMacros from 'unplugin-vue-macros/dist/vite.js'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
+const externalScssPlugin: (options?: {
+	externalCss: string
+}) => PluginOption = (options) => {
+	const { externalCss } = options || {}
+
+	const vue_prefix = '.vue_vue_type_style_index_0_lang'
+
+	return {
+		name: 'external-scss',
+		generateBundle(options, bundle) {
+			// 处理css文件命名
+			const moduleIds = [...this.getModuleIds()]
+
+			Object.keys(bundle).map((name) => {
+				if (name.includes('.css')) {
+					const fileName = bundle[name].fileName
+					const moduleId = moduleIds.find((item) =>
+						item.includes(bundle[name].name.split('.css')[0])
+					)
+					bundle[name].fileName =
+						path.relative(__dirname, path.dirname(moduleId)) +
+						'/' +
+						fileName.replace(vue_prefix, '')
+				}
+
+				// 自动引入 css
+				if (/\.vue\.js$/.test(name)) {
+					const fileName = name.split('/').pop().split('.')[0]
+
+					//@ts-ignore
+					const code = bundle[name].code
+
+					if (options.format !== 'umd' && !!bundle[fileName + `${vue_prefix}.css`]) {
+						// cjs 模块处理 use strict
+						if (code.includes('"use strict";')) {
+							//@ts-ignore
+							bundle[name].code = bundle[name].code.replace(
+								'"use strict";\n',
+								`"use strict";\nimport "./${fileName}.css";\n`
+							)
+						} else {
+							// es 模块引入 css
+							//@ts-ignore
+							bundle[name].code = `import "./${fileName}.css";\n` + code
+						}
+					}
+				}
+			})
+
+			// 处理额外的scss文件，并合并到 bundle 中进行输出
+			const result = dartSass.compile(path.relative(__dirname, externalCss), {
+				sourceMap: true,
+			})
+			const name = path.relative(__dirname, externalCss)
+			bundle[name] = {
+				fileName: name.replace('scss', 'css'),
+				source: result.css,
+				type: 'asset',
+				needsCodeReference: true,
+				name: name,
+			}
+
+			//  umd 环境不需要生成 sourcemap
+			if (options.format !== 'umd') {
+				const mapName = name + '.map'
+				bundle[mapName] = {
+					fileName: mapName.replace('scss', 'css'),
+					source: JSON.stringify(result.sourceMap),
+					type: 'asset',
+					needsCodeReference: true,
+					name: mapName,
+				}
+			}
+		},
+	}
+}
+
 export default defineConfig({
 	plugins: [
 		VueMacros({
@@ -18,23 +94,29 @@ export default defineConfig({
 		}),
 		dts({
 			entryRoot: '.',
-			outputDir: [resolve(__dirname, './es')],
+			outputDir: [path.resolve(__dirname, './es')],
+		}),
+		externalScssPlugin({
+			externalCss: path.resolve(__dirname, './rudder.scss'),
 		}),
-		scss({ include: /\.scss$/, sass: dartSass, output: './dist/index.css' }),
 	],
+	base: './',
+	css: {},
 	build: {
 		target: 'modules',
 		emptyOutDir: false,
-		minify: false,
+		minify: true,
 		// 忽略
 		lib: {
-			formats: ['es', 'cjs'],
-			entry: resolve(__dirname, 'index.ts'),
+			entry: path.resolve(__dirname, 'index.ts'),
 			name: 'rudder-ui',
 		},
+		cssCodeSplit: true,
 		rollupOptions: {
 			// 确保外部化处理那些你不想打包进库的依赖
 			external: ['vue', '@rudder-ui/utils'],
+			input: [path.resolve(__dirname, './index.ts')],
+			preserveEntrySignatures: 'strict',
 			output: [
 				{
 					format: 'es',
@@ -44,7 +126,7 @@ export default defineConfig({
 					preserveModules: true,
 					sourcemap: true,
 					//配置打包根目录
-					dir: resolve(__dirname, './es'),
+					dir: path.resolve(__dirname, './es'),
 				},
 				{
 					format: 'commonjs',
@@ -54,23 +136,25 @@ export default defineConfig({
 					preserveModules: true,
 					sourcemap: true,
 					//配置打包根目录
-					dir: resolve(__dirname, './lib'),
+					dir: path.resolve(__dirname, './lib'),
 				},
 				{
 					format: 'umd',
 					entryFileNames: 'index.js',
 					globals: {
 						vue: 'Vue',
 					},
-					dir: resolve(__dirname, './dist'),
+					dir: path.resolve(__dirname, './dist'),
+					name: 'rudder-ui',
 				},
 				{
 					format: 'umd',
 					entryFileNames: 'index.min.js',
 					globals: {
 						vue: 'Vue',
 					},
-					dir: resolve(__dirname, './dist'),
+					name: 'rudder-ui',
+					dir: path.resolve(__dirname, './dist'),
 					plugins: [terser()],
 				},
 			],

packages/utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rudder-ui/utils
 
+## 0.2.0
+
+### Minor Changes
+
+- 7717013: upgrade terser
+
 ## 0.1.0
 
 ### Minor Changes

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rudder-ui/utils",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es",

packages/utils/rollup.config.js

@@ -1,5 +1,5 @@
 const typescript = require('rollup-plugin-typescript2')
-const { terser } = require('rollup-plugin-terser')
+const terser = require('@rollup/plugin-terser')
 const pkg = require('./package.json')
 
 module.exports = {