Different sizes of CSS file

I have got a strange behaviour that I really do not understand.

I have a Laravel 11 app and when I run npm run build locally, Vite produces two different CSS files, depending on whether I have cached the views or not.

If I clear the cache with php artisan view:clear and run npm rum build I get

vite v5.4.11 building for production...
✓ 53 modules transformed.
public/build/manifest.json                            0.61 kB │ gzip:  0.22 kB
public/build/assets/app-DiWhhGTO.css                 14.45 kB │ gzip:  3.48 kB
public/build/assets/app-z-Rg4TxU.js                  35.05 kB │ gzip: 14.08 kB
✓ built in 311ms

If I cache the view with php artisan view:cache then I get

vite v5.4.11 building for production...
✓ 53 modules transformed.
public/build/manifest.json                             0.61 kB │ gzip:  0.22 kB
public/build/assets/app-DeuvAMSu.css                 104.87 kB │ gzip: 14.88 kB
public/build/assets/app-z-Rg4TxU.js                   35.05 kB │ gzip: 14.08 kB
✓ built in 684ms

The issue I have is not really the size, but the fact that some style seems to be missing and therefore the site does not look right.

Does anyone has a clue on what's going on?

My vite.config.js is nothing out of the ordinary

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ]
});

LaryAI

1 year ago

Level 58

The issue you're experiencing with different CSS file sizes when caching views in Laravel is likely related to how Vite processes and bundles your assets. Here are a few steps you can take to diagnose and potentially resolve the issue:

Check for Conditional CSS Loading: Ensure that your CSS is not being conditionally loaded based on some server-side logic that might be affected by view caching. This can happen if you have Blade directives that include or exclude certain styles.
Inspect CSS Imports: Verify that all your CSS imports in resources/css/app.css and any other CSS files are consistent and not dependent on any server-side conditions. Sometimes, CSS might be conditionally imported based on environment variables or other conditions.
Review Blade Templates: Check your Blade templates for any conditional logic that might affect the inclusion of styles. If your styles are being included conditionally, this could lead to differences when views are cached.
Clear and Rebuild: Sometimes, stale cache or build artifacts can cause issues. Try clearing all caches and rebuilding:
```
php artisan view:clear
php artisan cache:clear
php artisan config:clear
npm run build
```
Check for CSS Preprocessors: If you're using a CSS preprocessor like Sass or Less, ensure that the preprocessor configuration is not affected by the view cache.
Debugging: Add some debugging output to your Blade templates to see if any unexpected logic is being executed when views are cached. This might give you a clue about what's being included or excluded.
Vite Configuration: Double-check your vite.config.js to ensure there are no plugins or configurations that might behave differently based on the environment or cache state.
Dependencies: Ensure all your dependencies are up to date. Sometimes, bugs in dependencies can cause unexpected behavior.

If none of these steps resolve the issue, consider creating a minimal reproducible example and testing it in isolation. This can help identify if the problem is specific to your project setup or a more general issue with Vite or Laravel.

troccoli

1 year ago

Best Answer

Level 6

Answering my own question.

As usual it was a PICNIC.

I'm using Flux and the content array in my tailwind.config.js file was

content: [
  './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
  './storage/framework/views/*.php',
  './resources/**/*.blade.php',
  './resources/**/*.js',
],

Note the second entry which is why caching the view made a difference.

The correct content should be

content: [
  './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
  './resources/**/*.blade.php',
  './resources/**/*.js',
  './vendor/livewire/flux-pro/stubs/**/*.blade.php',
  './vendor/livewire/flux/stubs/**/*.blade.php',
],

Note that I removed the cached views and added the Flux views.

Please or to participate in this conversation.