windicss/svelte-windicss-preprocess

code splitting produces invalid stylesheets

happysalada opened this issue · 8 comments

happysalada commented

First of all, thanks for the great repo!

Context.

  • I am aware of the vite-windicss-plugin. However if you want to use mdsvex, you can't use the plugin. The svelte-preprocessor is the only way to go.

Decription of the issue.
having a class tag like
"text-base md:text-lg" can produce different css stylesheets that would lead this to have the text-base class instead of the text-lg class. Even on an md device.

Steps to reproduce.

  • open source code is here
  • install with pnpm and run pnpm dev
  • load the main page localhost:3000. the main buttons are aligned with each other
  • click on the about in the header and click back to Home in the header
  • the two main buttons are not aligned anymore. Another stylesheet has been given priority that breaks the valid initial style.

I have verified that I'm on the latest version.

Let me know if you need anything else.

Thanks again!

alexanderniebuhr commented

you do not have the svelte-windicss-preprocess installed at all.. wrong repo?

happysalada commented

I changed the link to point to a specific commit https://github.com/happysalada/svelte.megzari.com/tree/a73c5e1fce1dbb00d09a6537c26beb72c16ee1ed
you might have seen the notification for the master branch.

Let me know if there is still a problem.

alexanderniebuhr commented

yeah checked the repo. I am afraid that is nothing we can fix. In build mode it does work. The issue here is that in dev mode, some styles are HMR only.. I do not see why it does break.. if you can tell me what styles have changed? Preflights missing after HMR? I can tell you if we can fix it

alexanderniebuhr commented

update to v3.2.0
add to your windicss config, should work in all modes.. note you will not get de-duplication, other than svelte native

    {
      kit: true, // ADD
      config: 'windi.config.cjs',
    }
happysalada commented

Thanks for the help and the superfast fix!

alexanderniebuhr commented

i have noticed some bugs with your style, in firefox and production mode.. that is super strange.. currently no time to debug.. if you have any insight, and know what is causing it.. please open new issue with insights why they are happen

happysalada commented

Yes, I've seen those too. I'll let you know if I findout more.

alexanderniebuhr commented

on reload it seems to work.. so do not know.. might be an issue with the serve cli tool