Forms Plugin

[JohnCampionJr]

Is the forms plugin working with vite-plugin-windicss?

I'm adding it to the tailwind.config

  plugins: [
    require('windicss/plugin/forms'),
    // ...
  ],

But the styles aren't coming through....

[JohnCampionJr]

I've figured out that the styles are being imported, but they seem to be overridden somewhere along the way. I don't know if this is a bug in windicss or Vite-plugin-windicss

This is coming from the plugin

input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: textfield;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}

But its being overridden by this

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

Is the forms plugin being imported too early perhaps?

[JohnCampionJr]

Test repo here https://github.com/JohnCampionJr/vitesse/tree/bug/windicss-forms

[antfu]

@JohnCampionJr Which one comes first in your css?

[JohnCampionJr]

@JohnCampionJr Which one comes first in your css?

I'll have to check the generated CSS, but in my code, none. I only added the forms plug-in to an empty vitesse project.

[JohnCampionJr]

@JohnCampionJr Which one comes first in your css?

@antfu I'm back to thinking its not imported. I can see the prose classes showing up and disappearing when I enable/disable the typography plugin. There is no change at all to the generated code whether or not I have the forms plugin enabled.

I just realized the input CSS I pasted above is saying its from the browser, not the app's CSS. So the forms plugin is definitely not being imported.

[skyrpex]

I don't see any of the forms' CSS in my pages, neither.

[anncwb]

The generated css priority seems to be lower than the style tag style in SFC

[JohnCampionJr]

I don't have any styles in the SFC. I don't see the classes at all in the generated CSS

[antfu]

EDIT: Since v0.4.x it's fixed, the workaround is no longer needed.

---

As a workaround for now, you can set

// vite.config.js

WindiCSS({
  preflight: {
    enableAll: true,
  },
})

in v0.3.2

[JohnCampionJr]

OK, just in case it matters, this rule is still overriding the forms CSS on selects

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    line-height: inherit;
    color: inherit;
}

[jos-]

Still seems to be broken for <select>s in v1.0.4. The padding is set to 0, since the

button, input, select { ... }

style overrides the

[type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select { ... }

style.

[CharlesOkwuagwu]

Still seems to be broken for <select>s in v1.0.4. The padding is set to 0, since the

button, input, select { ... }

style overrides the

[type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select { ... }

style.

same here

[CharlesOkwuagwu]

OK, just in case it matters, this rule is still overriding the forms CSS on selects

@JohnCampionJr Please do you have a workaround for this.

Thanks

[chaosprint]

I have the same issue.