Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(themes): output multiple themes #3020

Merged
merged 1 commit into from
Feb 27, 2025
Merged

chore(themes): output multiple themes #3020

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 27 additions & 34 deletions scripts/build-taro.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,22 +232,13 @@ async function buildUMD() {

async function buildAllCSS() {
// 拷贝styles
async function copyStyles() {
await copy(
resolve(__dirname, '../src/styles'),
resolve(__dirname, `../${dist}/styles`),
)

async function generateAllStyles() {
const projectID = process.env.VITE_APP_PROJECT_ID
const content = [
`@import './styles/theme-default.scss';`,
`@import './styles/variables.scss';`,
`@import './styles/variables${projectID ? `-${projectID}` : ''}.scss';`,
`@import './styles/mixins/index.scss';`,
`@import './styles/animation/index.scss';`,
]
const projectID = process.env.VITE_APP_PROJECT_ID
if (projectID) {
content[1] = `@import '../variables-${projectID}.scss';`
}
const scssFiles = await glob([`${dist}/es/packages/**/*.scss`])
scssFiles.forEach((file) => {
content.push(
Expand All @@ -257,7 +248,7 @@ async function buildAllCSS() {
dest(`${dist}/style.scss`, content.join('\n'))
}

await copyStyles()
await generateAllStyles()
await vite.build({
logLevel: 'error',
resolve: {
Expand All @@ -277,6 +268,25 @@ async function buildAllCSS() {
}

async function buildThemeCSS() {
const files = await glob([`${dist}/styles/theme-*.scss`], {
ignore: [`${dist}/types/src/**/*.taro.d.ts`],
})
const projectID = process.env.VITE_APP_PROJECT_ID
const inputFiles = {}
files.forEach(filePath => {
const themeName = basename(filePath, 'scss').replace('theme-', '')
if (!projectID) {
inputFiles[themeName] = `./${filePath}`
} else {
if (themeName === projectID) {
inputFiles['default'] = `./${filePath}`
}
if (themeName === `${projectID}-dark`) {
inputFiles['dark'] = `./${filePath}`
}
}
})

await vite.build({
logLevel: 'error',
resolve: {
Expand All @@ -285,16 +295,14 @@ async function buildThemeCSS() {
build: {
emptyOutDir: false,
rollupOptions: {
input: inputFiles,
output: [
{
dir: `${dist}/styles/themes`,
assetFileNames: 'default.css',
assetFileNames: '[name].css',
},
],
},
lib: {
entry: `./${dist}/styles/themes/default.scss`,
},
},
})
}
Expand All @@ -305,21 +313,6 @@ async function copyStyles() {
resolve(__dirname, '../src/styles'),
resolve(__dirname, `../${dist}/styles`),
)

let content = [
`@import '../theme-default.scss';`,
`@import '../theme-dark.scss';`,
`@import '../jd-font';`,
]
const projectID = process.env.VITE_APP_PROJECT_ID
if (projectID) {
content = [
`@import '../theme-${projectID}.scss';`,
`@import '../jd-font';`,
]
}

dest(`${dist}/styles/themes/default.scss`, content.join('\n'))
}

// 构建样式
Expand Down Expand Up @@ -443,6 +436,8 @@ async function copyReleaseFiles() {
const npmPublishDir = dist.replace('dist', '')
await copy(join(__dirname, '../README.md'), join(`${npmPublishDir}/README.md`))
await copy(join(__dirname, '../CHANGELOG.md'), join(`${npmPublishDir}/CHANGELOG.md`))
await copy(join(__dirname, '../src/packages/lottie/animation'), join(`${npmPublishDir}/dist/es/packages/lottie/animation`))
await copy(join(__dirname, '../src/packages/lottie/animation'), join(`${npmPublishDir}/dist/cjs/packages/lottie/animation`))
await writeFile(join(__dirname, `../${npmPublishDir}/package.json`), generateReleasePackageJson())
}

Expand Down Expand Up @@ -484,8 +479,6 @@ console.time('Build Declaration')
await buildDeclaration()
console.timeEnd('Build Declaration')

// await exportProps()

await deleteAsync([
`${dist}/es/packages/nutui.react.js`,
`${dist}/es/packages/nutui.react.d.ts`,
Expand Down
69 changes: 34 additions & 35 deletions scripts/build.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,25 +177,16 @@ async function buildUMD(p) {
},
})
}

// 针对不同包构建全量的 style
async function buildAllCSS() {
// 拷贝styles
async function copyStyles() {
await copy(
resolve(__dirname, '../src/styles'),
resolve(__dirname, `../${dist}/styles`),
)

async function generateAllStyles() {
const projectID = process.env.VITE_APP_PROJECT_ID
const content = [
`@import './styles/theme-default.scss';`,
`@import './styles/variables.scss';`,
`@import './styles/variables${projectID ? `-${projectID}` : ''}.scss';`,
`@import './styles/mixins/index.scss';`,
`@import './styles/animation/index.scss';`,
]
const projectID = process.env.VITE_APP_PROJECT_ID
if (projectID) {
content[1] = `@import '../variables-${projectID}.scss';`
}
const scssFiles = await glob([`${dist}/es/packages/**/*.scss`])
scssFiles.forEach((file) => {
content.push(
Expand All @@ -205,7 +196,7 @@ async function buildAllCSS() {
dest(`${dist}/style.scss`, content.join('\n'))
}

await copyStyles()
await generateAllStyles()
await vite.build({
logLevel: 'error',
resolve: {
Expand All @@ -225,6 +216,30 @@ async function buildAllCSS() {
}

async function buildThemeCSS() {
const files = await glob([`${dist}/styles/theme-*.scss`], {
ignore: [`${dist}/types/src/**/*.taro.d.ts`],
})
const projectID = process.env.VITE_APP_PROJECT_ID
const inputFiles = {}
// nuitui 官方包包含全部主题文件，包括：
// default.css 默认明亮主题
// dark.css 默认暗黑主题
// jmapp.css、jrkf.css 主题
// 例如：jmapp 包只包含 jmapp 的主题文件，且是默认主题文件。
files.forEach(filePath => {
const themeName = basename(filePath, 'scss').replace('theme-', '')
if (!projectID) {
inputFiles[themeName] = `./${filePath}`
} else {
if (themeName === projectID) {
inputFiles['default'] = `./${filePath}`
}
if (themeName === `${projectID}-dark`) {
inputFiles['dark'] = `./${filePath}`
}
}
})

await vite.build({
logLevel: 'error',
resolve: {
Expand All @@ -233,41 +248,23 @@ async function buildThemeCSS() {
build: {
emptyOutDir: false,
rollupOptions: {
input: inputFiles,
output: [
{
dir: `${dist}/styles/themes`,
assetFileNames: 'default.css',
assetFileNames: '[name].css',
},
],
},
lib: {
entry: `./${dist}/styles/themes/default.scss`,
},
},
})
}

// 拷贝styles
async function copyStyles() {
await copy(
resolve(__dirname, '../src/styles'),
resolve(__dirname, `../${dist}/styles`),
)

let content = [
`@import '../theme-default.scss';`,
`@import '../theme-dark.scss';`,
`@import '../jd-font';`,
]
const projectID = process.env.VITE_APP_PROJECT_ID
if (projectID) {
content = [
`@import '../theme-${projectID}.scss';`,
`@import '../jd-font';`,
]
}

dest(`${dist}/styles/themes/default.scss`, content.join('\n'))
}

// 构建样式
Expand Down Expand Up @@ -384,6 +381,8 @@ async function copyReleaseFiles() {
const npmPublishDir = dist.replace('dist', '')
await copy(join(__dirname, '../README.md'), join(`${npmPublishDir}/README.md`))
await copy(join(__dirname, '../CHANGELOG.md'), join(`${npmPublishDir}/CHANGELOG.md`))
await copy(join(__dirname, '../src/packages/lottie/animation'), join(`${npmPublishDir}/dist/es/packages/lottie/animation`))
await copy(join(__dirname, '../src/packages/lottie/animation'), join(`${npmPublishDir}/dist/cjs/packages/lottie/animation`))
await writeFile(join(__dirname, `../${npmPublishDir}/package.json`), generateReleasePackageJson())
}

Expand Down Expand Up @@ -438,4 +437,4 @@ console.timeEnd('Build JSDoc')

console.time('Copy package.json readme.md')
await copyReleaseFiles()
console.timeEnd('Copy package.json readme.md')
console.timeEnd('Copy package.json readme.md')
2 changes: 1 addition & 1 deletion scripts/replace-css-var.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const variables = fs.readFileSync(

const theme = fs.readFileSync(
path.join(__dirname, '../src/styles/theme-default.scss'),
).toString()
).toString().replace('@import "./jd-font";', '').replace(`@import './jd-font';`, '')

const exclude = ['icon']
components.forEach((component) => {
Expand Down
2 changes: 1 addition & 1 deletion src/packages/configprovider/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ You can override these CSS variables directly in your code, and the styling of t
}
```

> @nutui/nutui-react comes with two theme files default：@nutui/nutui-react/dist/styles/theme-default.scss; dark：@nutui/nutui-react/dist/styles/theme-dark.scss; If you want to use the dark theme, you can import the dark theme file in your project.
> @nutui/nutui-react comes with two theme files default：@nutui/nutui-react/dist/styles/themes/default.css; dark：@nutui/nutui-react/dist/styles/themes/dark.css; If you want to use the dark theme, you can import the dark theme file in your project.

#### Overrides via ConfigProvider

Expand Down
2 changes: 1 addition & 1 deletion src/packages/configprovider/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ NutUI-React 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/W
}
```

> @nutui/nutui-react 中带了两个主题文件 默认主题：@nutui/nutui-react/dist/styles/theme-default.scss; 暗黑主题：@nutui/nutui-react/dist/styles/theme-dark.scss; 如果想使用暗黑主题，可以在项目中导入暗黑主题文件。
> @nutui/nutui-react 中带了两个主题文件 默认主题：@nutui/nutui-react/dist/styles/themes/default.css; 暗黑主题：@nutui/nutui-react/dist/styles/themes/dark.css; 如果想使用暗黑主题，可以在项目中导入暗黑主题文件。

#### 通过 ConfigProvider 覆盖

Expand Down
2 changes: 1 addition & 1 deletion src/packages/configprovider/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ NutUI-React 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/W
}
```

> @nutui/nutui-react 中带了两个主题文件 默认主题：@nutui/nutui-react/dist/styles/theme-default.scss; 暗黑主题：@nutui/nutui-react/dist/styles/theme-dark.scss; 如果想使用暗黑主题，可以在项目中导入暗黑主题文件。
> @nutui/nutui-react 中带了两个主题文件 默认主题：@nutui/nutui-react/dist/styles/themes/default.css; 暗黑主题：@nutui/nutui-react/dist/styles/themes/dark.css; 如果想使用暗黑主题，可以在项目中导入暗黑主题文件。

#### 通过 ConfigProvider 覆盖

Expand Down
2 changes: 1 addition & 1 deletion src/packages/configprovider/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ NutUI-React 可以通過 \[CSS 變數\]（<https://developer.mozilla.org/zh-CN/d
}
```

> @nutui/nutui-react 中帶了兩個主題檔 默認主題：@nutui/nutui-react/dist/styles/theme-default.scss; 暗黑主題：@nutui/nutui-react/dist/styles/theme-dark.scss; 如果想使用暗黑主題，可以在專案中導入暗黑主題檔。
> @nutui/nutui-react 中帶了兩個主題檔 默認主題：@nutui/nutui-react/dist/styles/themes/default.css; 暗黑主題：@nutui/nutui-react/dist/styles/themes/dark.css; 如果想使用暗黑主題，可以在專案中導入暗黑主題檔。

#### 通過 ConfigProvider 覆蓋

Expand Down
1 change: 1 addition & 0 deletions src/styles/theme-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import './jd-font';
:root,
page {
// 品牌颜色
Expand Down
1 change: 1 addition & 0 deletions src/styles/theme-default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import './jd-font';
:root,
page {
// 品牌颜色
Expand Down
Loading