-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
the style update is failing after In the Vue3 component test #24874
Comments
@lmiller1990 |
Hmm interesting, I guess this is related to how Tailwind does a JIT compilation and injects the latest stylesheet. I notice:
My question is - how does the latest styles generated by Tailwind actually get into the app in the first place (even in a regular Vite development environment)? The only style code I see is @tailwind base;
@tailwind components;
@tailwind utilities; Does one of these somehow contain all the JIT'd styles based on your CSS classes? |
Right, I see it injects during development like this: Let's find out why that isn't working in Cypress. Also, I don't see how this is injected in the regular Vite development environment, either... let's find out. Ok, so this is the line that does injection: |
I think the problem is related to importing the style in the <style>
@import './style.css';
</style> Inside of I actually just realized I had a similar bug in my own project. I worked around it by kicking off Tailwind manually https://github.com/lmiller1990/eleutheria/blob/main/packages/frontend/package.json#L14 Then importing that: I wonder if we have a bug in the Cypress Vite plugin: https://github.com/cypress-io/cypress/blob/develop/npm/vite-dev-server/src/plugins/cypress.ts#L75-L78 |
Ah, @marktnoonan offers this work around: const styles = import('../../src/style.css?' + Date.now()) I think vite (or our integration) has some caching that we need to bust somehow - it's not realizing that the stylesheet has been updated. Can you test that out @cuixiaorui ? |
cool It's working now That's an interesting solution Looking forward to finding the real problem |
We should see if webpack based projects have a similar problem. The solution might be as simple as appending a query string, like this workaround, but somewhere inside our |
I found out this only happens with Vite - webpack works fine. I'll try and patch vite-dev-server. |
I am trying to fix this, I think #24965 should do it. Let's see how it goes. I'll share a pre-release for you try @cuixiaorui, please give me a day or so. I don't think we even care about HMR here - if any module dependency changes (including supportFile) we can just do a full reload... the bundle should be pretty small in general, and Vite does a lot of caching, so I don't think it'll really impact perf. But let's see! |
@cuixiaorui can you try the pre-release (scroll to bottom and grab the install link for your OS) e1d766c#comments It's working for me. This will be fixed once #24965 is merged. |
Hey team! Please add your planning poker estimate with Zenhub @amehta265 @astone123 @lmiller1990 @marktnoonan @mike-plummer @rockindahizzy @warrensplayer @ZachJW34 |
Not adding an estimate since @lmiller1990 already has an open PR for this |
@cuixiaorui fixed, it will be in the next release! |
Released in This comment thread has been locked. If you are still experiencing this issue after upgrading to |
Current behavior
I used tailwind CSS for my project
The first time you enter the cypress component test it's fine
When I change the class, the cypress component test does not update the view
Changed bg-red-500 to bg-blue-500
When you go back to cypress and click the refresh button, you will see that the style is invalid

Desired behavior
The correct behavior should be after updating the component's class
you should see the correct result in the cypress component test, where the background turns blue
Test code to reproduce
repo: https://github.com/cuixiaorui/cypress-issue-for-vue3-compoment-test-hot-update
Cypress Version
11.2.0
Node version
v17.5.0
Operating System
macOS 13.0.1 (22A400)
Debug Logs
No response
Other
No response
The text was updated successfully, but these errors were encountered: