Extends the CombinedStyleset type with the "++" property, which allows combining multiple class rules. Note that the "+" (single plus) property allows deriving from any base style rules (not necessarily classes) and the style properties from the base rules are simply copied to the new rule. Additionally, even if class rules were among the base rules, the names of the base classes are lost.
The "++" (double plus) property is different and it only applies to class rules and only allows deriving from class rules. The style properties from the base classes are not copied to the new rule; instead, the name of the new class becomes a concatenation of the new rule name and the names of all base classes.
class MyStyles extends css.StyleDefinition
{
redFG = this.$class({ color: "red" })
whiteBG = this.$class({ backgroundColor: "white" })
emphasized = this.$class({
"++": [this.redFG, this.whiteBG],
fontWeight: 700
})
}
This will translate to the following CSS (in reality, class names are auto-generated):
.redFG { color: red; }
.whiteBG { backgroundColor: white; }
.emphasized.redFG.whiteBG { fontWeight: 700; }
Note that when the MyStyles is activated and the emphasized property is applied to an element, the class name will be not just "emphasized", but "emphasized redFG whiteBG". That is, the following rendering function
let styles = css.activate(MyStyles);
render()
{
return <div className={styles.emphasized.name}>Important stuff</div>
}
will generate the following HTML:
<div className="emphasized redFG whiteBG">Important stuff</div>
The CombinedStyleset type extends the Styleset type with certain properties that provide
additional meaning to the styleset and allow building dependent style rules:
"+" property specifies one or more parent style rules. This allows specifying
parent rules using a convenient style-property-like notation.:hover) or pseudo element names (e.g. ::after).
These properties define a styleset that will be assigned to the selector obtained by using
the original styleset's owner followed by the given pseudo class or pseudo element.:nth-child) or parameterized
pseudo elements (e.g. ::slotted). These properties contain a tuple, where the first
element is the parameter for the selector and the second element is the styleset.
These properties define a styleset that will be assigned to the selector obtained by using
the original styleset's owner followed by the given pseudo class or pseudo element.&) that contain arrays of two-element tuples each
defining a selector and a style corresponding to this selector. Selectors can use the
ampersand symbol to refer to the parent style selector. If the ampersand symbol is not used,
the selector will be simply appended to the parent selector.Functions that return style rules (e.g. $class) accept the CombinedStyleset as a parameter,
for example:
class MyStyles extends css.StyleDefinition
{
class1 = this.$class({})
class2 = this.$class({
backgroundColor: "white",
":hover" : { backgroundColor: "grey" },
"&": [
[ "li > &", { backgroundColor: "yellow" } ],
[ this.class1, { backgroundColor: "orange" } ]
]
})
}
This will translate to the following CSS (in reality, class names are auto-generated):
.class2 { backgroundColor: white; }
.class2:hover { backgroundColor: grey; }
li > .class2 { backgroundColor: yellow; }
.class2.class1 { backgroundColor: orange; }
The CustomVar_StyleType type represents a custom CSS property name and value that are used to
define custom properties in a Styleset. This object is used in conjunction with the
"--"" property of the Styleset type.
CustomVar_StyleType objects should be mostly used to override custom properties that have
previously been defined at the top-level using the $var function. That way you can have a
"global" value of a custom property and assign a different value to it under a certain CSS
selector.
The values of the type can be specified as either a two-item or a three-item tuple or as style definition class or style definition object.
The two-item tuple is used with a previously defined custom CSS property represented by an IVarRule object:
The three-item array allows explicitly specifying the custom CSS property name:
If a style definition class or style definition object are specified, then all custom properties defined in this style definition with their values are inserted into the styleset. If the style definition is not processed yet, it is processed right away.
Use the CustomVar_StyleType type in the following manner:
class MyStyles extends css.StyleDefinition
{
// define global custom CSS property and re-define its value under "brown" class.
mainColor = this.$var( "color", "black");
brown = this.$class({ "--": [ [this.mainColor, "brown"] ] })
// define custom CSS property with the given name under "blue" class.
blue = this.$class({ "--": [ ["different-color", "color", "blue"] ] })
// take all custom CSS properties from the given theme.
yellow = this.$class({ "--": [ YellowTheme ] })
}
class YellowTheme extends css.StyleDefinition
{
bg = this.$var( "color", "yellow");
fg = this.$var( "color", "brown");
link = this.$var( "color", "orange");
}
This is equivalent to the following CSS:
:root { --MyStyles_mainColor: black; }
.brown { --MyStyles_mainColor: brown; }
.blue { --different-color: blue; }
.yellow
{
--bg: yellow;
--fg: brown;
--link: orange;
}
The ExtendedBaseStyleset type maps all CSS properties defined in the IStyleset interface to the "extended" versions of their types. These extended types are defined by adding basic keywords (e.g. "unset", "initial", etc.) as well as [[StringProxy]] and ICustomVar to the type that is defined in the IStyleset interface.
The VarValueType generic type defines the type of the value that can be assigned to the custom CSS property using the generic type K as its template.
Type that maps a tuple type with syntax keys to a tuple type with corresponding syntax types.
For example, it will map type ["<color>", "<length>"] to type [CssColor, CssLength].
This type is used when defining parameters for the paint CSS function.
Represents types that can be used to inherit from an already defined CSS class. This type is
used in the "++" property of the CombinedClassStyleset type, which allows CSS classes
to include definitions of other CSS classes.
The StringStyleset type maps CSS properties including custom properties to the string values.
Type representing a collection of style properties and their values. In addition to the properties representing the standard CSS styles, this type also includes the "--" property, which is an array of CustomVar_StyleType objects each specifying a value for a single custom property.
Helper type describing keys of the ISyntaxTypeStyleset interface.
The VarTemplateName type defines the keys (strings) that can be used as templates for defining custom CSS properties using the $var function.
The VarValueType generic type defines the type of the value that can be assigned to the custom CSS property using the generic type K as its template.
Defines an object containing style properties for an animation frame. Stylesets for keyframes allow custom properties (via "--") but don't allow dependent rules (because dependent rules are actually separate CSS rules). Animation styleset can extend other style rules; however, any dependent rules will be ignored.