A local style sheet defines styles for multiple elements within a single component by mapping selectors (elements and element states) to style declarations, which is known as a ruleset. Within each declaration, standard CSS properties can be defined, as well as element level at-rules.
LocalStyleSheet interface can be used for type information.
As mentioned above, local style sheets map selectors to style declarations. You can imagine a selector as either an element or an element state, like the following.
In the example above, we have 4 elements denoted by camel case names, and 3 states/modifiers denoted by underscores. We use a BEM-like format to easily differentiate purpose, but feel free to write selectors however you please!
Besides standard CSS properties, the following at-rules can be defined within each selector ruleset, and are not allowed in the sheet root.
Defines CSS property fallbacks for legacy browsers that do not support newer properties. The at-rule requires an object, with the key being a property name, and the value being a property value, or an array of values.
onFallback event per property with an array of values.
Defines media queries by mapping breakpoints and queries to style declarations. Declarations can nest selectors and additional at-rules.
onMedia event per media query declaration.
- Combinators denoted
by a leading
>(also known as direct descendents).
- Attribute selectors that match against a value using patterns.
- Pseudo class functions like
:nth-child()(as they incur infinite combinations).
- Multiple selectors separated by a comma.
onAttribute event per selector declaration.
Defines supports by mapping feature queries to style declarations. Declarations can nest selectors and additional at-rules.
onSupports event per feature query declaration.
Defines element level CSS variables, by mapping variable names to their value. Names can be in camel
case or variable kebab case (prefixed with
--). Useful for overriding root and theme CSS variables
on a per element basis.
Variable values are not transformed in any way, so they must be explicit. For example, unitless values are not supported for values that require a unit suffix.
onVariable event for each CSS variable.
Defines multiple variations for the rule in question. Each variation is a style object that maps to
a specific variation type and value combination, separated by a colon (
The variant block does not merge into the parent block, as the consumer should handle what to do with variants. If no custom handling is provided, variants are a no-op.
onVariant event for each CSS variant object.
To parse a style sheet, import and run
parse() with type
local. To streamline consumption, the
parser utilizes an event emitter, where each at-rule must be listened to and handled. Once listeners
are registered, execute the
parse() method with the style sheet.
Because of this architecture, you must "build" or "handle" the final result yourself. However, any
event that starts with
block: is automatically handled by modifying the object used in the parent
ruleset events. Typically these do not need to be defined.
The full list of events and their types can be found in the source