Parsing identity files

The visua function is used to parse identity configurations. It returns a StyleMap, an object model representing the CSS variables.

import {visua} from 'visua';

const styleMap = visua({
    path: 'identity/main.css',

visua reference


When identity configuration files are parsed, visua converts them to a StyleMap. Each entry of the map corresponds to a variable. Values can be retrieved with the methods get(), getAll() and getSimilar() and set with the set() method.

StyleMap reference

Style values

The StyleMap contains instances of CSSStyleValue. These objects are very similar to the ones used in CSS Typed OM, a new web API used to represent and manipulate CSS values. Visua in fact contains a partial implementation of this specification.

The following is the list of all the values visua is capable of understanding along with their corresponding CSSStyleValue instances:

Value CSSStyleValue instance
<number> CSSNumericValue
<percentage> CSSUnitValue
<length> CSSUnitValue
<angle> CSSUnitValue
<time> CSSUnitValue
<frequency> CSSUnitValue
<resolution> CSSUnitValue
<flex> CSSUnitValue
<color> CSSColorValue
<identifier> CSSKeywordValue
<identifier># CSSKeywordsValue
<string> CSSStringValue
<position> CSSPositionValue
<transform> CSSTransformValue
<url> CSSUrlValue
<border> CSSBorderValue
<font> CSSFontValue
<font-family> CSSFontFamilyValue
<gradient> CSSGradientValue
<box-shadow> CSSBoxShadowValue
<filter> CSSFilterValue

Visua doesn’t have specific values for a lot of css properties which are composed of one or more keywords such as display, cursor or overflow. All those values are interpreted as CSSKeyword(s)Value