add support for SvelteKit about svelte-windicss-preprocess HOT 26 CLOSED

note there is also windicss/vite-plugin-windicss#54 for svelte + windicss + vite to work best, the two vite plugins need to cooperate

from svelte-windicss-preprocess.

yes, that solution obviously only works inside vite. so the separate svelte-windicss-preprocess is still needed for other cases

from svelte-windicss-preprocess.

Using the latest version of the package and the problem just disappeared. All good now, thanks.

from svelte-windicss-preprocess.

For anyone checking this thread, these guys got it to work with svelte-windicss-preprocess:

https://github.com/svelte-add/windicss

(And the fact they got it to work with svelte-windicss-preprocess is nice for the extra features that it offers,)

from svelte-windicss-preprocess.

@NoelJacob schould not be any difference in speed. just difference in the position in build trace. I suggest you try vite-plugin first. if you have a special use case or feel pre-processing might be better, you would com back to this repo

from svelte-windicss-preprocess.

suggest to use windicss/vite-plugin

from svelte-windicss-preprocess.

we are working on fixing preflights, not finished yet

from svelte-windicss-preprocess.

I see SvelteKit mentioned on the readme, but one thing to note - snowpack.config.cjs has been replaced with vite.config.js: https://github.com/sveltejs/kit/blob/master/packages/create-svelte/template/vite.config.js

from svelte-windicss-preprocess.

Pumped for this, hoping the integration between windicss and svelte can be simplified with the switch to Vite for SvelteKit. Happy to be a guinea pig to help test any changes.

from svelte-windicss-preprocess.

if you guys have any suggestion for the readme. please submit pr

from svelte-windicss-preprocess.

Last night when I tried this out it was working fine (with vite) but now I get this error.

ReferenceError: Layout is not defined
    at root.svelte:6:12
    at $$render (/home/zack/dev/poggers/node_modules/svelte/internal/index.js:1369:22)
    at Object.render (/home/zack/dev/poggers/node_modules/svelte/internal/index.js:1377:26)
    at get_response (file:///home/zack/dev/poggers/node_modules/@sveltejs/kit/dist/ssr.js:2289:27)
    at async get_response (file:///home/zack/dev/poggers/node_modules/@sveltejs/kit/dist/ssr.js:2293:10)
    at async render_page (file:///home/zack/dev/poggers/node_modules/@sveltejs/kit/dist/ssr.js:2403:9)
    at async ssr (file:///home/zack/dev/poggers/node_modules/@sveltejs/kit/dist/ssr.js:2541:20)
    at async Immediate.<anonymous> (file:///home/zack/dev/poggers/node_modules/@sveltejs/kit/dist/chunks/index.js:3273:23)

when starting a new project.

Is this a problem with windicss or is this a sveltekit problem?

from svelte-windicss-preprocess.

need more information about the project to tell you.. can't see any useful information in the stack trace

from svelte-windicss-preprocess.

Do I use this or windicss/vite-plugin for better speed?

from svelte-windicss-preprocess.

@Evertt thanks for the info.. also the problem for us currently is not the support installing it, it is more getting it to work correctly with SSR+SPA.

We appreciate any solution which does works with preprocessor in SSR

from svelte-windicss-preprocess.

@alexanderniebuhr I believe their solution works for SSR? At least I haven't noticed any issues? Would I need to do something specific to test whether windicss works with SSR specifically?

from svelte-windicss-preprocess.

Look at some issues in this repo, for most people it works fine. But we have some more edge cases with hybrid which has client and server

• global utility and Preflights missing sometimes
• Compile vs non compile
• Scoped styles

But you can check both windicss integration and choose the one best for your project.. if preprocessor works it's great. We currently just do not focus on fixing svelte kit specific issues, since there is always the vite plugin as an alternative -> seems currently to work better with SSR ..

from svelte-windicss-preprocess.

from svelte-windicss-preprocess.

@Evertt 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',
    }

from svelte-windicss-preprocess.

@alexanderniebuhr I just looked at the issue about preflight missing in Sapper's production build and now I noticed that I have the same issue when using this plugin for svelte-kit I actually have the same issue. Are you already aware of that?

note you will not get de-duplication, other than svelte native

In which cases could I still get duplicate code then?

from svelte-windicss-preprocess.

do mode: dev as config for the preflight issue pls :)

Duplicate code would be preflights and classes used in multiple file (if not using compile mode). But that is the expected behavior for scoped styles.

from svelte-windicss-preprocess.

Oh, having duplicated preflights does sound like potentially a lot of duplication. 😅
Okay I might switch over to the vite plugin then. I've noticed though, that when using the vite-plugin, I no longer can do things like:

<style>
  .button {
    @apply sm:p-2;
  }
</style>

Because then svelte(-kit) will complain at the : character during the build process. Is that fixable?

from svelte-windicss-preprocess.

i'm sorry it's taking so long for a new vite-plugin-svelte release. It should get a lot easier with that.
In the mean time, @bluwy has a workaround how to add the cooperating windicss preprocessor manually: https://github.com/bluwy/pick-palette/blob/a4c37dfe3d7cdd150d87b78842839e75e2830cf7/vite.config.ts#L11

from svelte-windicss-preprocess.

@dominikg can you give me some insight what will change with new release.. will it handle files in svelte logic. or still parallel, and calling new preprocessor for each file? please hit me up, either here or discord!

from svelte-windicss-preprocess.

code is here sveltejs/vite-plugin-svelte#13 basically vite-plugin-windicss and vite-plugin-svelte cooperate with each other. vite-plugin-windicss exposes a svelte preprocessor that vite-plugin-svelte adds automatically. So adding both plugins should work for the user without the need to add another svelte preprocessor themselves.

This should also take care of duplicated global styles.

from svelte-windicss-preprocess.

@dominikg yeah found that out later today. this is great and good for all people. still going to suggest that. but there might people want to use this repo, since they want to process everything before svelte pipeline. We will see and adapt to the new release :)

from svelte-windicss-preprocess.

even know people wanting to preprocess with vite.. still not thinking it is the correct way, but people have very specific projects

from svelte-windicss-preprocess.