Is your feature request related to a problem? Please describe.

Update: Looks like there are methods to manipulate pseudoStates already:

• addPseudoClass
• deletePseudoClass

These might be enough to cover the use-case, though a helper API to make it easier to switch would be welcome.

NativeScript supports pseudo selectors to style views based on their state. For example

Button:disabled {
 background-color: #333;
}

However it does not support multiple pseudo states simultaneously. A good example where this would be useful is a Switch/Checkbox view:

<Switch checked="true" isEnabled="false" />

Switch:checked:disabled {
 background-color: #333;
}

The above css should set the background color of the switch when it is both checked and disabled.

Describe the solution you'd like

A new API to handle multiple pseudo states simultaneously.

Right now we have the View._goToVisualState(state: string); method.

We could handle visual states in an array, or for performance reasons a flag system would work too.

// clear previous state and set it to :checked:disabled (or :disabled:checked)
this.setPseudoState(PseudoState.CHECKED | PseudoState.DISABLED);

// keep previous state and add :disabled
this.addPseudoState(PseudoState.DISABLED);

// keep previous state and remove :disabled
this.removePseudoState(PseudoState.DISABLED);

// keep previous state, but replace :disabled with :enabled
this.replacePseudoState(PseudoState.DISABLED, PseudoState.ENABLED);

The api is open for debate.

A key missing piece is support for custom PseudoState values - the API would need to consider those to be complete.

Describe alternatives you've considered

We can handle the different states with simple classes, however a pseudo based solution would be ideal.

Anything else?

This would be a killer feature for using TailwindCSS where different states can be targeted inline:

<Switch 
  class="bg-gray-200 disabled:bg-gray-50 checked:bg-blue-300 text-blue-300 disabled:text-gray-300 checked:text-green-300" 
  checked="isChecked" 
  isEnabled="isEnabled"
/>

Please accept these terms

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• I agree to follow this project's Code of Conduct