Vite build does not handle themes that are defined in an imported jar file

StephanMuc81927 commented 1 year ago

Description of the bug

I need to create a war file that then needs to be deployed to a Wildfly application server. The application uses a theme, that is defined in an imported jar file. In case the application is built with webpack, the behavior is as desired. But when build with vite the theme defined the imported jar file is not used. Further info: The folders frontend/generated are identical for build with webpack and build with vite The imported theme is correctly placed in folder "frontend/generated/jar-resources/themes" in both build modes

Minimal reproducible example

Step 0 Download and unpack the zip or tgz of wildfly-26.1.3.Final from https://www.wildfly.org/downloads/

Attached files:

lrz-base.zip Maven project building lrz-api.jar and a parent pom that is used by the build of the war file.

lrz-demo-webpack.zip Maven project building lrz-demo.war with webpack

lrz-demo-vite.zip Maven project building lrz-demo.war with vite. In both war projects, all files generated by the Vaadin maven plugin have been removed for easier comparability.

After unpacking the zips. Step 1 Change to directory lrz-base Call mvn clean install

Step 2 Change to directory lrz-demo-webpack Call mvn clean package

Step 3 Copy the resulting lrz-demo.war from directory lrz-demo-webpack/target to the directory of wildfly-26.1.3.Final/standalone/deployments Remove all files but README.txt if any before the copy.

Step 4 Start wildfly by calling wildfly-26.1.3.Final/bin/standalone.bat or wildfly-26.1.3.Final/bin/standalone.sh when on Linux Wait a little bit until wildfly is started

Step 5 Then call in your browser http://localhost:8080/lrz-demo/

You should see a login form centered a background image.

Repeat Step 2 - Step 5 using directory lrz-demo-vite You see a login screen not centered and not with a background image.

Expected behavior

The behavior should be identical regardless of whether webpack or vite is used to build

Actual behavior

When build with vite the theme defined in an imported jar file is not used.

Versions:

- Vaadin / Flow version: 2.3.6
- Java version: 11.0.18, vendor: Eclipse Adoptium
- OS version windows 10", version: "10.0", arch: "amd64", 
- Browser version Chrome newest
- Application Server: wildfly-26.1.3.Final
- Development or production mode: Production mode

lrz-base.zip lrz-demo-vite.zip lrz-demo-webpack.zip

Artur- commented 1 year ago

If you run node_modules/.bin/vite manually you get warnings in the output

[vite:css] @import must precede all other statements (besides @charset or empty @layer)
9  |  }
10 |  
11 |  @import url('./views/about-view.css');
   |   ^
12 |  @import url('./views/login-view.css');
13 |  
[vite:css] @import must precede all other statements (besides @charset or empty @layer)
10 |  
11 |  @import url('./views/about-view.css');
12 |  @import url('./views/login-view.css');
   |   ^
13 |

Artur- commented 1 year ago

Not sure why

These are warnings and not errors
These are not shown during a production build

Artur- commented 1 year ago

Moving the imports first makes the theme work

StephanMuc81927 commented 1 year ago

Ok that helped. Mea culpa! Thanks! The issue can be closed, But one question remains: Why is this not detected on a build with webpack.

vaadin / flow