Sapper delayed css about svelte-windicss-preprocess HOT 19 CLOSED

I have reproduced it with your instruction. However, it seems that loading times are same for CSS. More it is failure because sapper default styles do have some base styles. windicss comes with it owns base styles, so they will get collapse. I guess if you delete all styles which are in globa.css and in style tags and base styles, it will work fine.
It is service worker injecting style here. Do not know sapper works but seems a bit odd that it injects styles in production build and not bundles them in CSS files.

from svelte-windicss-preprocess.

have you found the issue? If yes, please share solution, so i might be able to tweak some settings in parser

from svelte-windicss-preprocess.

ok thanks, i will check :)

from svelte-windicss-preprocess.

if I do not know the main cause, I might break it in the future. So if you can find out which fixes it, I can make sure to mark that change as necessary, thanks :)

from svelte-windicss-preprocess.

ok good. I will make sure to keep an eye on that :) closing this for now. If you find any other bug please open new issue

from svelte-windicss-preprocess.

And I also tested the same project with postcss and tailwind and it did not cause the same issue.

from svelte-windicss-preprocess.

please provide debug logs of svelte-windicss-preprocess, you can enable in config with

silent: false,
debug: true

also provide the version you are using of it according to the release tags of this repo.

from svelte-windicss-preprocess.

yarn run v1.22.10
warning package.json: No license field
warning ../package.json: No license field
$ sapper build --legacy
> Building...
│
│ svelte-windicss-preprocess - v3.0.0-beta.1
│ NODE_ENV is undefined
│ - windicss running mode: prod
│ - advanced debug logs: on
│    • compilation mode: enabled
│    • class prefix: windi-
│    • global preflights: enabled
│    • global utilities: enabled
│
└──────────
│
│ svelte-windicss-preprocess - v3.0.0-beta.1
│ NODE_ENV is undefined
│ - windicss running mode: prod
│ - advanced debug logs: on
│    • compilation mode: enabled
│    • class prefix: windi-
│    • global preflights: enabled
│    • global utilities: enabled
│
└──────────

┌──────────────┐
│ built client │
└──────────────┘
   19.6 kB client.6015a8f1.js
           │ src/node_modules/@sapper/app.mjs (35.0%)
           │ node_modules/svelte/internal/index.mjs (24.2%)
           │ src/node_modules/@sapper/internal/App.svelte (14.7%)
           │ src/components/Nav.svelte (7.9%)
           │ src/routes/_error.svelte (7.1%)
           │ src/routes/_layout.svelte (4.5%)
           │ src/node_modules/@sapper/internal/manifest-client.mjs (3.4%)
           │ node_modules/svelte/store/index.mjs (3.2%)
           │ src/client.js (0.1%)
           └ src/node_modules/@sapper/internal/shared.mjs (0.0%)
     559 B inject_styles.5607aec6.js
           └ inject_styles.js
   1.48 kB index.2214e7b1.js
           │ src/routes/index.svelte (98.4%)
           └ src/node_modules/images/successkid.jpg (1.6%)
     760 B about.36630ed6.js
           └ src/routes/about.svelte
    1.7 kB index.8cef1265.js
           └ src/routes/blog/index.svelte
   1.11 kB [slug].b869cc13.js
           └ src/routes/blog/[slug].svelte
│
│ svelte-windicss-preprocess - v3.0.0-beta.1
│ NODE_ENV is undefined
│ - windicss running mode: prod
│ - advanced debug logs: on
│    • compilation mode: enabled
│    • class prefix: windi-
│    • global preflights: enabled
│    • global utilities: enabled
│
└──────────
│
│ svelte-windicss-preprocess - v3.0.0-beta.1
│ NODE_ENV is undefined
│ - windicss running mode: prod
│ - advanced debug logs: on
│    • compilation mode: enabled
│    • class prefix: windi-
│    • global preflights: enabled
│    • global utilities: enabled
│
└──────────

from svelte-windicss-preprocess.

And I tested it with 3.0.0-beta.1 and 2.3.1

from svelte-windicss-preprocess.

I played around with the sapper project to find a solution and weirdly enough I got this project to work.
https://github.com/noahsalvi/sapper-netlify-demo/
But I have no idea why it works.

One thing to note is that when you use chrome in incognito mode it sometimes also works.

from svelte-windicss-preprocess.

I've finally found out why it works in one of my repos. 🥲

I tried every single approach, recreating the project, trying different dependency versions, with and without preloading, with and without styling, with and without components, different order of preprocessing and more.

And in the end I finally found out what made my repo work.

<style>
/* :global(body) {
    background: gray;
  } */
other styling...

It is the commented out style rule above the other rules. Changing the selector from :global(body) to for example only body doesn't work. It needs to be a global selector that is commented out 🥲. Also Preflight needs to be true for this to work.

I made a repro with the default sapper project, where I just added /* :global(any) {} */ at the top of index.svelte style element and the same for the Nav component. I had to comment out the style element in the _layout.svelte component because else it throws a 500 error. https://github.com/noahsalvi/sapper-windicss-repro.

from svelte-windicss-preprocess.

btw Sapper throws UNEXPECTED TOKEN ERROR when using beta.4, that's why I used beta.3

from svelte-windicss-preprocess.

This seems to be solved in bete.9 right 😁?

Out of interest, with which commit did you fix it or what was the problem?

from svelte-windicss-preprocess.

did i fix it?

from svelte-windicss-preprocess.

Seems like it, I tried replicating my repro and it works but let me check it one more time

from svelte-windicss-preprocess.

Confirmed, it works ! 🎉

Maybe the problem was connected to the duplicates in the css?

from svelte-windicss-preprocess.

does it work in dev then? Duplicate css actually is just handled in prod mode now
you can look in the changes and see what is changed.. some preflight stuff... which seems to be the main issue with you sapper setup i guess

from svelte-windicss-preprocess.

Yes it also works in dev but I never had a problem with it not working. It's only when I built the project with npm run build, that I got this.

Alright I'll check it out and thank you for fixing that, now I can finally use it with sapper 💪

from svelte-windicss-preprocess.

Yes you're the new preflight configuration is the solution.

// preflights might lost when refresh, so develop mode will always generate all preflights
  const preflights = PROCESSOR.preflight(
    finalContent,
    true,
    FILES.length === 0 || FILES.indexOf(filename) === 0,
    true,
    !DEV
  );

In the previous versions you had the last parameter, which is includePlugin as !DEV, resulting in includePlugins being true only for production. Now in the beta.9 you have both for dev as for prod false.

from svelte-windicss-preprocess.