fix(scripts): remove min.css (#1359)

IDuxFE · Dec 15, 2022 · 20f04f4 · 20f04f4
1 parent 49c8743
commit 20f04f4
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -67,7 +67,6 @@
     "@types/fs-extra": "^9.0.13",
     "@types/gulp": "^4.0.9",
     "@types/inquirer": "^8.2.4",
-    "@types/less": "^3.0.3",
     "@types/lodash-es": "^4.17.6",
     "@types/marked": "^4.0.7",
     "@types/node": "^18.11.0",
@@ -110,8 +109,6 @@
     "jsdom": "^20.0.1",
     "lerna": "^5.6.2",
     "less": "^4.1.3",
-    "less-plugin-clean-css": "^1.5.1",
-    "less-plugin-npm-import": "^2.1.0",
     "lint-staged": "^13.0.3",
     "lodash-es": "^4.17.21",
     "markdownlint-cli": "^0.32.2",

diff --git a/packages/components/default.full.less b/packages/components/default.full.less
@@ -0,0 +1,4 @@
+@import './style/core/reset.default.less';
+@import './style/core/reset-scroll.default.less';
+
+@import './default.less';
diff --git a/packages/components/default.less b/packages/components/default.less
@@ -1,3 +1,5 @@
+@import '../cdk/index.less';
+
 @import './_private/collapse-transition/style/themes/default.less';
 @import './_private/mask/style/themes/default.less';
 @import './_private/overlay/style/themes/default.less';

diff --git a/packages/components/seer.full.less b/packages/components/seer.full.less
@@ -0,0 +1,4 @@
+@import './style/core/reset.seer.less';
+@import './style/core/reset-scroll.seer.less';
+
+@import './seer.less';
diff --git a/packages/components/seer.less b/packages/components/seer.less
@@ -1,3 +1,5 @@
+@import '../cdk/index.less';
+
 @import './_private/collapse-transition/style/themes/seer.less';
 @import './_private/mask/style/themes/seer.less';
 @import './_private/overlay/style/themes/seer.less';

diff --git a/packages/site/plugins/themePlugin.ts b/packages/site/plugins/themePlugin.ts
@@ -1,5 +1,5 @@
 import { mkdirSync, readFileSync } from 'fs'
-import { readFile, writeFile } from 'fs/promises'
+import { writeFile } from 'fs/promises'
 import path from 'path'
 
 import { existsSync, writeFileSync } from 'fs-extra'
@@ -83,7 +83,7 @@ export const themePlugin = (options?: Options): Plugin => {
       await Promise.all(
         options!.themes!.map(async theme => {
           const themeLess = themeLessContent.replace('themes/index', `themes/${theme.key}`)
-          await compile(themeLess, path.join(buildThemeDir, `${theme.key}.css`), true)
+          await compile(themeLess, path.join(buildThemeDir, `${theme.key}.css`))
         }),
       )
     },

diff --git a/packages/site/src/docs/CustomizeTheme.zh.md b/packages/site/src/docs/CustomizeTheme.zh.md
@@ -15,62 +15,36 @@ order: 5
 - `default`: 默认主题
 - `seer`: 安全主题
 
+默认的 `@idux/components/(default|seer).full.(css|less)` 文件中已经包含了内置的 `reset` 样式，如果不需要的话，可以替换成相应的 `@idux/components/(default|seer).(css|less)` 文件，同时应该提供最基础的 reset 样式，参见：[#1194](https://github.com/IDuxFE/idux/issues/1194).
+
 ### 方式一: 使用 CSS
 
 如果项目不使用 Less，可在入口的 CSS 文件(如：`style.css`)或者 ts 文件(如：`idux.ts`/`main.ts`)中，全量引入主题样式文件。
 
-CSS 文件中引入：
-
 ```css
 /* 默认主题*/
-@import "@idux/components/default.min.css";
-@import "@idux/pro/default.min.css";
+@import "@idux/components/default.full.css";
+@import "@idux/pro/default.css";
 
 /* 安全主题 */
-/* @import "@idux/components/seer.min.css" */
-/* @import "@idux/pro/seer.min.css" */
-```
-
-ts 文件中引入：
-
-```ts
-// 默认主题
-import "@idux/components/default.min.css";
-import "@idux/pro/default.min.css";
-
-// 安全主题
-// import "@idux/components/seer.min.css"
-// import "@idux/pro/seer.min.css"
+/* @import "@idux/components/seer.full.css" */
+/* @import "@idux/pro/seer.css" */
 ```
 
 ### 方式二：使用 Less
 
 可在入口的 Less 文件(如：`style.less`)或者 ts 文件(如：`idux.ts`/`main.ts`)中，全量引入主题样式文件, 同时还需要在构建工具中配置 less。
 
-Less 文件中引入：
-
 ```less
 /* 默认主题*/
-@import "@idux/components/default.less";
+@import "@idux/components/default.full.less";
 @import "@idux/pro/default.less";
 
 /* 安全主题 */
-/* @import "@idux/components/seer.less" */
+/* @import "@idux/components/seer.full.less" */
 /* @import "@idux/pro/seer.less" */
 ```
 
-ts 文件中引入：
-
-```ts
-// 默认主题
-import "@idux/components/default.less";
-import "@idux/pro/default.less";
-
-// 安全主题
-// import "@idux/components/seer.less"
-// import "@idux/pro/seer.less"
-```
-
 配置 less, 以 vite 为例，修改 `vite.config.ts`:
 
 ```ts

diff --git a/packages/site/src/docs/Faq.zh.md b/packages/site/src/docs/Faq.zh.md
@@ -8,7 +8,7 @@ order: 10
 
 请确认是否正确引入了组件样式，请参考: [快速上手](/docs/getting-started/zh) 和 [定制主题](/docs/customize-theme/zh) 进行一些必要的配置。
 
-需要强调的是，在没有特殊需求的情况下，请使用组件库提供的 reset 样式，`"@idux/components/style/core/reset.default.min.css"`。如果没有引入它，务必确认是否提供了必要的全局样式，参见[#1194](https://github.com/IDuxFE/idux/issues/1194)。
+需要强调的是，在没有特殊需求的情况下，请使用组件库提供的 reset 样式，`"@idux/components/style/core/reset.default.css"`。如果没有引入它，务必确认是否提供了必要的全局样式，参见[#1194](https://github.com/IDuxFE/idux/issues/1194)。
 
 ## 无法通过 `useModal` 创建弹窗组件？(`useMessage`, `useDrawer`...)
 

diff --git a/packages/site/src/docs/GettingStarted.zh.md b/packages/site/src/docs/GettingStarted.zh.md
@@ -45,24 +45,20 @@ npm install @idux/cdk @idux/components @idux/pro
 
 ### 初始化配置
 
-参考下面的代码，新建一个 `idux.ts` 文件，对 `@idux` 进行初始化配置，包括引入国际化文件，导入模块，引入样式文件等工作。
+参考下面的代码，新建一个 `idux.ts` 文件，对 `@idux` 进行初始化配置，包括引入国际化文件，导入模块，引入样式文件等工作。  
 
 ```ts
 // idux.ts
 import { type App } from "vue";
 
-// 导入 cdk 样式，注意是 `index`, 因为 cdk 不会区分主题
-import "@idux/cdk/index.min.css";
-
-// 如果不需要 reset 全局样式，移除下一行代码，但是这可能导致部分组件样式异常，需要提供一些必须的全局样式
-// 参见：https://github.com/IDuxFE/idux/issues/1194
-import "@idux/components/style/core/reset.default.min.css";
-// 如果不需要 reset 滚动条样式，移除下一行代码
-import "@idux/components/style/core/reset-scroll.default.min.css";
-
+// 示例导入的是 default 主题，如果需要使用其他主题或者定制主题，请参考定制主题的文档
 // 如果需要 css 按需加载，移除下面 2 行代码
-import "@idux/components/default.min.css";
-import "@idux/pro/default.min.css";
+import "@idux/components/default.full.css";
+import "@idux/pro/default.css";
+// 如果需要 css 按需加载，则按需添加下面的代码
+// import "@idux/cdk/index.css";
+// import "@idux/components/style/core/reset.default.css";
+// import "@idux/components/style/core/reset-scroll.default.css";
 
 // 如果需要 js 按需加载，移除下面 3 行代码
 import IduxCdk from "@idux/cdk";
@@ -134,17 +130,11 @@ export default defineConfig({
 我们提供了所有组件的类型定义，你可以参考下面的代码进行导入类型声明。
 
 ```ts
-// vite-env.d.ts
+// env.d.ts
 /// <reference types="vite/client" />
 /// <reference types="@idux/cdk/types" />
 /// <reference types="@idux/components/types" />
 /// <reference types="@idux/pro/types" />
-
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
 ```
 
 ### 文档提示
@@ -171,7 +161,7 @@ npm run dev
 
 当你只用到 `@idux` 的部分组件且比较在意包体积大小时，可以只加载用到的组件。
 
-推荐仅按需加载 js 代码，css 代码无需按需加载, 首先你需要修改 `idux.ts` 中的代码。
+推荐**仅按需加载 js 代码**，css 代码无需按需加载, 首先你需要修改 `idux.ts` 中的代码。
 
 ```diff
 - import IduxCdk from "@idux/cdk";
@@ -199,9 +189,9 @@ export default defineConfig({
     /* ... */
     Components({
       resolvers: [IduxResolver()],
-      // 可以通过指定 `importStyle` 来按需加载 css 或 less 代码
-      // 别忘了移除掉 idux.ts 中的样式导入代码
-      // resolvers: [IduxResolver({ importStyle: 'css' })],
+      // 可以通过指定 `importStyle` 来按需加载 css 或 less 代码, 也支持不同的主题
+      // 别忘了修改 idux.ts 中的样式导入代码
+      // resolvers: [IduxResolver({ importStyle: 'css', importStyleTheme: 'default' })],
     }),
   ]
 })

diff --git a/packages/site/src/global/codesandbox.ts b/packages/site/src/global/codesandbox.ts
@@ -110,8 +110,8 @@ import IduxCdk from '@idux/cdk';
 import IduxComponents from '@idux/components';
 import IduxPro from '@idux/pro';
 
-import '@idux/components/default.min.css';
-import '@idux/pro/default.min.css';
+import '@idux/components/default.css';
+import '@idux/pro/default.css';
 
 import { createGlobalConfig } from "@idux/components/config";
 import {

diff --git a/packages/site/src/styles/themes/default.less b/packages/site/src/styles/themes/default.less
@@ -1,9 +1,2 @@
-// @import '@idux/components/style/core/reset.default.less';
-// @import '@idux/components/style/core/reset-scroll.default.less';
-// @import '@idux/components/default.less';
-// @import '@idux/pro/default.less';
-
-@import '../../../../components/style/core/reset.default.less';
-@import '../../../../components/style/core/reset-scroll.default.less';
-@import '../../../../components/default.less';
+@import '../../../../components/default.full.less';
 @import '../../../../pro/default.less';
diff --git a/packages/site/src/styles/themes/seer.less b/packages/site/src/styles/themes/seer.less
@@ -1,9 +1,2 @@
-// @import '@idux/components/style/core/reset.seer.less';
-// @import '@idux/components/style/core/reset-scroll.seer.less';
-// @import '@idux/components/seer.less';
-// @import '@idux/pro/seer.less';
-
-@import '../../../../components/style/core/reset.seer.less';
-@import '../../../../components/style/core/reset-scroll.seer.less';
-@import '../../../../components/seer.less';
+@import '../../../../components/seer.full.less';
 @import '../../../../pro/seer.less';
diff --git a/scripts/gulp/build/less.ts b/scripts/gulp/build/less.ts
@@ -1,36 +1,28 @@
 import path from 'path'
 
 import { copy, copyFile, pathExists, readFile, readdirSync, remove, writeFile } from 'fs-extra'
-import less from 'less'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import LessPluginCleanCSS from 'less-plugin-clean-css'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+
 // @ts-ignore
-import NpmImportPlugin from 'less-plugin-npm-import'
+import less from 'less'
 
 import { gulpConfig } from '../gulpConfig'
 
 const { themes } = gulpConfig.build
 
-export async function compile(content: string, savePath: string, min: boolean, rootPath?: string): Promise<void> {
-  const plugins: Less.Plugin[] = []
-  if (min) {
-    plugins.push(new LessPluginCleanCSS({ advanced: true }))
-  }
+export async function compile(content: string, savePath: string, rootPath?: string): Promise<void> {
+  const plugins: any[] = []
 
-  const lessOptions: Less.Options = { plugins, javascriptEnabled: true }
+  const lessOptions: any = { plugins, javascriptEnabled: true }
 
   if (rootPath) {
     lessOptions.paths = [path.dirname(rootPath)]
     lessOptions.filename = rootPath
-    plugins.push(new NpmImportPlugin({ prefix: '~' }))
   }
 
   return less
     .render(content, lessOptions)
-    .then(({ css }) => writeFile(savePath, css))
-    .catch(err => Promise.reject(err))
+    .then(({ css }: any) => writeFile(savePath, css))
+    .catch((err: any) => Promise.reject(err))
 }
 
 function compileTheme(content: string, saveDirname: string, themeName: string) {
@@ -60,7 +52,7 @@ export async function compileLess(
       const lessPath = `${styleDirname}/themes/${themeName}.less`
       const lessContent = await readFile(lessPath, { encoding: 'utf8' })
 
-      promiseList.push(compile(lessContent, path.join(outputDirname, `themes/${themeName}.css`), false, lessPath))
+      promiseList.push(compile(lessContent, path.join(outputDirname, `themes/${themeName}.css`), lessPath))
 
       const themePath = `${styleDirname}/themes/${themeName}.ts`
       const themeContent = await readFile(themePath, { encoding: 'utf8' })
@@ -78,7 +70,7 @@ export async function compileLess(
         await copy(styleDirname, outputDirname)
         const lessPath = `${styleDirname}/index.less`
         const lessContent = await readFile(lessPath, { encoding: 'utf8' })
-        promiseList.push(compile(lessContent, path.join(outputDirname, `index.css`), false, lessPath))
+        promiseList.push(compile(lessContent, path.join(outputDirname, `index.css`), lessPath))
       }
 
       // handler private components
@@ -102,43 +94,31 @@ export async function compileLess(
   if (packageName === 'cdk') {
     await copyFile(`${targetDirname}/index.less`, `${distDirname}/index.less`)
     const entryContent = `@import "${path.posix.join(distDirname, 'index.less')}";`
-    promiseList.push(compile(entryContent, path.join(distDirname, `index.css`), false))
-    promiseList.push(compile(entryContent, path.join(distDirname, `index.min.css`), true))
+    promiseList.push(compile(entryContent, path.join(distDirname, `index.css`)))
   } else {
     // Compile concentrated less file to CSS file.
     await copy(path.resolve(targetDirname, 'style'), path.resolve(distDirname, 'style'))
     for (const theme of themes) {
       await copyFile(`${targetDirname}/${theme}.less`, `${distDirname}/${theme}.less`)
       const entryContent = `@import "${path.posix.join(distDirname, theme + '.less')}";`
-      promiseList.push(compile(entryContent, path.join(distDirname, `${theme}.css`), false))
-      promiseList.push(compile(entryContent, path.join(distDirname, `${theme}.min.css`), true))
+      promiseList.push(compile(entryContent, path.join(distDirname, `${theme}.css`)))
 
       // Compile css file that doesn't have component-specific styles.
       if (packageName === 'components') {
+        await copyFile(`${targetDirname}/${theme}.full.less`, `${distDirname}/${theme}.full.less`)
+        const entryFullContent = `@import "${path.posix.join(distDirname, theme + '.full.less')}";`
+        promiseList.push(compile(entryFullContent, path.join(distDirname, `${theme}.full.css`)))
+
         const resetPath = path.join(targetDirname, 'style/core', `reset.${theme}.less`)
         const resetContent = await readFile(resetPath, { encoding: 'utf8' })
-        promiseList.push(
-          compile(resetContent, path.join(distDirname, 'style/core', `reset.${theme}.css`), false, resetPath),
-        )
-        promiseList.push(
-          compile(resetContent, path.join(distDirname, 'style/core', `reset.${theme}.min.css`), true, resetPath),
-        )
+        promiseList.push(compile(resetContent, path.join(distDirname, 'style/core', `reset.${theme}.css`), resetPath))
 
         const resetScrollPath = path.join(targetDirname, 'style/core', `reset-scroll.${theme}.less`)
         const resetScrollContent = await readFile(resetScrollPath, { encoding: 'utf8' })
         promiseList.push(
           compile(
             resetScrollContent,
             path.join(distDirname, 'style/core', `reset-scroll.${theme}.css`),
-            false,
-            resetScrollPath,
-          ),
-        )
-        promiseList.push(
-          compile(
-            resetScrollContent,
-            path.join(distDirname, 'style/core', `reset-scroll.${theme}.min.css`),
-            true,
             resetScrollPath,
           ),
         )