A font face is a unique declaration used by
@font-face at-rules and
local fonts. Unlike normal CSS where you define a
src property, in Aesthetic you define
srcPaths, which is an array of paths to the source files. This allows consumers to operate on
Furthermore, local source aliases (
local()) can be defined by passing an array of names to a
srcPathsproperties are unique to Aesthetic and aren't an official CSS property.
The foundation of all styles are properties, where each key-value pair maps to a CSS declaration, and abides the following:
- Property names are camel cased versions of their CSS equivalent property.
- Vendor prefixed properties are not supported. Use the
vendorPrefixersetting to enable this automatically.
- Unit values that default to the
px) setting can be written as literal numbers.
- Values that require quotes in the CSS output must manually handle the quotes within the string.
Inline keyframes can be defined by passing an object or an array of objects to
where each object abides the keyframes specification.
Inline font faces can be defined by passing an object or an array of objects to
each object abides the font face specification. This approach requires an explicit
fontFamily for each font face.
CSS has a concept known as
shorthand properties, where
multiple properties and their values can be declared with a single property. For example,
border-color can be combined in
However, in CSS-in-JS, shorthand properties cause issues when defined alongside their longhand
properties, so Aesthetic offers an expanded form for a handful of shorthand properties (cue irony)
through the @aesthetic/addon-properties
package. The current shorthand properties that support an expanded form are:
To utilize the expanded form, define an object where each property within maps to an equivalent longhand property. Using the border example above, the object would look like the following:
While parsing, expanded properties will be converted to longhand, to mitigate issues caused by shorthand when dealing with atomic CSS and CSS-in-JS.
For proper type-safety and isolation, only static attribute and pseudo selectors are supported, as
dynamic selectors with an infinite number of combinations or permutations cannot be typed. The list
of supported selectors can be found in the csstype library,
Attribute selectors can be defined by wrapping the attribute name in square brackets.
Pseudo classes and pseudo elements can be defined by prefixing the pseudo name with a