How can I choose the priority when styling different states?

[dd-jonas]

Hi

I'm trying to style my input field to have a different border color when it is focused vs when it is invalid.

const isFocused = ':has([data-focus])';
const isInvalid = ':has([data-invalid])';

export const styles = stylex.create({
  input: {
    borderColor: {
      default: 'gray',
      [isFocused]: 'black',
      [isInvalid]: 'red',
    },
  },
});

The problem is that, when I focus an invalid input field, the border uses the focus styles. I want to keep the border red because the invalid state should take priority over the focused state. (I'm using the :has workaround because I'm applying the styles to a wrapper element in combination with HeadlessUI components. Even with native pseudo-classes this does not seem to work.)

I also tried applying the focus and invalid styles in a separate declaration to take advantage of "the last style applied always wins":

export const styles = stylex.create({
  input: {
    borderColor: 'gray',
  },
  focus: {
    borderColor: {
      default: null,
      [isFocused]: 'black',
    },
  },
  invalid: {
    borderColor: {
      default: null,
      [isInvalid]: 'red',
    },
  },
});

// Input.tsx:
<div {...stylex.props(styles.input, styles.focus, styles.invalid)}>

But in this case, the focus styling never gets applied (because the invalid style sets default: null I guess?). I also can't conditionally apply the styles because they rely on HTML data attributes.

What is the correct way to achieve what I'm trying to do?
Thanks in advance!

[BMCwebdev]

My quick suggestion would be this

const isFocused = ':has([data-focus])';
const isInvalid = ':has([data-invalid])';
const isInvalidAndFocused = ':has([data-focus]):has([data-invalid])';

export const styles = stylex.create({
  input: {
    borderColor: {
      default: 'gray',
      [isFocused]: 'black',
      [isInvalid]: 'red',
      [isInvalidAndFocused]: 'red',
    },
  },
});

[nmn]

Since attribute selectors are not officially supported, this is the best way to make it do what you want it to do.

BTW, this is one of the many reasons attribute selectors are not officially supported.

[dd-jonas]

@nmn I have currently worked around this issue by changing my isFocused selector to :has([data-focus]:not([data-invalid])). I understand that attribute selectors are not recommended, but my question still holds for simple cases like this:

export const styles = stylex.create({
  backgroundColor: {
    default: 'black',
    ':focus': 'red',
    ':hover': 'green',
  },
});

This is a contrived example, but how can I choose whether the hover styles have priority over focus styles (or the other way around)? When I test this code, the focus style wins over hover, but that seems to be something that is handled by StyleX internally and I have no control over it. Because these are pseudo-classes, I can't split them up in different declarations and apply them conditionally on the element.

[nmn]

Pseudo classes have an internal defined order. Same with media queries. You're expected to define styles with mutually-exclusive conditions when it matters by nesting additional levels.

So your contrived example would look like this:

export const styles = stylex.create({
  backgroundColor: {
    default: 'black',
    ':focus': {
      default: 'red',
      ':hover': 'green',
    },
  },
});

[dd-jonas]

I see, thanks!

[BMCwebdev]

I am also not crazy about having to use the data-attributes to style things. But it will work. However, you said you are using HeadlessUI, which does expose render props. I wonder if something like this will work for you (taken from their documentation and modified)

import { Input } from '@headlessui/react'
import clsx from 'clsx'
import { Fragment } from 'react'

function Example() {
  return (
    <Input type="text" name="full_name" as={Fragment}>
      {({ focus, hover }) => <input {...stylex.props(
        styles.input,
        focus && styles.focus,
        invalid && styles.invalid
      )}
    </Input>
  )
}

[dd-jonas]

I tried this render prop pattern, but it doesn't seem to work perfectly because I have to provide the input element myself. Maybe it's missing some props that HeadlessUI would otherwise provide themselves. I guess I could get it to work but it feels too much of a workaround just for applying styles correctly.

[BMCwebdev]

You could try this too, but not sure if it will work with HeadlessUI

function Example() {
  return (
    <Input
      type="text"
      name="full_name"
      as={Fragment}
      className={stylex.props(
        styles.input,
        focus && styles.focus,
        invalid && styles.invalid
      ).className || ''}
    />
  )
}