Parameter Types to Use with Pseudo-Classes

Custom pseudo-classes can either be simple or accept parameters.

A custom pseudo-class with no parameters is considered a simple custom state.

When defining a custom pseudo-class with a parameter:

You must provide a type definition.
Optionally you can provide validation arguments to the type defined
Optionally you can provide each state definition with a default value, enabling it to be used without providing a parameter argument.

.root {
    -st-states: stateX([type]) [default Value?],
                stateY([type]) [default Value?];
}

.root:stateX(arg) {}

.root:stateX {
    /* parameter resolves to "default Value", 
    if no default value was provided,
    this will fail validation */
}

Note
When defining a default value, you can use variables and formatters.

Tag

You can define a custom state with a tags value (seperated by whitespace), and then target it using a pseudo-class selector with a matching tag argument.

.root {
    /* define a custom state called "cart" */
    -st-states: cart( tag )
}

.root:cart(shirt) {
    /* targets an element that has a state with a value that
    is a whitespace-separated list of tags, 
    one of which is exactly the tag argument "shirt" */
}

Setting the state tag values in the view  resolves to .

Enum

You can define a custom state with possible enum value options, and then target one of the options using a pseudo-class selector with a matching string argument.

.root {
    /* define the custom state "size" */
    -st-states: size( enum(small, medium, large) )
}

.root:size(medium) {
    /* target an element with a state value of "medium" */
}

.root:size(huge) {
   /* invalid because "huge" is not a one of the possible 
   values defined for the state "size" */
}

Setting the state’s enum value in the view  resolves to .

String

You can define a custom state with a string value, and then target it using a pseudo-class selector with a matching string argument.

.root {
    /* define the "selected" custom state with a string parameter type */
    -st-states: selected( string );
}

.root:selected(username) {
    /* target an element with a state value that 
    is exactly the string argument "username" */
}

Setting the state string value in the view  resolves to .

String validation [optional]

You can optionally pass a regular expression string as an argument to add validation for the pseudo-class selector string argument. The regular expression must be within quotes.

You can optionally pass a regular expression function (regex()) to the string type to add regular expression validation for the pseudo-class selector. This function accepts a single expression to be tested against the selector parameter. The expression must be within quotes.

.root {
    /* validates that the targeting string argument begins with "user" */
    -st-states: selected( string(regex("^user")) );
}

/* a valid argument */
.root:selected(username) {}

/* invalid because it doesn't match the regular expression "^user" */
.root:selected(index) {}

String type can also accept several other validations, including minLength(number), maxLength(number) and contains(string).

.root {
    /* validates the targeting string arguments with multiple validations */
    -st-states: selected( 
                    string( 
                        minLength(2), 
                        maxLength(10), 
                        contains(user) 
                    ) 
                );
}

/* valid argument */
.root:selected(username) {}

/* invalid due to minLength(2) & contains(user) */
.root:selected(x) {}

Number

You can define a custom state with a number value, and then target it using a pseudo-class selector with a matching number argument.

<span data-column="5" />

.root {
    /* define the custom pseudo-class "column" */
    -st-states: column( number )
}

.root:column(5) {
    /* target an element with a state value that is exactly the number argument "5" */
}

Setting the state number value in the view  resolves to .

Number validation [optional]

You can use several validators that the number type provides.

.root {
    /* validates the targeting number argument */
    -st-states: column( number( min(2), max(6), multipleOf(2) ) )
}

/* valid arguments */
.root:column(2),
.root:column(4),
.root:column(6) {}

/* invalid because not a "multipleOf(2)" */
.root:column(3),
.root:column(5) {}

/* invalid because of "min(2)" and "max(6)" validations */
.root:column(1),
.root:column(7) {}

Future intent

Custom user types and validations
Custom pseudo-class type “nth”
Multiple named parameters
Custom pseudo-class string prefixes
Lang type - use attribute selector [state|="en"] to support language code