:active for boxShadow does not work if property value contains comma

[aspizu]

try this:

    boxShadow: {
      default: `
        0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.3),
        0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.1)`,
      ':hover': `
        0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.2),
        0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.2)`,
      ':active': '0 0.05rem 0.05rem 0.05rem rgba(0, 0, 0, 0.2)',
    },

[nmn]

I've used commas within box-shadows in my code and it's worked. There might be an issue caused by a line break. See if this works:

boxShadow: {
    default: [
        '0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.3)',
        '0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.1)',
      ].join(', '),
    ':hover': [
        '0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.2)',
        '0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.2)',
      ].join(', '),
    ':active': '0 0.05rem 0.05rem 0.05rem rgba(0, 0, 0, 0.2)',
  },

[nmn]

Also, can you tell me what is getting generated for the given classNames?

[aspizu]

I'm using "vite-plugin-stylex-dev": "^0.1.3" and "@stylexjs/stylex": "^0.4.1"

    boxShadow: {
      default: `0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.3), 0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.1)`,
      ':hover': `0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.2), 0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.2)`,
      ':active': '0 0.05rem 0.05rem 0.05rem rgba(0, 0, 0, 0.2)',
    },

html:not([dir='rtl']) .x1jv5vbm:hover:not(#\#):not(#\#):not(#\#):not(#\#) {
  box-shadow: 0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.2),
    0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.2);
}
html[dir='rtl'] .x1jv5vbm:hover:not(#\#):not(#\#):not(#\#):not(#\#) {
  box-shadow: 0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.2),
    0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.2);
}
.x1xjyk5b:active:not(#\#):not(#\#):not(#\#):not(#\#) {
  box-shadow: 0 0.05rem 0.05rem 0.05rem rgba(0, 0, 0, 0.2);
}```

[necolas]

Hmmm is that html/dir stuff still meant to be in the output?

[nmn]

No. That shouldn't be the case except when using the legacy-expand-shorthands option. I'll have to try to repro this myself.

[aspizu]

I have seen two repositories for the vite plugin, which one is official?

[nmn]

Neither is "official". Each of them has tradeoffs. I've also shared some repos with my own implementations in #47 as we investigate the best way to implement a Vite plugin.