nystudio107
critical css files are generated but are all blank. Craft and Vite setup
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`,
},
};
});
Lacking any additional information, there isn't much advice I have to offer unfortunately. I can say that this works:
https://github.com/nystudio107/devmode/tree/develop/buildchain
@khalwat just running into a project that is the same, critical files do get generated, site url is available, but when generating CriticalCSS ending up with empty CSS files.
Everything seems to run, the critical config is okay according to the docs:
critical({
criticalUrl: 'https://www.chambers19.com',
criticalBase: '../cms/web/dist/_criticalcss/',
<img width="2007" alt="Image" src="https://github.com/user-attachments/assets/3bd791fd-7694-4892-a07b-0def1b0f436d" />
criticalPages: [
{ uri: '', template: '_views/view--page-home' },
{ uri: '/menus/food-menu/', template: '_views/view--overview-menu' },
{ uri: '/entertainment', template: '_views/view--overview-events' },
{ uri: '/catering', template: '_views/view--page-landing' },
{ uri: '/privacy-policy', template: '_views/view--detail-legal'},
],
criticalConfig: {},
}),
The files get generated but end up empty without any CSS involved.
The buildchain itself doesn't throw any errors either:
Generating critical CSS from https://www.chambers19.com to _views/view--page-home_critical.min.css
Generating critical CSS from https://ww.chambers19.com to _views/view--page-home_critical.min.css
Generating critical CSS from https://ww.chambers19.com/menus/food-menu to _views/view--overview-menu_critical.min.css
Generating critical CSS from https://www.chambers19.com/menus/food-menu/ to _views/view--overview-menu_critical.min.css
Generating critical CSS from https://www.chambers19.com/entertainment to _views/view--overview-events_critical.min.css
Generating critical CSS from https://ww.chambers19.com/entertainment to _views/view--overview-events_critical.min.css
Generating critical CSS from https://www.chambers19.com/catering to _views/view--page-landing_critical.min.css
Generating critical CSS from https://ww.chambers19.com/catering to _views/view--page-landing_critical.min.css
Generating critical CSS from https://www.chambers19.com/privacy-policy to _views/view--detail-legal_critical.min.css
Generating critical CSS from https://ww.chambers19.com/privacy-policy to _views/view--detail-legal_critical.min.css
Not sure what to say... I just deleted the critical CSS files locally for the devmode.fm site:
https://github.com/nystudio107/devmode
...ran a make build and got this output:
~/webdev/sites/devmode git:[devmode-vite] make build
if [ ! "$(docker ps -q -f name=devmode-php-1)" ]; then \
cp -n cms/example.env cms/.env; \
docker-compose up; \
fi
docker exec -it devmode-vite-1 npm run build
> [email protected] build
> vite build
vite v6.1.1 building for production...
✓ 88 modules transformed.
../cms/web/dist/assets/_plugin-vue2_normalizer-legacy-CvwTt8fR.js 0.33 kB │ gzip: 0.26 kB │ map: 0.12 kB
../cms/web/dist/assets/lazysizes-wrapper-legacy-DtTwWnKT.js 0.34 kB │ gzip: 0.27 kB │ map: 0.68 kB
../cms/web/dist/assets/preload-helper-legacy-TPiD7rVa.js 0.42 kB │ gzip: 0.32 kB │ map: 0.11 kB
../cms/web/dist/assets/player-legacy-CDyjUc3G.js 0.53 kB │ gzip: 0.35 kB │ map: 1.18 kB
../cms/web/dist/assets/_commonjsHelpers-legacy-NFq0uiUl.js 0.70 kB │ gzip: 0.41 kB │ map: 0.12 kB
../cms/web/dist/assets/VuetableFilterBar-legacy-BHMricK0.js 1.02 kB │ gzip: 0.58 kB │ map: 1.37 kB
../cms/web/dist/assets/VuetablePaginationInfo-legacy-DY0Uqr2k.js 1.09 kB │ gzip: 0.57 kB │ map: 2.39 kB
../cms/web/dist/assets/EpisodeCell-legacy-B1NiLOJN.js 1.17 kB │ gzip: 0.59 kB │ map: 1.84 kB
../cms/web/dist/assets/vue-clickaway.common-legacy-ByMUh9Eh.js 1.44 kB │ gzip: 0.84 kB │ map: 4.19 kB
../cms/web/dist/assets/index-legacy-D7PrII3l.js 1.58 kB │ gzip: 0.72 kB │ map: 6.40 kB
../cms/web/dist/assets/episodes-legacy-CTf7mKOq.js 2.27 kB │ gzip: 1.16 kB │ map: 6.74 kB
../cms/web/dist/assets/VuetablePagination-legacy-D8G_hZsW.js 3.25 kB │ gzip: 1.10 kB │ map: 6.07 kB
../cms/web/dist/assets/EpisodesTable-legacy-BP9TBB1b.js 3.57 kB │ gzip: 1.33 kB │ map: 7.91 kB
../cms/web/dist/assets/DevmodePlayer-legacy-CgHxPmST.js 6.34 kB │ gzip: 2.10 kB │ map: 11.01 kB
../cms/web/dist/assets/lazysizes-legacy-CkEyl4xj.js 7.97 kB │ gzip: 3.76 kB │ map: 36.33 kB
../cms/web/dist/assets/vue-typer.min-legacy-DWAWjNQp.js 23.56 kB │ gzip: 7.60 kB │ map: 53.08 kB
../cms/web/dist/assets/VueTable-legacy-Bh_4mXC3.js 59.56 kB │ gzip: 19.35 kB │ map: 228.24 kB
../cms/web/dist/assets/polyfills-legacy-PIri70ov.js 60.42 kB │ gzip: 22.47 kB │ map: 267.04 kB
../cms/web/dist/assets/app-legacy-dHRgersP.js 61.90 kB │ gzip: 14.11 kB │ map: 21.29 kB
../cms/web/dist/assets/vue.esm-legacy-Bs6W9nVA.js 107.19 kB │ gzip: 38.50 kB │ map: 616.40 kB
../cms/web/dist/assets/favicons/yandex-browser-manifest.json 0.17 kB │ gzip: 0.15 kB
../cms/web/dist/assets/favicons/manifest.webapp 0.31 kB
../cms/web/dist/assets/favicons/browserconfig.xml 0.50 kB │ gzip: 0.22 kB
../cms/web/dist/assets/favicons/favicon-16x16.png 0.55 kB
../cms/web/dist/assets/favicons/favicon-32x32.png 1.16 kB
../cms/web/dist/assets/favicons/android-chrome-36x36.png 1.26 kB
../cms/web/dist/assets/favicons/manifest.json 1.43 kB │ gzip: 0.34 kB
../cms/web/dist/assets/favicons/apple-touch-icon-57x57.png 1.65 kB
../cms/web/dist/assets/favicons/yandex-browser-50x50.png 1.68 kB
../cms/web/dist/assets/favicons/favicon-48x48.png 1.69 kB
../cms/web/dist/assets/favicons/android-chrome-48x48.png 1.69 kB
../cms/web/dist/assets/favicons/apple-touch-icon-60x60.png 1.75 kB
../cms/web/dist/assets/favicons/apple-touch-icon-72x72.png 2.09 kB
../cms/web/dist/assets/favicons/apple-touch-icon-76x76.png 2.19 kB
../cms/web/dist/assets/favicons/mstile-70x70.png 2.34 kB
../cms/web/dist/assets/favicons/android-chrome-72x72.png 2.38 kB
../cms/web/dist/assets/favicons/android-chrome-96x96.png 3.10 kB
../cms/web/dist/assets/favicons/firefox_app_60x60.png 3.31 kB
../cms/web/dist/assets/favicons/apple-touch-icon-114x114.png 3.32 kB
../cms/web/dist/assets/favicons/apple-touch-icon-120x120.png 3.39 kB
../cms/web/dist/assets/favicons/apple-touch-icon-144x144.png 4.11 kB
../cms/web/dist/assets/favicons/apple-touch-icon-152x152.png 4.28 kB
../cms/web/dist/assets/favicons/android-chrome-144x144.png 4.66 kB
../cms/web/dist/assets/favicons/mstile-144x144.png 4.66 kB
../cms/web/dist/assets/favicons/apple-touch-icon-167x167.png 4.71 kB
../cms/web/dist/assets/favicons/mstile-150x150.png 4.88 kB
../cms/web/dist/assets/favicons/apple-touch-icon-180x180.png 5.06 kB
../cms/web/dist/assets/favicons/apple-touch-icon.png 5.06 kB
../cms/web/dist/assets/favicons/apple-touch-icon-precomposed.png 5.06 kB
../cms/web/dist/assets/favicons/android-chrome-256x256.png 5.09 kB
../cms/web/dist/assets/favicons/mstile-310x150.png 5.11 kB
../cms/web/dist/assets/favicons/android-chrome-512x512.png 5.57 kB
../cms/web/dist/assets/favicons/android-chrome-192x192.png 5.82 kB
../cms/web/dist/assets/favicons/coast-228x228.png 6.43 kB
../cms/web/dist/assets/favicons/firefox_app_128x128.png 7.08 kB
../cms/web/dist/assets/favicons/webapp.html 7.33 kB │ gzip: 0.89 kB
../cms/web/dist/assets/favicons/mstile-310x310.png 9.93 kB
../cms/web/dist/assets/favicons/android-chrome-384x384.png 10.17 kB
../cms/web/dist/manifest.json 10.52 kB │ gzip: 1.30 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1136x640.png 20.97 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-640x1136.png 22.15 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1334x750.png 26.49 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-750x1334.png 27.41 kB
../cms/web/dist/assets/favicons/firefox_app_512x512.png 28.01 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1792x828.png 32.10 kB
../cms/web/dist/assets/favicons/favicon.ico 33.31 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-828x1792.png 33.62 kB
../cms/web/dist/assets/favicons/apple-touch-icon-1024x1024.png 36.37 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2436x1125.png 51.14 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1125x2436.png 53.01 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2048x1536.png 53.46 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1536x2048.png 54.41 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2208x1242.png 56.92 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1242x2208.png 58.47 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2688x1242.png 59.46 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1242x2688.png 61.03 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2160x1620.png 79.56 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1620x2160.png 80.13 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2224x1668.png 83.63 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1668x2224.png 84.27 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2388x1668.png 84.45 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-1668x2388.png 85.88 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2732x2048.png 114.54 kB
../cms/web/dist/assets/favicons/apple-touch-startup-image-2048x2732.png 115.50 kB
../cms/web/dist/assets/episodes-CzxVRAzi.css 0.43 kB │ gzip: 0.27 kB
../cms/web/dist/assets/VueTable-n1IUIQkD.css 0.90 kB │ gzip: 0.38 kB
../cms/web/dist/assets/app-Bcx4aRiA.css 53.75 kB │ gzip: 10.55 kB
../cms/web/dist/assets/_plugin-vue2_normalizer-p4i_2SC9.js 0.25 kB │ gzip: 0.22 kB │ map: 0.12 kB
../cms/web/dist/assets/lazysizes-wrapper-Ov_U8HaV.js 0.51 kB │ gzip: 0.35 kB │ map: 0.68 kB
../cms/web/dist/assets/_commonjsHelpers-C932wzq6.js 0.63 kB │ gzip: 0.38 kB │ map: 0.11 kB
../cms/web/dist/assets/player-CN2eO7Jg.js 0.70 kB │ gzip: 0.45 kB │ map: 1.09 kB
../cms/web/dist/assets/VuetableFilterBar-B7HzvsIp.js 0.96 kB │ gzip: 0.55 kB │ map: 1.33 kB
../cms/web/dist/assets/VuetablePaginationInfo-BKdX5jM7.js 1.06 kB │ gzip: 0.55 kB │ map: 2.26 kB
../cms/web/dist/assets/preload-helper-DJYZEzt0.js 1.10 kB │ gzip: 0.66 kB │ map: 0.11 kB
../cms/web/dist/assets/EpisodeCell-BVT34ny4.js 1.11 kB │ gzip: 0.56 kB │ map: 1.77 kB
../cms/web/dist/assets/vue-clickaway.common-DN57OfLL.js 1.36 kB │ gzip: 0.82 kB │ map: 4.09 kB
../cms/web/dist/assets/index-Oo935iMy.js 1.49 kB │ gzip: 0.68 kB │ map: 6.21 kB
../cms/web/dist/assets/episodes-DG5KmUMl.js 2.03 kB │ gzip: 0.99 kB │ map: 6.31 kB
../cms/web/dist/assets/VuetablePagination-Cg19VYeu.js 3.22 kB │ gzip: 1.07 kB │ map: 5.63 kB
../cms/web/dist/assets/EpisodesTable-D-dB49oN.js 3.87 kB │ gzip: 1.40 kB │ map: 6.65 kB
../cms/web/dist/assets/DevmodePlayer-W4r6fZBK.js 6.28 kB │ gzip: 2.07 kB │ map: 10.17 kB
../cms/web/dist/assets/lazysizes-CcgbTW1C.js 7.94 kB │ gzip: 3.79 kB │ map: 36.07 kB
../cms/web/dist/assets/app-BOJJcPVP.js 8.30 kB │ gzip: 3.76 kB │ map: 20.24 kB
../cms/web/dist/assets/vue-typer.min-4r9Vubwv.js 23.57 kB │ gzip: 7.94 kB │ map: 53.21 kB
../cms/web/dist/assets/VueTable-DWIsb-nD.js 58.92 kB │ gzip: 19.52 kB │ map: 226.43 kB
../cms/web/dist/assets/vue.esm-CjMKYB17.js 108.82 kB │ gzip: 39.90 kB │ map: 624.52 kB
Generating critical CSS from https://devmode.fm/ to index_critical.min.css
Generating critical CSS from https://devmode.fm/about to about/index_critical.min.css
Generating critical CSS from https://devmode.fm/calendar to calendar/index_critical.min.css
Generating critical CSS from https://devmode.fm/episodes to episodes/index_critical.min.css
Generating critical CSS from https://devmode.fm/episodes/webpack-inside-out-with-sean-larkin to episodes/_entry_critical.min.css
Generating critical CSS from https://devmode.fm/errors/offline to errors/offline_critical.min.css
Generating critical CSS from https://devmode.fm/errors/error to errors/error_critical.min.css
Generating critical CSS from https://devmode.fm/errors/503 to errors/503_critical.min.css
Generating critical CSS from https://devmode.fm/errors/404 to errors/404_critical.min.css
✓ built in 32.68s
✨ [vite-plugin-compression]:algorithm=gzip - compressed file successfully:
dist//var/www/project/cms/web/dist/assets/DevmodePlayer-W4r6fZBK.js.map.gz 9.93kb / gzip: 2.56kb
dist//var/www/project/cms/web/dist/assets/DevmodePlayer-legacy-CgHxPmST.js.gz 6.19kb / gzip: 2.05kb
dist//var/www/project/cms/web/dist/assets/DevmodePlayer-W4r6fZBK.js.gz 6.13kb / gzip: 2.02kb
dist//var/www/project/cms/web/dist/assets/EpisodeCell-BVT34ny4.js.map.gz 1.72kb / gzip: 0.60kb
dist//var/www/project/cms/web/dist/assets/EpisodeCell-legacy-B1NiLOJN.js.gz 1.15kb / gzip: 0.57kb
dist//var/www/project/cms/web/dist/assets/EpisodeCell-legacy-B1NiLOJN.js.map.gz 1.79kb / gzip: 0.65kb
dist//var/www/project/cms/web/dist/assets/EpisodesTable-D-dB49oN.js.gz 3.78kb / gzip: 1.37kb
dist//var/www/project/cms/web/dist/assets/EpisodesTable-D-dB49oN.js.map.gz 6.50kb / gzip: 1.77kb
dist//var/www/project/cms/web/dist/assets/DevmodePlayer-legacy-CgHxPmST.js.map.gz 10.75kb / gzip: 3.05kb
dist//var/www/project/cms/web/dist/assets/EpisodesTable-legacy-BP9TBB1b.js.map.gz 7.72kb / gzip: 2.16kb
dist//var/www/project/cms/web/dist/assets/EpisodesTable-legacy-BP9TBB1b.js.gz 3.48kb / gzip: 1.30kb
dist//var/www/project/cms/web/dist/assets/VuetableFilterBar-B7HzvsIp.js.map.gz 1.30kb / gzip: 0.53kb
dist//var/www/project/cms/web/dist/assets/VuetablePagination-Cg19VYeu.js.gz 3.15kb / gzip: 1.05kb
dist//var/www/project/cms/web/dist/assets/VuetablePagination-Cg19VYeu.js.map.gz 5.49kb / gzip: 1.36kb
dist//var/www/project/cms/web/dist/assets/VuetablePagination-legacy-D8G_hZsW.js.gz 3.18kb / gzip: 1.07kb
dist//var/www/project/cms/web/dist/assets/VuetablePaginationInfo-BKdX5jM7.js.map.gz 2.21kb / gzip: 0.72kb
dist//var/www/project/cms/web/dist/assets/VuetablePagination-legacy-D8G_hZsW.js.map.gz 5.93kb / gzip: 1.61kb
dist//var/www/project/cms/web/dist/assets/VuetablePaginationInfo-legacy-DY0Uqr2k.js.gz 1.06kb / gzip: 0.55kb
dist//var/www/project/cms/web/dist/assets/VuetablePaginationInfo-legacy-DY0Uqr2k.js.map.gz 2.33kb / gzip: 0.86kb
dist//var/www/project/cms/web/dist/assets/VuetableFilterBar-legacy-BHMricK0.js.map.gz 1.34kb / gzip: 0.57kb
dist//var/www/project/cms/web/dist/assets/EpisodeCell-BVT34ny4.js.gz 1.09kb / gzip: 0.54kb
dist//var/www/project/cms/web/dist/assets/app-BOJJcPVP.js.gz 8.10kb / gzip: 3.67kb
dist//var/www/project/cms/web/dist/assets/app-BOJJcPVP.js.map.gz 19.77kb / gzip: 6.35kb
dist//var/www/project/cms/web/dist/assets/episodes-DG5KmUMl.js.gz 1.98kb / gzip: 0.97kb
dist//var/www/project/cms/web/dist/assets/app-Bcx4aRiA.css.gz 52.56kb / gzip: 10.27kb
dist//var/www/project/cms/web/dist/assets/app-legacy-dHRgersP.js.gz 60.51kb / gzip: 13.74kb
dist//var/www/project/cms/web/dist/assets/episodes-DG5KmUMl.js.map.gz 6.16kb / gzip: 2.39kb
dist//var/www/project/cms/web/dist/assets/episodes-legacy-CTf7mKOq.js.gz 2.21kb / gzip: 1.13kb
dist//var/www/project/cms/web/dist/assets/episodes-legacy-CTf7mKOq.js.map.gz 6.58kb / gzip: 2.60kb
dist//var/www/project/cms/web/dist/assets/favicons/manifest.json.gz 1.39kb / gzip: 0.33kb
dist//var/www/project/cms/web/dist/assets/index-legacy-D7PrII3l.js.gz 1.55kb / gzip: 0.71kb
dist//var/www/project/cms/web/dist/assets/index-Oo935iMy.js.map.gz 6.06kb / gzip: 1.92kb
dist//var/www/project/cms/web/dist/assets/index-Oo935iMy.js.gz 1.45kb / gzip: 0.67kb
dist//var/www/project/cms/web/dist/assets/app-legacy-dHRgersP.js.map.gz 20.79kb / gzip: 7.57kb
dist//var/www/project/cms/web/dist/assets/index-legacy-D7PrII3l.js.map.gz 6.25kb / gzip: 2.10kb
dist//var/www/project/cms/web/dist/assets/lazysizes-legacy-CkEyl4xj.js.gz 7.79kb / gzip: 3.67kb
dist//var/www/project/cms/web/dist/assets/lazysizes-CcgbTW1C.js.gz 7.75kb / gzip: 3.70kb
dist//var/www/project/cms/web/dist/assets/player-CN2eO7Jg.js.map.gz 1.07kb / gzip: 0.63kb
dist//var/www/project/cms/web/dist/assets/VuetablePaginationInfo-BKdX5jM7.js.gz 1.04kb / gzip: 0.53kb
dist//var/www/project/cms/web/dist/assets/preload-helper-DJYZEzt0.js.gz 1.07kb / gzip: 0.65kb
dist//var/www/project/cms/web/dist/assets/vue-clickaway.common-DN57OfLL.js.gz 1.33kb / gzip: 0.80kb
dist//var/www/project/cms/web/dist/assets/vue-clickaway.common-DN57OfLL.js.map.gz 3.99kb / gzip: 1.77kb
dist//var/www/project/cms/web/dist/assets/vue-clickaway.common-legacy-ByMUh9Eh.js.gz 1.41kb / gzip: 0.82kb
dist//var/www/project/cms/web/dist/assets/vue-clickaway.common-legacy-ByMUh9Eh.js.map.gz 4.09kb / gzip: 1.84kb
dist//var/www/project/cms/web/dist/assets/lazysizes-legacy-CkEyl4xj.js.map.gz 35.48kb / gzip: 11.56kb
dist//var/www/project/cms/web/dist/assets/lazysizes-CcgbTW1C.js.map.gz 35.22kb / gzip: 10.95kb
dist//var/www/project/cms/web/dist/assets/vue-typer.min-legacy-DWAWjNQp.js.gz 23.00kb / gzip: 7.39kb
dist//var/www/project/cms/web/dist/assets/vue-typer.min-4r9Vubwv.js.gz 23.02kb / gzip: 7.72kb
dist//var/www/project/cms/web/dist/assets/player-legacy-CDyjUc3G.js.map.gz 1.15kb / gzip: 0.66kb
dist//var/www/project/cms/web/dist/criticalcss/calendar/index_critical.min.css.gz 2.75kb / gzip: 0.89kb
dist//var/www/project/cms/web/dist/criticalcss/episodes/index_critical.min.css.gz 2.10kb / gzip: 0.81kb
dist//var/www/project/cms/web/dist/criticalcss/errors/404_critical.min.css.gz 2.19kb / gzip: 0.82kb
dist//var/www/project/cms/web/dist/criticalcss/errors/error_critical.min.css.gz 2.19kb / gzip: 0.82kb
dist//var/www/project/cms/web/dist/criticalcss/errors/503_critical.min.css.gz 2.19kb / gzip: 0.82kb
dist//var/www/project/cms/web/dist/criticalcss/errors/offline_critical.min.css.gz 2.19kb / gzip: 0.82kb
dist//var/www/project/cms/web/dist/criticalcss/index_critical.min.css.gz 2.62kb / gzip: 0.87kb
dist//var/www/project/cms/web/dist/manifest.json.gz 10.28kb / gzip: 1.26kb
dist//var/www/project/cms/web/dist/assets/vue-typer.min-legacy-DWAWjNQp.js.map.gz 51.83kb / gzip: 15.08kb
dist//var/www/project/cms/web/dist/~partytown/debug/partytown-media.js.gz 15.65kb / gzip: 2.90kb
dist//var/www/project/cms/web/dist/~partytown/debug/partytown-sw.js.gz 1.94kb / gzip: 0.81kb
dist//var/www/project/cms/web/dist/~partytown/debug/partytown-atomics.js.gz 24.48kb / gzip: 6.00kb
dist//var/www/project/cms/web/dist/~partytown/debug/partytown-sandbox-sw.js.gz 23.51kb / gzip: 5.90kb
dist//var/www/project/cms/web/dist/~partytown/debug/partytown.js.gz 3.37kb / gzip: 1.17kb
dist//var/www/project/cms/web/dist/~partytown/partytown-atomics.js.gz 24.16kb / gzip: 10.16kb
dist//var/www/project/cms/web/dist/~partytown/partytown-media.js.gz 5.43kb / gzip: 1.94kb
dist//var/www/project/cms/web/dist/~partytown/partytown-sw.js.gz 24.98kb / gzip: 10.48kb
dist//var/www/project/cms/web/dist/assets/VueTable-DWIsb-nD.js.gz 57.54kb / gzip: 19.04kb
dist//var/www/project/cms/web/dist/assets/VueTable-legacy-Bh_4mXC3.js.gz 58.17kb / gzip: 18.87kb
dist//var/www/project/cms/web/dist/~partytown/partytown.js.gz 1.34kb / gzip: 0.79kb
dist//var/www/project/cms/web/dist/~partytown/debug/partytown-ww-atomics.js.gz 68.60kb / gzip: 14.16kb
dist//var/www/project/cms/web/dist/assets/vue-typer.min-4r9Vubwv.js.map.gz 51.96kb / gzip: 13.06kb
dist//var/www/project/cms/web/dist/~partytown/debug/partytown-ww-sw.js.gz 68.17kb / gzip: 14.08kb
dist//var/www/project/cms/web/dist/assets/polyfills-legacy-PIri70ov.js.gz 59.01kb / gzip: 21.89kb
dist//var/www/project/cms/web/dist/criticalcss/about/index_critical.min.css.gz 2.65kb / gzip: 0.88kb
dist//var/www/project/cms/web/dist/criticalcss/episodes/_entry_critical.min.css.gz 2.62kb / gzip: 0.87kb
dist//var/www/project/cms/web/dist/assets/vue.esm-CjMKYB17.js.gz 106.27kb / gzip: 38.91kb
dist//var/www/project/cms/web/dist/assets/vue.esm-legacy-Bs6W9nVA.js.gz 104.67kb / gzip: 37.55kb
dist//var/www/project/cms/web/dist/assets/VueTable-legacy-Bh_4mXC3.js.map.gz 222.89kb / gzip: 63.38kb
dist//var/www/project/cms/web/dist/assets/VueTable-DWIsb-nD.js.map.gz 221.12kb / gzip: 58.48kb
dist//var/www/project/cms/web/dist/assets/polyfills-legacy-PIri70ov.js.map.gz 260.78kb / gzip: 68.58kb
dist//var/www/project/cms/web/dist/assets/vue.esm-legacy-Bs6W9nVA.js.map.gz 601.95kb / gzip: 170.84kb
dist//var/www/project/cms/web/dist/assets/vue.esm-CjMKYB17.js.map.gz 609.89kb / gzip: 164.34kb
...and then I looked at the Critical CSS that was generated, and none of them were empty. Here's index_critical.min.css:
html{image-rendering:auto;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;text-rendering:optimizelegibility;box-sizing:border-box;-webkit-appearance:none;appearance:none}.devmode-container{background-color:#22223a}.devmode-background{background-image:url(https://dnzwsrj1eic0g.cloudfront.net/site/devmode-fm-dark-bg.svg)}@media (prefers-color-scheme:dark){.devmode-container{background-color:#22223a}.devmode-background{background-image:url(https://dnzwsrj1eic0g.cloudfront.net/site/devmode-fm-dark-bg.svg)}}.navbar-link{color:#eb5286;margin:calc(var(--spacing)*1);padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*1);font-family:var(--font-sans);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));text-decoration-line:none}.title-link{color:var(--color-devmode-pink);text-decoration-line:none}.tags-link{margin-inline:calc(var(--spacing)*1);margin-block:calc(var(--spacing)*2);background-color:var(--color-devmode-yellow);padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*1);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-leading:var(--leading-loose);line-height:var(--leading-loose);--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-devmode-pink);margin-left:1px;margin-right:1px;font-style:italic;text-decoration-line:none}.hamburger-menu{vertical-align:middle;font-family:var(--font-mono);font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-devmode-pink);font-style:italic}:root{--outline-color:#5db7a5,}.fonts-loaded .font-mono{font-family:Operator Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.fonts-loaded [class^=icon-]:before{font-family:fontello}[class^=icon-]:before{speak:never;-webkit-text-decoration:inherit;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:1em;margin-left:.2em;margin-right:.2em;font-style:normal;font-weight:400;line-height:1em;display:inline-block}.header-background{background-size:600px}.icon-twitter:before{content:""}.icon-facebook:before{content:""}.icon-youtube-play:before{content:""}.icon-help-circled:before{content:""}.icon-info-circled:before{content:""}.icon-play:before{content:""}.icon-google-play:before{content:""}.icon-itunes:before{content:""}.icon-rss:before{content:""}.icon-menu:before{content:""}.menuBlock{display:block!important}
@john-henry on DDEV. But it's weird, some projects don't generate, while others do.
I've tried it on Vite 5 / Vite 6 - both have an issue on one and the same project. But then another DDEV one, with exactly the same setup, same config (minus the URL) - does generate without any issue on Vite 5 / Vite 6
To me the "generation" time is really short, way too short than it should be, yet no errors thrown or nothing to be found in the logs, for sake of testing even tried to scrape "google.com" to no avail.
@michtio, would you like to meet online to sort this out and compare builds?
@john-henry definitely something that we can arrange, preferably next week Monday or Tuesday. You can reach out to me through Discord via @michtio
Just to bump this thread, unsure if related, but I am having an issue where the actual css generated doesn't contain the classes we need. We're using "@tailwindcss/vite": "^4.1.4", "vite": "^5.4.14", "tailwindcss": "^4.1.4",
The index file which should contain classes to do with tailwind, instead it seems to only contain swiper classes.
@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ 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
FTQAA);font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-
index:1}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;box-sizing:content-box}.swiper-wrapper{transform:translateZ(0)}
.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;display:block}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-butt
on-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation
-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;display:flex;align-items:center;justify-content:center;color:var(--swiper-n
avigation-color,var(--swiper-theme-color))}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:c
enter}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next:after,.swiper-button-prev:after{font-family:sw
iper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-pre
v:after{content:"prev"}.swiper-button-next{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after{content:"next"}.swiper-
pagination{position:absolute;text-align:center;transform:translateZ(0);z-index:10}.swiper-button-next:after,.swiper-button-prev:after{--tw-content:none
!important;content:none!important}
Vite config:
import type { UserConfigExport } from 'vite';
import legacy from '@vitejs/plugin-legacy';
import vue from '@vitejs/plugin-vue';
import ViteRestart from 'vite-plugin-restart';
import * as path from 'path';
import svgLoader from 'vite-svg-loader';
import viteCompression from 'vite-plugin-compression2';
import manifestSRI from 'vite-plugin-manifest-sri';
import { visualizer } from 'rollup-plugin-visualizer';
import eslintPlugin from 'vite-plugin-eslint';
import critical from 'rollup-plugin-critical';
import tailwindcss from '@tailwindcss/vite';
// https://vitejs.dev/config/
export default (({ command }) => ({
base: command === 'serve' ? '' : '/dist/',
build: {
emptyOutDir: true,
manifest: true,
outDir: '../cms/web/dist',
sourcemap: true,
rollupOptions: {
// @note - ensure all entry points have a linked plugins.critical(criticalPages: []) item if publicly available
input: {
home: './src/ts/home.ts',
status: './src/ts/status.ts',
general: './src/ts/general.ts',
'careers-index': './src/ts/careers-index.ts',
'people-index': './src/ts/people-index.ts',
},
},
},
plugins: [
tailwindcss(),
viteCompression(),
vue(),
manifestSRI(),
critical({
criticalUrl: 'xxxxx',
criticalBase: '../cms/web/dist/criticalcss/',
criticalPages: [
{ uri: '', template: 'index' },
{ uri: 'about', template: 'general/_entry' },
{ uri: 'terms-and-conditions', template: 'legal/_entry' },
{ uri: 'vacancies', template: 'vacancies/_index' },
{ uri: 'faqs', template: 'insights/_index' },
{ uri: 'insights/insolvency-faqs', template: 'insights/_category' },
{ uri: 'cookie-policy', template: 'cookie-policy/_index' },
{ uri: 'people', template: 'people/_index' },
{ uri: 'people/robert-addlestone', template: 'people/_entry' },
{ uri: 'services', template: 'services/_index' },
{ uri: 'services/debt-recovery', template: 'services/_entry' },
{ uri: 'industries', template: 'industries/_index' },
{ uri: 'industries/debt-recovery-agencies', template: 'industries/_entry' },
],
criticalConfig: {
penthouse: {
timeout: 60000, // Increase to 2 minutes
renderWaitTime: 500, // Add a wait time for rendering
},
},
}),
legacy({
targets: 'defaults',
}),
ViteRestart({
reload: ['../cms/templates/**/*'],
}),
visualizer({
filename: './src/web/dist/assets/stats.html',
template: 'treemap',
sourcemap: true,
}),
eslintPlugin({
cache: false,
fix: true,
include: ['./src/**/*.ts'],
}),
svgLoader({
svgo: true,
}),
],
publicDir: './src/public',
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@commons': path.resolve(__dirname, './src/ts/commons'),
'@modules': path.resolve(__dirname, './src/ts/modules'),
'@styles': path.resolve(__dirname, './src/css'),
'@helpers': path.resolve(__dirname, './src/ts/helpers'),
'@types': path.resolve(__dirname, './src/ts/types'),
'@vue-components': path.resolve(__dirname, './src/vue/components'),
'@vue-instances': path.resolve(__dirname, './src/vue/instances'),
// Fixes "runtime compilation is not supported in this build of Vue"
vue: path.resolve(__dirname, './node_modules/vue/dist/vue.esm-bundler.js'),
},
},
server:
command === 'serve'
? {
host: '0.0.0.0',
port: 3000,
strictPort: true,
cors: {
origin: /https?:\/\/([A-Za-z0-9\-.]+)?(\.ddev\.site)(?::\d+)?$/,
},
}
: undefined,
})) satisfies UserConfigExport;
The only changes from the projects that do work is the change in tailwind version, and we used to use postcss but now just use the dedicated tailwind vite plugin.
I've also noticed the critcss process times out on each url if I do not increase the timeout like I have above - something else I have not encountered before.
Are there any obvious issues which may be affecting the critcss generation? Forgive me if I am missing something obvious!
Same issue here. Have been using CriticalCSS for 1y+ but lately I noticed flashes of unstyled content on page load. I'm on ddev/vite and recently upgraded to TW4 with their new Vite plugin. Updated to latest versions in npm without success. The generated critical css files only contain some non-tailwind classes (hamburger menu, splide, algolia/autocomplete classes and some css vars). Let me know if there are things I can help out with to debug!
Weird that it wouldn't pick up Tailwind CSS classes. My guess is that due to the way the Tailwind CSS plugin is generating CSS, somehow the critical plugin isn't tapping in correctly to get the generated CSS.
It hooks in at a point where the assets are being written out, so I wouldn't think it would matter:
https://github.com/nystudio107/rollup-plugin-critical/blob/master/src/index.ts#L30
I am experiencing the same issue. Only thing that seems to be different between projects that work and don't work is using Tailwindcss v4. I'm using the postcss version of Tailwind if that matters.
Just as a note, I have tested the build process using node versions v18, v20, v20.18 with the same result (on a tailwind v4 project). Node 20.18 actually hangs at the critical css generation step until the process times out. But I don't think that is v4 specific as we encountered that on projects using v3.
If someone can point me to a github repo where I can reproduce this issue, that'd help.
Here is a basic example that I made: Craft 5 basic build
Prerequisites is that it uses DDEV and Craft 5. I exported a database inside the project at storage/ddev-database/database-seed.sql.gz
The homepage template is just literally a copy/paste from a tailwindcss template to test whether the critical CSS is being created.
So just a guess that folks here can try... it's possible that the tailwindcss() Vite plugin needs to execute first. Have you tried putting the critical() plugin last in the list of Vite plugins?
I still haven't had time to sit down and debug this, but here's something else you can try. My suspicion is that somehow, the CSS that the rollup-plugin-critical is being fed isn't correct or complete.
But it's also optional to pass the CSS in, so you can try this in your config:
PluginCritical({
criticalUrl: 'https://nystudio107.com/',
criticalBase: './',
criticalPages: [
{ uri: '', template: 'index' },
{ uri: 'about', template: 'about/index' },
],
criticalConfig: {
css: [],
},
}),
Note the criticalConfig where we pass in an empty array of CSS files to consider. This should cause the critical package to find the CSS from the URL has passed into it.
I just tested this locally, and the size of the critical CSS generated was larger than without it, so I'm thinking I'm onto something here...
@khalwat I just tried adding the below to my critical css config in vite.config.mjs to my example repo and it is still generating a blank critical css file.
criticalConfig: {
css: [],
},
I am using the postcss version of tailwindcss by the way.
@twitcher07 yeah empty files are something I'm totally unable to reproduce. Where are you running the critical task from? If it's inside of ddev, you need to make sure that you're using the internal Docker URL to the site, because it can't reach out from the container to your local machine for the routing back into DDEV
@khalwat I am running it outside of DDEV and setting the critical URL to the DDEV domain (e.g. example-site.ddev.site)
@twitcher07 what happens if you run it inside of the ddev container (which is generally where build systems should be run)?
It seems I can actually reproduce with:
ddev exec 'DEBUG=* npx critical https://mywebsite.ddev.site/ --base ./web/dist/criticalcss/ --inline=false --extract=false --width=1200 --height=1200 --penthouse "{blockJSRequests: false}" --target "home.css" --src /'
In the debug logs I can see the Tailwind css classes are correctly retrieved but somehow lost in the processing pipeline. If I print the ast on several places of the cleanup, it seems to only disappear at the final cleanup step.
If we look at the penthouse cleanup, we see it removes certain @-rules. However it removes them by default except the ones known to be safe like @import or @keyframes: https://github.com/pocketjoso/penthouse/blob/8ebc6533606481de6669b38fe332b731882f1203/src/postformatting/final-rule-remover.js#L14-L46
In my generated css from Tailwind v4 I see two things: everything is based on css variables, and they heavily rely on CSS cascade @layer. See also in the release notes for Tailwind v4 that they mention they adopted @layer as a main citizen.
/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
@layer properties {
...
}
@layer theme {
:root, :host {
.. all css vars go here
}
}
@layer base {
...
}
@layer utilities {
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height))
}
}
I managed to fix it by adding layer to the safelist and created a PR upstream. However I did not see any commits in the last few years on penthouse, so I hope the project is not dead https://github.com/pocketjoso/penthouse/pull/361
For what it's worth, to unblock meanwhile in my projects, I've added || name === 'layer' on line 47 of node_modules/penthouse/lib/postformatting/final-rule-remover.js, ran npx patch-package penthouse and added the postinstall patch script as mentioned on https://www.npmjs.com/package/patch-package