A global style sheet serves 2 purposes. The 1st is that it houses all at-rules that should be
processed at the document level, and not the element level. The 2nd is for defining global-like
styles, in which
body style declarations can be defined, and should typically be scoped within a
class name to avoid collisions.
GlobalStyleSheet interface can be used for type information.
For global style sheets, the following at-rules are the only values that may be defined in the root of the sheet.
Defines a font face that can be
referenced with the
fontFamily property. The at-rule requires an object, with the font family name
as the key, and the font face(s) as the value. Each font face requires a
To support multiple font variations, like bold and italics, pass an array of font faces.
fontFamilyproperty can be omitted within the font face as it'll be inherited from the at-rule key.
onFontFace event for each declaration.
Defines one or many CSS files to import,
relative to the document root. An import can either be a proper CSS formatted string (including
quotes), or an object of
url property is not defined, or is
false, the import path will not be wrapped with
onImport event for each import.
Defines a keyframes animation that
can be referenced with the
animationName property. The at-rule requires an object, with the
animation name as the key, and the keyframes as the value. Supports both range (from/to) and
percentage based sequences.
onKeyframes event for each declaration.
As stated at the start of the chapter, the global style sheet can generate global-like CSS styles by
@root at-rule. This at-rule is a local style sheet that should be
processed and generated to a class name that is set on the
body element. It's built this way to
avoid global collisions between multiple themes or differing global style sheets.
*global styles cannot be defined with a global style sheet. Those category of globals should be handled outside of this system.
Emits a single
Defines and formats custom
CSS variables to be
used at the
Emits a single
To parse a style sheet, import and run
parse() with type
global. 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. In the example below, when an event is emitted, we will insert a formatted rule into our style sheet.
The full list of events and their types can be found in the source