diff --git a/package.json b/package.json index 4d6d16368..965ff4e6f 100644 --- 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 new file mode 100644 index 000000000..8456f676c --- /dev/null +++ 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 index d24cd376d..5087049be 100644 --- 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 new file mode 100644 index 000000000..e7fd22436 --- /dev/null +++ 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 index 7b162b361..58f923a4b 100644 --- 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 index e2bb7e772..827dd8ab5 100644 --- 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 index b042385aa..af624d91a 100644 --- 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 index be5e23e23..a755e8c25 100644 --- 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 index 0a461593b..efd71f20c 100755 --- 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 /// /// /// /// - -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 index 5bfabe8b0..097675cd2 100644 --- 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 index 2f601dcb3..29a583caa 100644 --- 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 index e7c0d9cd6..94d5a5fe4 100644 --- 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 index 05814ea75..965c79895 100644 --- 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 { - const plugins: Less.Plugin[] = [] - if (min) { - plugins.push(new LessPluginCleanCSS({ advanced: true })) - } +export async function compile(content: string, savePath: string, rootPath?: string): Promise { + 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,27 +94,24 @@ 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' }) @@ -130,15 +119,6 @@ export async function compileLess( 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, ), )