v3.0.0-beta.1 - Not working with some classes

[lamualfa]

Example

Windi CSS Config

module.exports = {
  theme: {
    extend: {
      margin: {
        large: '4rem',
        medium: '2.5rem',
        small: '1rem',
      },
      colors: {
        primary: {
          DEFAULT: '#991B1B',
          50: '#F0AAAA',
          100: '#EC9494',
          200: '#E46969',
          300: '#DD3D3D',
          400: '#C42323',
          500: '#991B1B',
          600: '#6E1313',
          700: '#420C0C',
          800: '#170404',
          900: '#000000',
        },
      },
    },
  },
};

HTML

<div class="bg-primary h-1.5 mx-auto rounded-lg  w-30 "></div>

Output CSS

.rounded-lg {
    border-radius: 0.5rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

// I don't know why, but it will be created 2 times if you use `mx-auto` 2 times in difference place
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
}

h-1.5 and w-30 the two are is missing from CSS Output.

Environment

• Rollup v2.33.1
• Svelte v3.29.4
• Windi CSS Preprocess v3.0.0-beta.1

I use Routify Framework for the routing library. See https://github.com/lamualfa/routify-windi.

[alexanderniebuhr]

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. Which bundler do you use?

[lamualfa]

This is the output:

[
  'target="_blank"',
  'target="',
  'target',
  '_blank',
  '"',
  index: 0,
  input: 'target="_blank"',
  groups: undefined
]
[ 'target:_blank' ]

[lamualfa]

I have edited the comment.

[alexanderniebuhr]

Do you bundle into one css file afterwards? That might be the issue with double classes..
the issue with missing classes should be fixed in next beta release later this week

[lamualfa]

Do you bundle into one css file afterwards?

Maybe yes. But I don't know exactly. I just follow this configuration rollup.config.js.

---

the issue with missing classes should be fixed in next beta release later this week

Ok, thanks.

[alexanderniebuhr]

@lamualfa for the class issue try https://github.com/windicss/svelte-windicss-preprocess/releases/tag/v3.0.0-beta.3
If it still does not show some classes, please provide more detail about svelte code

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?

[lamualfa]

Ok, i will try. Thanks.

[lamualfa]

Unfortunately it still doesn't work in v3.0.0-beta.3.

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' : ''}"
/>

• bg-primary h-1.25 mx-auto rounded-lg work in v2.3.1. But w-40, w-30, w-20 is not working in that version.
• bg-primary mx-auto rounded-lg work in v3.0.0-beta.3. But h-1.25, w-40, w-30, w-20 is not working in that version.

[lamualfa]

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?

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.

[alexanderniebuhr]

class="bg-primary h-1.25 mx-auto rounded-lg {width === 'large' ? 'w-40' : ''} {width ===
  'medium'
    ? 'w-30'
    : ''} {width === 'small' ? 'w-20' : ''}"

this is essential information. Now I know the issue and can fix it, please add this kind of code in future issues always!

[lamualfa]

class="bg-primary h-1.25 mx-auto rounded-lg {width === 'large' ? 'w-40' : ''} {width ===
  'medium'
    ? 'w-30'
    : ''} {width === 'small' ? 'w-20' : ''}"

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.

[alexanderniebuhr]

i think latest beta should work now

[lamualfa]

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"
/>

Ref: https://svelte.dev/tutorial/classes

[alexanderniebuhr]

do not know, not yet maybe. but will work with v3

[lamualfa]

@alexanderniebuhr Thank you very much for your hard work 🙏🙏🙏.

[lamualfa]

@alexanderniebuhr I'am sorry, but i have trying to use the project from example directory and still not working.

App.svelte

<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

• I have tried it using svelte-windicss-preprocess: v3.0.0-beta.3 and still not working
• No configuration has been changed. All are purely clones of the project in the example folder
• I have created a new repository contain the code that i use to testing this. You can clone the repository if you want: https://github.com/lamualfa/svelte-windicss-preprocess-testing-v3

[alexanderniebuhr]

@lamualfa i think compile: true is not working and buggy. Can you try with false and check? also, I will track it in new issue here #58

[lamualfa]

@alexanderniebuhr Still not working.

[alexanderniebuhr]

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