-
Notifications
You must be signed in to change notification settings - Fork 13
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
v3.0.0-beta.1 - Not working with some classes #55
Comments
please provide debug logs of svelte-windicss-preprocess, you can enable in config with
also provide the version you are using of it according to the release tags of this repo. Which bundler do you use? |
This is the output:
|
I have edited the comment. |
Do you bundle into one css file afterwards? That might be the issue with double classes.. |
Maybe yes. But I don't know exactly. I just follow this configuration rollup.config.js.
Ok, thanks. |
@lamualfa for the class issue try https://github.com/windicss/svelte-windicss-preprocess/releases/tag/v3.0.0-beta.3 For de-duplication check if your generated code is on css file with the classes there double too. If yes, your bundler handles each file separately and merges css later. I might be able to help if you can provide information. Do you use svelte scoping? Are you compiling or interpreting? |
Ok, i will try. Thanks. |
Unfortunately it still doesn't work in The code that i tested: <script>
export let width;
</script>
<div
class="bg-primary h-1.25 mx-auto rounded-lg {width === 'large' ? 'w-40' : ''} {width ===
'medium'
? 'w-30'
: ''} {width === 'small' ? 'w-20' : ''}"
/>
|
I think i need to follow this configuration that provide in examples folder. I will notify you if the duplication problem still occurs after following that. |
this is essential information. Now I know the issue and can fix it, please add this kind of code in future issues always! |
Ok, sorry. Thanks. I will provide that information for the next Issue. |
i think latest beta should work now |
Ok, thanks. Will the directive class work too? Example <div
class:w-40={width === 'large'}
class:w-30={width === 'medium'}
class:w-20={width === 'small'}
class="bg-primary h-1.25 mx-auto rounded-lg"
/> |
do not know, not yet maybe. but will work with v3 |
@alexanderniebuhr Thank you very much for your hard work 🙏🙏🙏. |
@alexanderniebuhr I'am sorry, but i have trying to use the project from example directory and still not working.
<script>
let width = 'small';
</script>
<svelte:head>
<title>Svelte + Sveasy + Windicss</title>
</svelte:head>
<div class="bg-green-300 {width === 'small' ? 'px-5 py-5' : ''}">
Hello world
</div>
Output Note
|
@alexanderniebuhr Still not working. |
it is an issue of rollup config somehow. the classes do get generated correctly in the preprocessor. however, do not ask me to fix it right now. Have to look into rollup in more detail, I never used it, if you have the time, please try with snowpack example and see if the inline expression work there |
Example
Windi CSS Config
HTML
Output CSS
h-1.5
andw-30
the two are is missing from CSS Output.Environment
v2.33.1
v3.29.4
v3.0.0-beta.1
I use Routify Framework for the routing library. See https://github.com/lamualfa/routify-windi.
The text was updated successfully, but these errors were encountered: