Invalid pseudo or at-rule

[bupidoo]

I'm trying to add multiple Pseudo Selectors with not selectors, nesting dosen't work either. Get error message 'Invalid pseudo or at-rule'

visuallyHidden: {
		borderWidth: { ':not(:focus):not(:active)': 0 },
		clip: { ':not(:focus):not(:active)': 'rect(0 0 0 0)' },
		height: { ':not(:focus):not(:active)': 'auto' },
		margin: { ':not(:focus):not(:active)': 0 },
		overflow: { ':not(:focus):not(:active)': 'hidden' },
		padding: { ':not(:focus):not(:active)': 0 },
		position: { ':not(:focus):not(:active)': 'absolute' },
		whiteSpace: { ':not(:focus):not(:active)': 'nowrap' },
		width: { 'not(:focus):not(:active)': '1px' },
	},

Environment (include versions). Did this work in previous versions? latest stylex

[nmn]

You need to add default: null to all the object values.

That said, it looks like you're trying to merge this style with base styles which is not supported. This will need to be a dynamic style to work at the moment.

const NOT_ACTIVE = ':not(:focus):not(:active)';

visuallyHidden: (d) => ({
  borderWidth: { default: d.borderWidth, [NOT_ACTIVE]: 0 },
  clip: { default: d.clip, [NOT_ACTIVE]: 'rect(0 0 0 0)' },
  height: { default: d.height, [NOT_ACTIVE]: 'auto' },
  margin: { default: d.margin, [NOT_ACTIVE] 0 },
  overflow: { default: d.overflow, [NOT_ACTIVE]: 'hidden' },
  padding: { default: d.padding, [NOT_ACTIVE]: 0 },
  position: { default: d.position, [NOT_ACTIVE]: 'absolute' },
  whiteSpace: { default: d.whiteSpace, [NOT_ACTIVE]: 'nowrap' },
  width: { default: d.width, [NOT_ACTIVE]: '1px' },
}),

[bupidoo]

Thank you so much!