[🐞] CSS module not loading after press back button on browser

[anasalaqeel]

Which component is affected?

Qwik City (routing)

Describe the bug

I'm trying to do a JS event when I'm clicking on a button I want to change some other element background.

The problem:

the problem is that I'm using the CSS module approach which is styles.module.css and everything is working fine until I do any JavaScript event (click event in our example below) before navigating to any other route. When I'm doing any JavaScript event and then press on another link to navigate to another page, then I decide to go back for some reason, here the problem occurs, which is when I press on back button in the browser, the styles of the page which I go back to it disappear and the whole styles.module.css not applying to the component.

Example here:

https://codesandbox.io/p/sandbox/gracious-meadow-g3df49?file=%2Fsrc%2Froutes%2Findex.tsx%3A9%2C1

How to use examples to get the problem

Step 1: Press on the change color button to make a JavaScript event.
Step 2: After you see the link color has been changed, press on the link to navigate outside the page e.g. 404 or whatever you see there.
Step 3: Press the back button on the browser and then you will see the link styles have disappeared and only the style which came from the styles.module.css.

Done!

Please Fix this issue ASAP

Thank you
Best regards

Reproduction

https://codesandbox.io/p/sandbox/gracious-meadow-g3df49?file=%2Fsrc%2Froutes%2Findex.tsx%3A9%2C1

Steps to reproduce

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 5.51 GB / 15.88 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (118.0.2088.46)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @builder.io/qwik: ^1.2.13 => 1.2.13
    @builder.io/qwik-city: ^1.2.13 => 1.2.13
    @builder.io/qwik-react: 0.5.0 => 0.5.0
    undici: 5.22.1 => 5.22.1
    vite: 4.4.7 => 4.4.7

Additional Information

I'm trying to do a JS event when I'm clicking on a button I want to change some other element background.

The problem:

the problem is that I'm using the CSS module approach which is styles.module.css and everything is working fine until I do any JavaScript event (click event in our example below) before navigating to any other route. When I'm doing any JavaScript event and then press on another link to navigate to another page, then I decide to go back for some reason, here the problem occurs, which is when I press on back button in the browser, the styles of the page which I go back to it disappear and the whole styles.module.css not applying to the component.

Example here:

https://codesandbox.io/p/sandbox/gracious-meadow-g3df49?file=%2Fsrc%2Froutes%2Findex.tsx%3A9%2C1

How to use examples to get the problem

Step 1: Press on the change color button to make a javascript event.
Step 2: After you see the link color has been changed, press on the link to navigate outside the page e.g. 404 or whatever you see there.
Step 3: Press the back button on the browser and then you will see the link styles have disappeared and only the style which came from the styles.module.css.

Done!

Please Fix this issue ASAP

Thank you
Best regards

[mhevery]

So, this is working as intended. When you navigate to a different page, you lose the state of the previous page. Then, when you navigate back, the page is reset back to the initial state. It is just how browsers work.

Maybe you are thinking of SPA apps that carry state between navigations, but in MPA this is how things work.

I am going to close this as this is normal browser behavior.

[anasalaqeel]

@mhevery I know it's a normal browser behavior to reset the page state, but the page should have the CSS styles as well, this is not a useSignal state case, it's a styling case, when you navigate back, the styles of the page should not go away, its definitely not normal behavior or not at least the best practice. CSS should be loaded at the build time and shipped to the browser, then it will be available to the browser even if press go back, the CSS should be still available (this is what useStylesScoped$() do), but the CSS module not working as expected. if your CSS modules do not work as expected then there is no point to use it.

[wmertens]

@anasalaqeel no, this is your component:

export default component$(() => {
  const color = useSignal("#ff1212");
...

when you change the link color you change a signal which is part of the component state. When you navigate away, this component is unmounted and the signal value is lost. When you go back the component rerenders and sets the signal back to "#ff1212".

You could put the state in a context that's owned by the root layout, and then as long as you use SPA navigation it will be retained, and MPA navigation will clear it in the same way.

The CSS is part of the global css and it does not change.

[anasalaqeel]

@wmertens hello friend, changing the background is not the case, I made this only to invoke a JavaScript code.
the problem is when you don't invoke any javascript before you navigate to another page and then you navigate, then navigate back, then everything will be ok, but when you invoke any JavaScript code then you navigate to another page and then navigate back, you will lose all CSS even those what exist in the styles.module.css (those styles are rendered with the initial load)

[mhevery]

Your reproduction does not match what you are describing above. Can you create a new reproduction describing this exact issue? (As of right now it works as intended from my point of view)

[jakovljevic-mladen]

I noticed similar behaviour in my app as well. But the reproduction example is good enough to explain what's going on. Here's the steps:

• visit https://g3df49-5173.csb.app/
• click Change Link Color button
• click Press Me link (opens 404 page)
• click back button in the browser

Expected:

Actual:

Going back in history with browser's back button should at least load the initial site layout (but it doesn't, something is missing and site doesn't really load initial CSS data).

@mhevery, maybe this explanation helps reproduce the issue.

[wmertens]

Very weird! I didn't notice this behavior before but I just managed to on my phone.
So the css is just missing entirely. We need to figure out why.

[jakovljevic-mladen]

I tried to debug it myself and this could be helpful information:

• in the network tab, track requests to /src/routes/styles.module.css;
• /src/routes/styles.module.css gets loaded on initial load as a valid CSS (with content-type: text/css) and body being CSS;
• after Change Link Color button is clicked, a request to /src/routes/styles.module.css is sent again and the response is a JS file with content-type: application/javascript (already weird, but maybe this is how CSS modules work);
• after Press Me link is clicked, no request to /src/routes/styles.module.css is being sent;
• after clicking back button, browser returns back to the original page (/), it receives exactly the same HTML response it got when loaded for the first time;
• but, it now also tries to send request to /src/routes/styles.module.css and server returns the same JS file it returned after Change Link Color button is clicked with content-type: application/javascript as well.

Hope this helps @wmertens. Thanks for reopening.

[mhevery]

• after Change Link Color button is clicked, a request to /src/routes/styles.module.css is sent again and the response is a JS file with content-type: application/javascript (already weird, but maybe this is how CSS modules work);

What is the content of the JS?

[jakovljevic-mladen]

What is the content of the JS?

This is the response:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/routes/styles.module.css");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
const __vite__id = "/workspaces/sandbox/src/routes/styles.module.css"
const __vite__css = "._my-button_1p3ob_1{\r\n    background-color: rgb(38, 112, 41) ;\r\n    padding: 30px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    text-decoration: none;\r\n    border-radius: 15px;\r\n    margin-top: 50px;\r\n}"
__vite__updateStyle(__vite__id, __vite__css)
export default {
	"my-button": "_my-button_1p3ob_1"
};

import.meta.hot.prune(() => __vite__removeStyle(__vite__id))