CSS Classes not applied some times

General
1

Hi,

we have a strange behaviour since we develop a second project. (Local only! After deployment everything is fine)

We have copied the first project because the second one will be dedicated but kind of almost the same. We reuse CSS Classes etc.

But it looks like the browser has a problem. Some times the CSS gets not applied, Elements are not styled etc. Then i need to prepear build mv clean and remove browsercache in order see the correct result.

Does anyhone has some information how the css gets loaded etc? I think it is because we uses the same css class names but they are in different pathes in each project.

On antoher browser the css gets removed on every page refresh.

Its very anoying, maybe some one has some idea how to fix that css applied issue. Is that a IntelliJ, Plugin or Browser issue? I dont know into which direction i need to have a look.

Thank youuu

2

Hi Nico,

A few questions to clarify the situation

  • Which Vaadin version?
  • How are you loading the stylesheets?
  • Is this problem occurring in dev mode?
  • Are you running the app with HotswapAgent?
3

Hi Rolf,

thanks for your response which reminds me to your email :zipper_mouth_face:

Vaadin Version is 25.0.6 but it was the same on earlier versions
Stylesheet is loaded by

@StyleSheet(Lumo.STYLESHEET)
@StyleSheet("styles.css")
public class SecurityBootstrapConfig implements VaadinServiceInitListener, AppShellConfigurator {

and the style.css is placed at src/main/resources/META-INF/resources/styles.css

and in the styles.css i refer to other style sheets using

@import url('./components/vaadin-upload.css');
@import url('./antoherfolder/own-cssfile.css');

Problem is in dev mode yes, once i have build p production its working

Running with Hotswap or not makes no difference, it appears in both situations. I cant reproduce it very well. On my maschine its somethimes, sometimes not. But on my colleagues maschine its every time. We have the identical setup so i guess its something upon the build.

Do you have any idea what we could check to find a difference? Special Settings or so?

4

Right, so if it would only be a problem on V25, I would assume you’re dealing with the same issue as in this thread: Problem with multiple stylesheets

You could check you browser console for those errors, and, if you have them, you need to configure your spring security settings (assuming it’s a spring app).

But that should prevent those additional stylesheets from getting loaded at all, which doesn’t sound like the behavior you’re experiencing.

@marcoc_753 do we have some css hotswapping issue in V25 (other than the one affecting Tailwind)?

Was this also a problem on V24? In that case we’re dealing with something else.

5

As @rofa said, if you have Spring Security, you need to add rules for imported CSS.

I guess in production it works because the build process looks for CSS files in src/main/resources that are referenced in the application by @Stylesheet annotations, and it performs an inline of imported stylesheets if they can be resolved as local files.

6

I have added now “/**/*.css” to

  http.authorizeHttpRequests(auth -> auth
                .requestMatchers(
                        "/images/**", "/img/**", "/fonts/**", "/css/**", "/js/**",
                        "/font-awesome/**", "/favicon.ico", "/robots.txt", "/error",
                        "/VAADIN/**",
                        "/styles.css",
                        "/lumo/**",
                        "/webjars/**",
                        "/**/*.css"
                ).permitAll()

What also does not work anymore (since v 25?) is if i change a css file, the change gets not applied directly. i have changed a display:block to flex but in browser i still see block. Even after restart, Browser Cache etc.

Something must be broken in the project. The other project works fine, only the copied one makes problems

Edit: now my block is replaces with flex. I dont know if its a hard caching by Chrome/Edge. I have done nothing, but now the correct block is visible. I dont get it where it comes from, really anoying. Where does vaadin cache?

7

If you are using the Hotswap agent, the styles should be reloaded when updated.

With Spring Boot there can be some problems caused by embedded Tomcat resource cache. See

8

Ahhh

i have added now

server.tomcat.resource.allow-caching=false

Then i made a background-color: red reloaded the page > nothing
Ctrl+F5 > backgound was red.

Looks like Browser Cache. But in previous version it auto reloaded the page, when i made changes in css, or?

But now i can get my change visible, big step! Thanks

9

There was an issue with stylesheet reloading that has been fixed in Vaadin 25.0.6

10

You can try to put some breakpoints in StylesheetLiveReloadView and verify if it is engaged

11

I cant find it. I have now updated to 25.0.6 (Was on 25.0.4) and removed node_modules etc. but the css reload still not work .

Now also Ctrl + F5 does not work again. Css is not applied (Run as Debug and Hotswap Agent, both the same)

12

Looks like you are not running in dev mode. Or at least you do not have com.vaadin:vaadin-dev-server in your classpath so that the IDE can find it.

13

I have vaadin.developmentMode=true in my application.properties and

<dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-dev</artifactId>
            <optional>true</optional>
</dependency>

in pom.xml is there something missing?

14

Dependency looks correct.
vaadin.developmentMode=true is unnecessary and should be removed.

I noticed I mentioned the wrong class :man_facepalming:
The breakpoint should be put in PublicResourcesLiveUpdater

15

so vaadin.productionMode=false should be fair enough?

16

You don’t need such properties.
The production flag is set by the maven/gradle plugin when packaging the application (e.g. by build-frontend goal).

Edit: You do not nedd it with Maven. For Gradle, you will have -Pvaadin.productionMode=true to trigger the vaadinBuildFrontend task.

1 Like
17

Yeah no it looks great again. I can change css and it reloads again.

But now its getting strange :D

I have a Div which is red (from a previuos test)
image

But there is no red background applied. I can restart, Ctrl. F5 the div stays red.

image

There must be any cache anywhere. In the logs i see Authorizing GET /.well-known/appspecific/com.chrome.devtools.json aceess denied. Could it be that devtools needs access to some files, which are blocked by Spring Security?

This must be tomcat cache or what ever. Its now red in all browsers i have.

Now after the 1000. restart its not red anymore. I dont get it and will have an eye on it.

18

@marcoc_753 i have made a mvn clean package -Pproduction since then everything looks great again! I thought this is not necassary from v25 on?

I dont know if it was accidently but now it looks like it should.

19

Wasn’t the problem in dev mode only?
If I get it correctly, you did not have issues in production mode.

It starts to be confusing :smile:

I doubt that /.well-known/appspecific/com.chrome.devtools.json being blocked should impact it, but you can try to add a permitRule and see if something changes.

Anyway, it’s hard to say what’s happening without a reproducible example.

20

In Vaadin 25, you do not need a production profile.
You should have vaadin-dev with optional flag, so you can run in dev mode starting the application from the IDE or with mvn spring-boot:run.
Then you have the vaadin-maven-plugin configured to execute build-frontend only and when you package the app, a production build is produced.