No Production Bundle changes detected

marcus-merten · April 16, 2024, 8:36am

Hey guys,

iam having problems with the production bundle.
We are using Vaadin 24.3.9 (latest atm) and Spring Boot 3.2.4.

When I change files in the frontend-Folder or in styles.css in the theme and start a production build, vaadin detects the change and builds the prod.bundle again → expected behavior.
In the styles.css file we have alot of css files that are imported. For example:

@import “styles/menuBar.css”;

Changes to the menuBar.css are not detected and therefore no new prod.bundle is build.

I could force the production build with the plugin configuration or by deleting the bundle, but I would like to know if that is a bug, my configuration is wrong or am I getting something wrong?

Best regards
Marcus

Johannes · April 17, 2024, 7:30am

Hi Marcus,

I was able to reproduce the issue locally with the latest Vaadin 24. To me it feels like a bug. As you said when there is a change in frontend/themes/mytheme/styles.css that is correctly detected:

Detected changed frontend files:
 - themes/mythem/styles.css

But the changes in the dependent css files such as main-layout.css are not detected and thus no new production bundle is created.

Please report the issue here: Issues · vaadin/flow · GitHub The issue seems to related to this Bundle is not rebuilt if you change files in the theme/components folder · Issue #16407 · vaadin/flow · GitHub which was fixed but does not seem to fix the issue with the css changes in the dependent css files.

mikhail.21 · April 19, 2024, 1:43pm

I can reproduce it and this is a bug.
Note that this works fine in case if an application doesn’t have any JS/TS add-ons and may use the pre-compiled bundle provided by Vaadin.
In case of a custom compiled bundle, this doesn’t work indeed.
This deserves a ticket in Vaadin Flow Github repo.

mikhail.21 · April 22, 2024, 6:07am

github.com/vaadin/flow

Flow doesn't trigger a new production bundle upon changes in imported CSS files

opened 06:00AM - 22 Apr 24 UTC

mshabarov

bug Impact: High Severity: Major bundle

### Description of the bug Vaadin Flow builds a new production bundle if ther…e is a change in `frontend/themes/my-theme/styles.css`: ``` Detected changed frontend files: - themes/my-theme/styles.css ``` In the same time, it doesn't build a bundle, when the changes are in the imported CSS file, e.g.: `themes/my-theme/styles.css`: ``` @import url('./shared/layout.css'); ``` and these changes are not reflected in the application. Note: if an application uses a default pre-compiled prod bundle, the changes are reflected and added to a bundle. Workaround: [force production build](https://vaadin.com/docs/next/flow/production/production-build#enabling-production-builds) or delete prod bundle from `src/main/bundles/` ### Expected behavior Production bundle should take into account changes in imported CSS files. ### Minimal reproducible example Any Flow application that requires a new production bundle. `themes/my-theme/styles.css`: ``` @import url('./shared/layout.css'); ``` `themes/my-theme/shared/layout.css`: ``` body { background-color: #ffff00; } ``` ### Versions - Vaadin / Flow version: 24.3.9 (and most likely later)