plugin styles breaking if in main svelte file about svelte-windicss-preprocess HOT 21 CLOSED

will debug this tomorrow

from svelte-windicss-preprocess.

@prab-it @munxar I am not happy with that, but I would like to ask you guys test your cases with the new examples for rollup & snowpack. (I will add svelteKit later, however we might not support that fully until it is released). I think that the old examples where outdated, and this might have led to some issues. I am more than happy to fix this, however first we need to find out if this is happening caused by outdated example configuration or if this is still happening with the new examples. In parallel, I will be making more debugging on my side too.
Thanks, you, guys!

https://github.com/windicss/svelte-windicss-preprocess/tree/main/example/rollup
https://github.com/windicss/svelte-windicss-preprocess/tree/main/example/snowpack

from svelte-windicss-preprocess.

ok. I am working on examples for Sapper and svelteKit, just need some more time. Please wait until I finish them, and then look if the setup is close to yours & what is different. I really need to find out if this issue is setup or bundler specific, because I do not see any issue in CSS parsing right now. So it has to be a combination of two!

from svelte-windicss-preprocess.

@prab-it globalUtility: false works for me in your project, as I concluded earlier this might also be the correct way to set with bundlers splitting files into multiple css

from svelte-windicss-preprocess.

@alexanderniebuhr this is my sapper-ts-windicss repo:
sapper-ts-windicss.zip

from svelte-windicss-preprocess.

@prab-it dynamic classes will be fixed in a future release, down the road 2-4 releases or so. So, no fast fix here, just be patient, and reposition some classes, subscribe #35

I will have a look at sapper later but will be same solution. Either global and props, or scoped and no props

from svelte-windicss-preprocess.

@alexanderniebuhr the rollup example in main branch works for me, no issues so far.

from svelte-windicss-preprocess.

@alexanderniebuhr found an issue with rollup with bundle option, for more info download attached rollup-windicss.zip and open App.svelte.
rollup-windicss.zip

from svelte-windicss-preprocess.

will check later

from svelte-windicss-preprocess.

@alexanderniebuhr ok the main issue is related to live changes. Restart the dev server fix this issue.
How to reproduce the issue:
1 - $ npm run i
2 - $ npm run dev
3 - add one more Input in src/App.svelte

<Input type="number"></Input>

Preview:

from svelte-windicss-preprocess.

@alexanderniebuhr ok, I tested on both, Sapper and SvelteKit.

Sapper + Rollup:
The bundle.css made with rollup-plugin-css-only fix the issue.

SvelteKit + Snowpack:
Works partially with npm run dev and it doesn't work with npm run build && npm run start.

from svelte-windicss-preprocess.

you used the outdated examples?

from svelte-windicss-preprocess.

@alexanderniebuhr I used the latest examples.
https://github.com/windicss/svelte-windicss-preprocess/tree/main/example/rollup
https://github.com/windicss/svelte-windicss-preprocess/tree/main/example/snowpack

from svelte-windicss-preprocess.

and you added Sapper and svelteKit yourself?

from svelte-windicss-preprocess.

@alexanderniebuhr yes.

from svelte-windicss-preprocess.

@alexanderniebuhr ok, thanks BTW!
Try my sveltekit-windicss repo with bug:
sveltekit-windicss.zip

from svelte-windicss-preprocess.

@alexanderniebuhr you are right, globalUtility: false fix the issue! 👍
I don't know what was the problem last time with globalUtility: false, but it works!
Is it possible achieve something like this with Sapper + Rollup, I mean without rollup-plugin-css-only?
Thanks again for your support!

from svelte-windicss-preprocess.

Do not have any Rollup Setup right now, can you share yours too. Then I can have a look

from svelte-windicss-preprocess.

@alexanderniebuhr wait a second, I found what was the problem, if I set globalUtility: false, now I can't pass class as prop to my Input component.
ex. try to set border-8, it doesn't work...

src/routes/index.svelte:

<script>
  import Input from '$components/Input.svelte';
</script>

<form action="#">
  <Input type="text" placeholder="input 1" class="border-8" />
</form>

from svelte-windicss-preprocess.

Again globalUtility: false is the solution and then https://svelte.dev/repl/88c699452f7644afa71f101a5a1b06d2?version=3.24.0 or https://svelte.dev/repl/299bec14c8154ad89eb53f3d18ba2a37?version=3.24.0 if you need to parse classes as props. Your use case is not support by svelte. Svelte is all about scoped styles. So, the styles need to be defined in the component or in a style tag with (both needs unreleased svelte-windicss-preprocessor and svelte-preprocessor)

<style global>
   ...
</style>

<style>
   :global(h1) {
     ...
  }
</style>

from svelte-windicss-preprocess.

actually it works for me, even with globalUtility: true, cannot reproduce ur issue

from svelte-windicss-preprocess.