How to externalise stylesheets and javascript code generated by vaadin?

Flow
1

I’m developing a spring boot Vaadin application (version - 24.6.0) where I want externalized my stylesheets in order to make it more secure for restricted production deployments. The styles are working correctly, but I can still see all the CSS class content in the html code through browser’s developer tools, even after externalizing the stylesheets. Goal is to enhance security by removing the usage of internal stylesheets by using vaadin external stylesheets support.

Currently, I have followed the below steps:

  • Added custom styles in custom-dashboard-view.css
  • Mapped it to style.css through @import
  • Specified a custom theme “dashboard-app” in Application.java
  • Applied custom classes in CustomDashboardView.java
  • Built the app through maven vaadin:build-frontend goal

The styles are working correctly, but I can still see all the CSS class content in the html code through browser’s developer tools, even after externalizing the stylesheets.

How can I externalise my stylesheets and any javascript code generated by vaadin?

Thanks

2

Did you do a production build? I think in dev mode it does inline the stylesheets in order to support hot reloading them without a server restart when you modify a CSS file.

3

Did you do a production build?

Yes we create a production build through the below command
mvn -B clean vaadin:build-frontend -Pproduction package

I think in dev mode it does inline the stylesheets in order to support hot reloading them without a server restart when you modify a CSS file

We tried turning off the production mode through the environment property vaadin.productionMode=false but that also has the same outcome - the stylesheets are still inline.

Externalising stylesheet should be an out-of-the-box feature as documented here but wondering why this basic thing is not working out.

Please share your expert inputs.
Thanks!

4

vaadin.productionMode=false does not have any effect anymore. The flag is automatically set when running build-frontend.

A question: does your import refer to an absolute URL (e.g. http://some-host/…)? If it is a relative path Vite will try to resolve and, if found it will inline it.

I wonder if adding the ?url suffix to the import may prevent Vite inlining

5 
@import url('./main-layout.css');
@import url('./views/workflow-dashboard-view.css')

This is how the imports are specified in the style.css file. They are relative and they do not have any ?url suffix.

Anything else missing?

6

Sorry, but probably I am not understanding your question.
With the posted code, the stylesheets will be inlined by the frontend build.

To avoid inlining the import should not point to an existing relative resource.
I’m not sure, but hopefully adding the ?url parameter could avoid inlining and leave the import unchanged

@import url('./views/workflow-dashboard-view.css?url')
7

Tried this too - in both production and development mode but no effect - the outcome is the same - the stylesheets are inline.

The style.css file has the below contents

@import url('./main-layout.css?url');
@import url('./views/workflow-dashboard-view.css?url');

    [theme~="dark"] {

    }

Kindly let me know where are we going wrong
Thanks

8

If I put @import url('./main-layout.css?url'); in styles.css CSS is not inlined, but when running the application build for production I can see an error in the browser console because the CSS cannot be found.

image
image977×42 5.79 KB

If you don’t want to inline resources, you can move the stylesheets in src/main/resources/META-INF/resources and use @StyleSheet annotation on the main view (@StyleSheet("./main-layout.css")). If you move the stylesheet there, also @import url('./main-layout.css?url') should work

9

If you don’t want to inline resources, you can move the stylesheets in src/main/resources/META-INF/resources and use @StyleSheet annotation on the main view (@StyleSheet("./main-layout.css") ). If you move the stylesheet there, also @import url('./main-layout.css?url') should work

@marcoc_753 - we tried this too but the css is still getting inlined. For simplicity we created a very basic vaadin app for this. The code is shared here. Could you please have a look and guide us on what could be missing?

Thanks.

10

I’m unable to download the project. Please remove at least target and node_modules folders

11

I tried your sample project, and both using @import url('./main-layout.css?url') OR @StyleSheet("./main-layout.css") on the layout class (no need to put it on every view), the stylesheet is loaded externally and not embedded into the page.
In the screenshots, you can see that the style is loaded from the main-layout.css file.

image

image

1 Like
12

Actually when placing the CSS files as static resources and loading them outside of frontend bundle you need to use “context://” prefix in url, see example:

1 Like