180 lines
6.1 KiB
JavaScript
180 lines
6.1 KiB
JavaScript
/**
|
|
* extract-naive-styles.mjs
|
|
*
|
|
* 在构建时直接调用 NaiveUI 组件的 .cssr.mjs 样式函数的 render() 方法，
|
|
* 提取所有组件的运行时 JSS 为静态 CSS 文件。
|
|
* 彻底解决 WordPress 后台环境中样式丢失问题。
|
|
*
|
|
* 原理：
|
|
* 每个 NaiveUI 组件都有 src/styles/index.cssr.mjs 文件
|
|
* 导出的函数返回 css-render 的 CNode 对象
|
|
* 调用 CNode.render({ clsPrefix: 'n' }) 即可获取纯 CSS 字符串
|
|
* 无需虚拟 DOM、无需 Vue、无任何浏览器 API 依赖
|
|
*/
|
|
|
|
import { writeFile, mkdir } from 'fs/promises'
|
|
import { dirname, join } from 'path'
|
|
import { fileURLToPath } from 'url'
|
|
|
|
const __dirname = dirname(fileURLToPath(import.meta.url))
|
|
const BUILD_DIR = join(__dirname, 'build')
|
|
|
|
// ============================================================
|
|
// 需要提取样式的组件列表（对应各组件的 .cssr.mjs 入口）
|
|
// 格式：[导入路径在 naive-ui/es 内部的相对路径]
|
|
// ============================================================
|
|
const COMPONENT_STYLES = [
|
|
// 内部基础组件
|
|
['_internal/scrollbar/src/styles/index.cssr.mjs'],
|
|
// 布局
|
|
['layout/src/styles/index.cssr.mjs'],
|
|
['layout-sider/src/styles/index.cssr.mjs'],
|
|
// 导航
|
|
['menu/src/styles/index.cssr.mjs'],
|
|
['breadcrumb/src/styles/index.cssr.mjs'],
|
|
['tabs/src/styles/index.cssr.mjs'],
|
|
['steps/src/styles/index.cssr.mjs'],
|
|
['pagination/src/styles/index.cssr.mjs'],
|
|
// 表单
|
|
['form/src/styles/index.cssr.mjs'],
|
|
['form-item/src/styles/index.cssr.mjs'],
|
|
['input/src/styles/index.cssr.mjs'],
|
|
['input-number/src/styles/index.cssr.mjs'],
|
|
['switch/src/styles/index.cssr.mjs'],
|
|
['select/src/styles/index.cssr.mjs'],
|
|
['radio/src/styles/index.cssr.mjs'],
|
|
['checkbox/src/styles/index.cssr.mjs'],
|
|
['slider/src/styles/index.cssr.mjs'],
|
|
['rate/src/styles/index.cssr.mjs'],
|
|
['date-picker/src/styles/indexcode/index.cssr.mjs'],
|
|
['time-picker/src/styles/index.cssr.mjs'],
|
|
// 展示
|
|
['card/src/styles/index.cssr.mjs'],
|
|
['tag/src/styles/index.cssr.mjs'],
|
|
['alert/src/styles/index.cssr.mjs'],
|
|
['data-table/src/styles/index.cssr.mjs'],
|
|
['descriptions/src/styles/index.cssr.mjs'],
|
|
['empty/src/styles/index.cssr.mjs'],
|
|
['result/src/styles/index.cssr.mjs'],
|
|
['statistic/src/styles/index.cssr.mjs'],
|
|
['list/src/styles/index.cssr.mjs'],
|
|
['collapse/src/styles/index.cssr.mjs'],
|
|
['timeline/src/styles/index.cssr.mjs'],
|
|
// 反馈
|
|
['button/src/styles/index.cssr.mjs'],
|
|
['modal/src/styles/index.cssr.mjs'],
|
|
['dialog/src/styles/index.cssr.mjs'],
|
|
['message/src/styles/index.cssr.mjs'],
|
|
['notification/src/styles/index.cssr.mjs'],
|
|
['popconfirm/src/styles/index.cssr.mjs'],
|
|
['popover/src/styles/index.cssr.mjs'],
|
|
['tooltip/src/styles/index.cssr.mjs'],
|
|
['dropdown/src/styles/index.cssr.mjs'],
|
|
// 其他
|
|
['icon/src/styles/index.cssr.mjs'],
|
|
['icon-wrapper/src/styles/index.cssr.mjs'],
|
|
['space/src/styles/index.cssr.mjs'],
|
|
['divider/src/styles/index.cssr.mjs'],
|
|
['gradient-text/src/styles/index.cssr.mjs'],
|
|
['ellipsis/src/styles/index.cssr.mjs'],
|
|
['spin/src/styles/index.cssr.mjs'],
|
|
['loading-bar/src/styles/index.cssr.mjs'],
|
|
['upload/src/styles/index.cssr.mjs'],
|
|
['image/src/styles/index.cssr.mjs'],
|
|
['carousel/src/styles/index.cssr.mjs'],
|
|
['transfer/src/styles/index.cssr.mjs'],
|
|
['tree-select/src/styles/index.cssr.mjs'],
|
|
['tree/src/styles/index.cssr.mjs'],
|
|
['thing/src/styles/index.cssr.mjs'],
|
|
['color-picker/src/styles/indexcode/index.cssr.mjs'],
|
|
['typography/src/styles/index.cssr.mjs'],
|
|
['auto-complete/src/styles/index.cssr.mjs'],
|
|
['cascader/src/styles/index.cssr.mjs'],
|
|
['dynamic-input/src/styles/index.cssr.mjs'],
|
|
['dynamic-tags/src/styles/index.cssr.mjs'],
|
|
['input-otp/src/styles/indexcode/index.cssr.mjs'],
|
|
// 过渡动画
|
|
['_styles/transitions/fade-in-width-expand.cssr.mjs'],
|
|
['_styles/transitions/fade-in-height-expand.cssr.mjs'],
|
|
['_styles/transitions/icon-switch.cssr.mjs'],
|
|
['_styles/transitions/scale-transition.cssr.mjs'],
|
|
// 全局
|
|
['global-style/src/styles/index.cssr.mjs'],
|
|
]
|
|
|
|
async function extractStyles() {
|
|
console.log('\n[AKSRT] 开始提取 NaiveUI 组件样式...\n')
|
|
|
|
const allCss = []
|
|
let successCount = 0
|
|
let failCount = 0
|
|
|
|
for (const [componentPath] of COMPONENT_STYLES) {
|
|
try {
|
|
// 动态导入每个组件的 cssr 样式模块
|
|
const styleModule = await import(
|
|
`naive-ui/es/${componentPath}`
|
|
)
|
|
|
|
const defaultExport = styleModule.default || styleModule
|
|
|
|
if (typeof defaultExport === 'function') {
|
|
// 直接调用 render() 提取 CSS
|
|
const css = defaultExport({
|
|
clsPrefix: 'n',
|
|
// 使用 light 主题变量
|
|
})
|
|
|
|
if (typeof css === 'string' && css.trim()) {
|
|
allCss.push(`/* ${componentPath} */\n${css}`)
|
|
successCount++
|
|
}
|
|
} else if (defaultExport && typeof defaultExport.render === 'function') {
|
|
// 如果是 CNode 对象，调用 render()
|
|
const css = defaultExport.render()
|
|
if (typeof css === 'string' && css.trim()) {
|
|
allCss.push(`/* ${componentPath} */\n${css}`)
|
|
successCount++
|
|
}
|
|
}
|
|
} catch (err) {
|
|
// 某些路径可能不存在或结构不同，跳过但不中断
|
|
failCount++
|
|
}
|
|
}
|
|
|
|
const cssOutput = allCss.join('\n\n')
|
|
|
|
if (!cssOutput.trim()) {
|
|
console.warn('[AKSRT] 警告：未提取到任何 NaiveUI 样式！')
|
|
return null
|
|
}
|
|
|
|
// 确保 build 目录存在
|
|
await mkdir(BUILD_DIR, { recursive: true })
|
|
|
|
// 写入 CSS 文件
|
|
const cssFile = join(BUILD_DIR, 'naive-ui.css')
|
|
const fullContent = `/* Auto-extracted by extract-naive-styles.mjs */
|
|
/* Naive UI v2 Component Styles - Build-time extraction */
|
|
/* DO NOT EDIT MANUALLY */
|
|
|
|
${cssOutput}`
|
|
|
|
await writeFile(cssFile, fullContent, 'utf-8')
|
|
|
|
console.log(`[AKSRT] NaiveUI 样式提取完成:`)
|
|
console.log(` 成功: ${successCount} 个组件`)
|
|
console.log(` 跳过: ${failCount} 个组件`)
|
|
console.log(` 输出: ${cssFile}`)
|
|
console.log(` 大小: ${(Buffer.byteLength(fullContent) / 1024).toFixed(1)} KB\n`)
|
|
|
|
return cssFile
|
|
}
|
|
|
|
// 执行
|
|
extractStyles().catch((err) => {
|
|
console.error('[AKSRT] 样式提取失败:', err)
|
|
process.exit(1)
|
|
})
|