svelte-windicss-preprocess: v3.0.0-beta.1 - Not working with some classes

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.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 19 (8 by maintainers)

Most upvoted comments

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

alexanderniebuhr on Mar 9, 2021

@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 https://github.com/windicss/svelte-windicss-preprocess/issues/58

alexanderniebuhr on Mar 9, 2021

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

alexanderniebuhr on Mar 8, 2021

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!

alexanderniebuhr on Mar 8, 2021