70 lines
2.6 KiB
JavaScript
70 lines
2.6 KiB
JavaScript
|
import { defineConfig } from 'vite'
|
||
|
|
import { resolve } from 'node:path'
|
||
|
|
|
||
|
|
const here = (...p) => resolve(import.meta.dirname, ...p)
|
||
|
|
|
||
|
|
// Two build targets from one config:
|
||
|
|
//
|
||
|
|
// vite build → dist/ the deliverable: tlig.css + fonts,
|
||
|
|
// no HTML. This is what WordPress
|
||
|
|
// enqueues.
|
||
|
|
// vite build --mode demo → demo-dist/ a static demo page that loads that
|
||
|
|
// stylesheet through a real <link>,
|
||
|
|
// with the site images beside it.
|
||
|
|
//
|
||
|
|
// The second exists because in dev Vite injects CSS through JavaScript, so
|
||
|
|
// anything with a `transition` animates from its unstyled state on first paint.
|
||
|
|
// That is a dev artifact, but it makes the demo misrepresent the stylesheet.
|
||
|
|
// The static build paints once, the way a browser will on the real site.
|
||
|
|
export default defineConfig(({ mode }) => {
|
||
|
|
const isDemo = mode === 'demo'
|
||
|
|
|
||
|
|
return {
|
||
|
|
root: 'src',
|
||
|
|
|
||
|
|
// Relative asset URLs — a url() in CSS resolves against the stylesheet's
|
||
|
|
// own location, so the output can be dropped at any path under wp-content
|
||
|
|
// without rebuilding.
|
||
|
|
base: './',
|
||
|
|
|
||
|
|
// `site/` mirrors the live asset tree, so the demo can reference
|
||
|
|
// /wp-content/includes/images/… exactly as a WordPress template does.
|
||
|
|
publicDir: here('site'),
|
||
|
|
|
||
|
|
css: {
|
||
|
|
devSourcemap: true,
|
||
|
|
},
|
||
|
|
|
||
|
|
build: {
|
||
|
|
outDir: isDemo ? here('demo-dist') : here('dist'),
|
||
|
|
emptyOutDir: true,
|
||
|
|
|
||
|
|
// The demo needs the wood and scroll images; the deliverable does not —
|
||
|
|
// WordPress already hosts them.
|
||
|
|
copyPublicDir: isDemo,
|
||
|
|
|
||
|
|
sourcemap: true,
|
||
|
|
cssCodeSplit: false,
|
||
|
|
|
||
|
|
rollupOptions: {
|
||
|
|
// The demo is built from the page; the deliverable from the entry
|
||
|
|
// module, so no demo markup or demo CSS can reach dist/.
|
||
|
|
input: isDemo ? here('src/index.html') : here('src/main.js'),
|
||
|
|
|
||
|
|
output: {
|
||
|
|
// Predictable names: WordPress enqueues these paths, so they must not
|
||
|
|
// change on every build. Fonts keep their own names for the same
|
||
|
|
// reason — a preload hint in the theme header has to stay valid.
|
||
|
|
entryFileNames: isDemo ? 'assets/[name]-[hash].js' : 'tlig.js',
|
||
|
|
assetFileNames: (info) => {
|
||
|
|
const name = info.names?.[0] ?? info.name ?? ''
|
||
|
|
if (name.endsWith('.css')) return 'tlig.css'
|
||
|
|
if (/\.(woff2?|ttf|eot|svg)$/.test(name)) return 'fonts/[name][extname]'
|
||
|
|
return 'assets/[name]-[hash][extname]'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
})
|