Variant for disabled-within

[Abyrd9]

I typically add the styles for my input elements on whatever container it is within, that way I can include inline icons and things like that. But that also means that the styles for the input's state needs to sit on the container as well. This works great for focus-within: but obviously there's other "states within" that I also need access to.

One of them is :disabled, so I put together this plugin for :disabled-within that uses the :has() and :is() selectors.
It works pretty well, Not sure why I haven't seen this solution anywhere. Maybe I'm missing something or I didn't look hard enough 🤷🏻‍♂️

plugin(function ({ addVariant, e }) {
  addVariant("disabled-within", ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      const element = e(`disabled-within${separator}${className}`);
      return `.${element}:has(input,button:is(:disabled))`;
    });
  });
})

const Input = () => (
  <label className="disabled-within:bg-gray-400/10">
    <i className="icon"></i>
    <input disabled />
  </label>
)

[jhillacre]

This applied to all my inputs, not just disabled ones. I think you want this CSS selector instead:

:has(input:is(:disabled),button:is(:disabled))

[Abyrd9]

Oh yeah I ended up realizing this after I put this up but forgot to fix 😂

[RobinMalfait]

Hey @Abyrd9

While this works, I would recommend to use the simpler declarative addVariant API (unless you are still on v2). That would look like:

plugin(function ({ addVariant }) {
  addVariant('disabled-within', `&:has(input,button:is(:disabled))`)
})

Applying the fix from @jhillacre that would look like:

plugin(function ({ addVariant }) {
  addVariant('disabled-within', `&:has(input:is(:disabled),button:is(:disabled))`)
})

[Abyrd9]

Thanks! Much cleaner!