fix(scripts): remove min.css

IDuxFE · Dec 15, 2022 · 32208ac · 32208ac
1 parent 49c8743
commit 32208ac
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 65 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/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
@@ -22,25 +22,29 @@ order: 5
 CSS 文件中引入：
 
 ```css
+@import "@idux/cdk/index.css";
+
 /* 默认主题*/
-@import "@idux/components/default.min.css";
-@import "@idux/pro/default.min.css";
+@import "@idux/components/default.css";
+@import "@idux/pro/default.css";
 
 /* 安全主题 */
-/* @import "@idux/components/seer.min.css" */
-/* @import "@idux/pro/seer.min.css" */
+/* @import "@idux/components/seer.css" */
+/* @import "@idux/pro/seer.css" */
 ```
 
 ts 文件中引入：
 
 ```ts
+import "@idux/cdk/index.css";
+
 // 默认主题
-import "@idux/components/default.min.css";
-import "@idux/pro/default.min.css";
+import "@idux/components/default.css";
+import "@idux/pro/default.css";
 
 // 安全主题
-// import "@idux/components/seer.min.css"
-// import "@idux/pro/seer.min.css"
+// import "@idux/components/seer.css"
+// import "@idux/pro/seer.css"
 ```
 
 ### 方式二：使用 Less
@@ -50,6 +54,8 @@ import "@idux/pro/default.min.css";
 Less 文件中引入：
 
 ```less
+@import "@idux/cdk/index.less";
+
 /* 默认主题*/
 @import "@idux/components/default.less";
 @import "@idux/pro/default.less";
@@ -62,6 +68,8 @@ Less 文件中引入：
 ts 文件中引入：
 
 ```ts
+import "@idux/cdk/index.less";
+
 // 默认主题
 import "@idux/components/default.less";
 import "@idux/pro/default.less";

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,25 @@ 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";
+import "@idux/cdk/index.css";
 
+// 示例导入的是 default 主题，如果需要使用其他主题或者定制主题，请参考定制主题的文档
 // 如果不需要 reset 全局样式，移除下一行代码，但是这可能导致部分组件样式异常，需要提供一些必须的全局样式
 // 参见：https://github.com/IDuxFE/idux/issues/1194
-import "@idux/components/style/core/reset.default.min.css";
+import "@idux/components/style/core/reset.default.css";
 // 如果不需要 reset 滚动条样式，移除下一行代码
-import "@idux/components/style/core/reset-scroll.default.min.css";
+import "@idux/components/style/core/reset-scroll.default.css";
 
 // 如果需要 css 按需加载，移除下面 2 行代码
-import "@idux/components/default.min.css";
-import "@idux/pro/default.min.css";
+import "@idux/components/default.css";
+import "@idux/pro/default.css";
 
 // 如果需要 js 按需加载，移除下面 3 行代码
 import IduxCdk from "@idux/cdk";
@@ -134,17 +135,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;
-}
 ```
 
 ### 文档提示

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/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,27 @@ 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') {
         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,
           ),
         )