Allow custom CSS selectors in artboards

Could we allow for custom CSS selectors here? For example, our tab uses datasets to manage the state. So we would want to target the active state using &[data-state="active"]. Currently we can achieve our end goal by using code subsituation but it means our team won’t be able to edit the active state without involving a dev

@chungwu for context, we heavily use radix-ui for the product/marketing site and majority of the state styling is handled through attribute selectors

https://www.radix-ui.com/docs/primitives/components/accordion
https://www.radix-ui.com/docs/primitives/components/collapsible
https://www.radix-ui.com/docs/primitives/components/dialog
https://www.radix-ui.com/docs/primitives/components/dropdown-menu
https://www.radix-ui.com/docs/primitives/components/navigation-menu
https://www.radix-ui.com/docs/primitives/components/select
https://www.radix-ui.com/docs/primitives/components/tabs
https://www.radix-ui.com/docs/primitives/components/toggle-group
https://www.radix-ui.com/docs/primitives/components/tooltip
these are the components that we plan on building code components for which would most likely rely on this functionality

Worked around this limitation by doing this with the following CSS. Very limiting though, not able to full leverage plasmic and all the states show by default in the component view

.radix-tabs [data-show-when-active] {
  display: none;
}

.radix-tabs [data-state='active'] [data-show-when-active='true'] {
  display: block;
}

Ran into another hiccup that could be easily solved with custom attribute selectors. Worked around it by doing the approach below with a state checker and rendering the node when a check matched.

Won’t really add anything to the DOM, just that non-technical folks/designers won’t understand whats going on here :white_frowning_face: