critical css files are generated but are all blank. Craft and Vite setup #21
Description
Question
Running npm run build, all my criticalcss files are generated but are blank. This happens locally and on the live server.
I've crossed referenced all your examples and I can't for the life of me see anything I am doing incorrectly.
I'm hoping you can help me figure this one out. I bet its something simple
Additional context
Craft 5, Craft Vite plugin, TW 4
I use {{ craft.vite.script('src/js/app.js') }} in my layout template
vite.config.js
import { defineConfig, loadEnv } from 'vite';
import manifestSRI from 'vite-plugin-manifest-Sri';
import tailwindcss from '@tailwindcss/vite';
import ViteRestart from 'vite-plugin-restart';
import viteCompression from 'vite-plugin-compression';
import critical from 'rollup-plugin-critical';
import legacy from '@vitejs/plugin-legacy';
import * as path from 'path';
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
// In dev mode, we serve assets at the root of https://johnhenry.ddev.site:5173
// In production, files live in the /dist directory
base: command === 'serve' ? '' : '/dist/',
build: {
manifest: true,
emptyOutDir: true,
outDir: './public/dist/',
rollupOptions: {
input: {
app: '/src/js/app.js',
},
},
sourcemap: true,
},
publicDir: './src/public',
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@css': path.resolve(__dirname, 'src/css'),
'@js': path.resolve(__dirname, 'src/js'),
},
preserveSymlinks: true,
},
plugins: [
ViteRestart({
reload: ['./templates/**/*'],
}),
critical({
criticalUrl: 'https://johnhenry.ie/',
criticalBase: './public/dist/criticalcss',
criticalPages: [
{ uri: 'about', template: 'about' },
{ uri: '404', template: '404' },
{ uri: '', template: 'index' },
],
criticalConfig: {},
}),
manifestSRI(),
viteCompression({
filter: /\.(js|mjs|json|css|map)$/i,
}),
legacy({
targets: ['defaults', 'not IE 11'],
}),
tailwindcss(),
],
server: {
cors: {
origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
},
// Special address that respond to all network requests
host: '0.0.0.0',
// Use a strict port because we have to hard code this in vite.php
strictPort: true,
// This is the port running "inside" the Web container
// It's the same as continer_port in .ddev/config.yaml
port: 5173,
// Setting a specific origin ensures that your fonts & images load
// correctly. Assumes you're accessing the front-end over https
origin: `${process.env.DDEV_PRIMARY_URL}:5173`,
},
};
});