Skip to content

Commit d4dfbc4

Browse files
oasis-cloudoasis-cloud
authored
chore: 明亮模式和暗黑模式主题分别打包 (#3020)
1 parent 6fb6898 commit d4dfbc4

File tree

9 files changed

+68
-74
lines changed

9 files changed

+68
-74
lines changed

‎scripts/build-taro.mjs‎

Lines changed: 27 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -232,22 +232,13 @@ async function buildUMD() {
232232

233233
async function buildAllCSS() {
234234
// 拷贝styles
235-
async function copyStyles() {
236-
await copy(
237-
resolve(__dirname, '../src/styles'),
238-
resolve(__dirname, `../${dist}/styles`),
239-
)
240-
235+
async function generateAllStyles() {
236+
const projectID = process.env.VITE_APP_PROJECT_ID
241237
const content = [
242-
`@import './styles/theme-default.scss';`,
243-
`@import './styles/variables.scss';`,
238+
`@import './styles/variables${projectID ? `-${projectID}` : ''}.scss';`,
244239
`@import './styles/mixins/index.scss';`,
245240
`@import './styles/animation/index.scss';`,
246241
]
247-
const projectID = process.env.VITE_APP_PROJECT_ID
248-
if (projectID) {
249-
content[1] = `@import '../variables-${projectID}.scss';`
250-
}
251242
const scssFiles = await glob([`${dist}/es/packages/**/*.scss`])
252243
scssFiles.forEach((file) => {
253244
content.push(
@@ -257,7 +248,7 @@ async function buildAllCSS() {
257248
dest(`${dist}/style.scss`, content.join('\n'))
258249
}
259250

260-
await copyStyles()
251+
await generateAllStyles()
261252
await vite.build({
262253
logLevel: 'error',
263254
resolve: {
@@ -277,6 +268,25 @@ async function buildAllCSS() {
277268
}
278269

279270
async function buildThemeCSS() {
271+
const files = await glob([`${dist}/styles/theme-*.scss`], {
272+
ignore: [`${dist}/types/src/**/*.taro.d.ts`],
273+
})
274+
const projectID = process.env.VITE_APP_PROJECT_ID
275+
const inputFiles = {}
276+
files.forEach(filePath => {
277+
const themeName = basename(filePath, 'scss').replace('theme-', '')
278+
if (!projectID) {
279+
inputFiles[themeName] = `./${filePath}`
280+
} else {
281+
if (themeName === projectID) {
282+
inputFiles['default'] = `./${filePath}`
283+
}
284+
if (themeName === `${projectID}-dark`) {
285+
inputFiles['dark'] = `./${filePath}`
286+
}
287+
}
288+
})
289+
280290
await vite.build({
281291
logLevel: 'error',
282292
resolve: {
@@ -285,16 +295,14 @@ async function buildThemeCSS() {
285295
build: {
286296
emptyOutDir: false,
287297
rollupOptions: {
298+
input: inputFiles,
288299
output: [
289300
{
290301
dir: `${dist}/styles/themes`,
291-
assetFileNames: 'default.css',
302+
assetFileNames: '[name].css',
292303
},
293304
],
294305
},
295-
lib: {
296-
entry: `./${dist}/styles/themes/default.scss`,
297-
},
298306
},
299307
})
300308
}
@@ -305,21 +313,6 @@ async function copyStyles() {
305313
resolve(__dirname, '../src/styles'),
306314
resolve(__dirname, `../${dist}/styles`),
307315
)
308-
309-
let content = [
310-
`@import '../theme-default.scss';`,
311-
`@import '../theme-dark.scss';`,
312-
`@import '../jd-font';`,
313-
]
314-
const projectID = process.env.VITE_APP_PROJECT_ID
315-
if (projectID) {
316-
content = [
317-
`@import '../theme-${projectID}.scss';`,
318-
`@import '../jd-font';`,
319-
]
320-
}
321-
322-
dest(`${dist}/styles/themes/default.scss`, content.join('\n'))
323316
}
324317

325318
// 构建样式
@@ -443,6 +436,8 @@ async function copyReleaseFiles() {
443436
const npmPublishDir = dist.replace('dist', '')
444437
await copy(join(__dirname, '../README.md'), join(`${npmPublishDir}/README.md`))
445438
await copy(join(__dirname, '../CHANGELOG.md'), join(`${npmPublishDir}/CHANGELOG.md`))
439+
await copy(join(__dirname, '../src/packages/lottie/animation'), join(`${npmPublishDir}/dist/es/packages/lottie/animation`))
440+
await copy(join(__dirname, '../src/packages/lottie/animation'), join(`${npmPublishDir}/dist/cjs/packages/lottie/animation`))
446441
await writeFile(join(__dirname, `../${npmPublishDir}/package.json`), generateReleasePackageJson())
447442
}
448443

@@ -484,8 +479,6 @@ console.time('Build Declaration')
484479
await buildDeclaration()
485480
console.timeEnd('Build Declaration')
486481

487-
// await exportProps()
488-
489482
await deleteAsync([
490483
`${dist}/es/packages/nutui.react.js`,
491484
`${dist}/es/packages/nutui.react.d.ts`,

‎scripts/build.mjs‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -177,25 +177,16 @@ async function buildUMD(p) {
177177
},
178178
})
179179
}
180-
180+
// 针对不同包构建全量的 style
181181
async function buildAllCSS() {
182182
// 拷贝styles
183-
async function copyStyles() {
184-
await copy(
185-
resolve(__dirname, '../src/styles'),
186-
resolve(__dirname, `../${dist}/styles`),
187-
)
188-
183+
async function generateAllStyles() {
184+
const projectID = process.env.VITE_APP_PROJECT_ID
189185
const content = [
190-
`@import './styles/theme-default.scss';`,
191-
`@import './styles/variables.scss';`,
186+
`@import './styles/variables${projectID ? `-${projectID}` : ''}.scss';`,
192187
`@import './styles/mixins/index.scss';`,
193188
`@import './styles/animation/index.scss';`,
194189
]
195-
const projectID = process.env.VITE_APP_PROJECT_ID
196-
if (projectID) {
197-
content[1] = `@import '../variables-${projectID}.scss';`
198-
}
199190
const scssFiles = await glob([`${dist}/es/packages/**/*.scss`])
200191
scssFiles.forEach((file) => {
201192
content.push(
@@ -205,7 +196,7 @@ async function buildAllCSS() {
205196
dest(`${dist}/style.scss`, content.join('\n'))
206197
}
207198

208-
await copyStyles()
199+
await generateAllStyles()
209200
await vite.build({
210201
logLevel: 'error',
211202
resolve: {
@@ -225,6 +216,30 @@ async function buildAllCSS() {
225216
}
226217

227218
async function buildThemeCSS() {
219+
const files = await glob([`${dist}/styles/theme-*.scss`], {
220+
ignore: [`${dist}/types/src/**/*.taro.d.ts`],
221+
})
222+
const projectID = process.env.VITE_APP_PROJECT_ID
223+
const inputFiles = {}
224+
// nuitui 官方包包含全部主题文件，包括：
225+
// default.css 默认明亮主题
226+
// dark.css 默认暗黑主题
227+
// jmapp.css、jrkf.css 主题
228+
// 例如：jmapp 包只包含 jmapp 的主题文件，且是默认主题文件。
229+
files.forEach(filePath => {
230+
const themeName = basename(filePath, 'scss').replace('theme-', '')
231+
if (!projectID) {
232+
inputFiles[themeName] = `./${filePath}`
233+
} else {
234+
if (themeName === projectID) {
235+
inputFiles['default'] = `./${filePath}`
236+
}
237+
if (themeName === `${projectID}-dark`) {
238+
inputFiles['dark'] = `./${filePath}`
239+
}
240+
}
241+
})
242+
228243
await vite.build({
229244
logLevel: 'error',
230245
resolve: {
@@ -233,41 +248,23 @@ async function buildThemeCSS() {
233248
build: {
234249
emptyOutDir: false,
235250
rollupOptions: {
251+
input: inputFiles,
236252
output: [
237253
{
238254
dir: `${dist}/styles/themes`,
239-
assetFileNames: 'default.css',
255+
assetFileNames: '[name].css',
240256
},
241257
],
242258
},
243-
lib: {
244-
entry: `./${dist}/styles/themes/default.scss`,
245-
},
246259
},
247260
})
248261
}
249262

250-
// 拷贝styles
251263
async function copyStyles() {
252264
await copy(
253265
resolve(__dirname, '../src/styles'),
254266
resolve(__dirname, `../${dist}/styles`),
255267
)
256-
257-
let content = [
258-
`@import '../theme-default.scss';`,
259-
`@import '../theme-dark.scss';`,
260-
`@import '../jd-font';`,
261-
]
262-
const projectID = process.env.VITE_APP_PROJECT_ID
263-
if (projectID) {
264-
content = [
265-
`@import '../theme-${projectID}.scss';`,
266-
`@import '../jd-font';`,
267-
]
268-
}
269-
270-
dest(`${dist}/styles/themes/default.scss`, content.join('\n'))
271268
}
272269

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

@@ -438,4 +437,4 @@ console.timeEnd('Build JSDoc')
438437

439438
console.time('Copy package.json readme.md')
440439
await copyReleaseFiles()
441-
console.timeEnd('Copy package.json readme.md')
440+
console.timeEnd('Copy package.json readme.md')

‎scripts/replace-css-var.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const variables = fs.readFileSync(
2222

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

2727
const exclude = ['icon']
2828
components.forEach((component) => {

‎src/packages/configprovider/doc.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ You can override these CSS variables directly in your code, and the styling of t
2929
}
3030
```
3131

32-
> @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.
32+
> @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.
3333
3434
#### Overrides via ConfigProvider
3535

‎src/packages/configprovider/doc.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ NutUI-React 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/W
2929
}
3030
```
3131

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

‎src/packages/configprovider/doc.taro.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ NutUI-React 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/W
2929
}
3030
```
3131

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

‎src/packages/configprovider/doc.zh-TW.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ NutUI-React 可以通過 \[CSS 變數\]（<https://developer.mozilla.org/zh-CN/d
2929
}
3030
```
3131

32-
> @nutui/nutui-react 中帶了兩個主題檔 默認主題：@nutui/nutui-react/dist/styles/theme-default.scss; 暗黑主題：@nutui/nutui-react/dist/styles/theme-dark.scss; 如果想使用暗黑主題，可以在專案中導入暗黑主題檔。
32+
> @nutui/nutui-react 中帶了兩個主題檔 默認主題：@nutui/nutui-react/dist/styles/themes/default.css; 暗黑主題：@nutui/nutui-react/dist/styles/themes/dark.css; 如果想使用暗黑主題，可以在專案中導入暗黑主題檔。
3333
3434
#### 通過 ConfigProvider 覆蓋
3535

‎src/styles/theme-dark.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import './jd-font';
12
:root,
23
page {
34
// 品牌颜色

‎src/styles/theme-default.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import './jd-font';
12
:root,
23
page {
34
// 品牌颜色

0 commit comments

Comments
 (0)