::before and :hover::before in the same style object

[zaydek]

I am trying to build something like this in StyleX

stylex-pseudo.mp4

CodePen here: https://codepen.io/zaydek/pen/qEWapJM?editors=1000

I'm trying to do something like this:

groupIsNested: {
  "::before": {
    borderColor: "color-mix(in hsl, transparent, white 25%)",
    borderLeftStyle: "solid",
    borderLeftWidth: 1,
    content: "",
    insetBlock: 0,
    insetInlineStart: `calc(${SIDEBAR_ITEM_BLOCK_SIZE}px / 2)`,
    position: "absolute",
  },
  ":hover::before": {
    borderColor: "purple",
    borderLeftStyle: "solid",
    borderLeftWidth: 1,
    content: "",
    insetBlock: 0,
    insetInlineStart: `calc(${SIDEBAR_ITEM_BLOCK_SIZE}px / 2)`,
    position: "absolute",
  },
},

(Don't mind the repeating code just trying to figure this out)

It seems like ::before and :hover::before work independently, but when both are present, only ::before works.

I've also tried this:

  "::before": {
    default: null,
    border: {
      default: "1px solid color-mix(in hsl, transparent, white 25%)",
      ":hover": "1px solid red",
    },
  }

And

  border: {
    default: null,
    "::before": {
      default: "1px solid color-mix(in hsl, transparent, white 25%)",
      ":hover": "1px solid red",
    },
  }

But those don't seem to work.

I know I can implement this using JS but am curious: Is it possible to support ::before and :hover::before styles for a given style object?

[nmn]

You're trying to do this.

groupIsNested: {
  "::before": {
    borderColor: "color-mix(in hsl, transparent, white 25%)",
    borderLeftStyle: "solid",
    borderLeftWidth: 1,
    content: "",
    insetBlock: 0,
    insetInlineStart: `calc(${SIDEBAR_ITEM_BLOCK_SIZE}px / 2)`,
    position: "absolute",
  },
  ":hover": {
    '::before': {
      borderColor: "purple",
    }
  },
},

This pattern is very discouraged because you're essentially doing a descendent selector.

We recommend using variables for this:

groupIsNested: {
  [vars.borderColor]: {
    default: "color-mix(in hsl, transparent, white 25%)",
    ":hover": "purple",
  },
  "::before": {
    borderColor: vars.borderColor,
    borderLeftStyle: "solid",
    borderLeftWidth: 1,
    content: "",
    insetBlock: 0,
    insetInlineStart: `calc(${SIDEBAR_ITEM_BLOCK_SIZE}px / 2)`,
    position: "absolute",
  },
},

[zaydek]

Oh, hadn't thought to use a variable for this. Yeah that's cleaner. Thanks! If I'm not mistaken i still think the first example doesn't work, I thought I tried everything including that. If it doesn't work I'll report back. Thanks -- I'll mark this as an answer.

[zaydek]

Ah it does work. Thanks again!

[nmn]

There was a bug where that used to not work, but it was fixed in the last couple of releases.