Skip to content

Latest commit

 

History

History
310 lines (266 loc) · 6.02 KB

Nodes.md

File metadata and controls

310 lines (266 loc) · 6.02 KB
Raw

AST Nodes

Every AST node is an object with certain properties. They all share the type field which explicitly describes the node's type.
All primitive nodes also share the value property which simply yields the node's value.
Container nodes on the other hand have a property that contains an array of child nodes.

Root Nodes

ValueList

ValueList is the root node of every bredon AST.
It contains a list of Value nodes which are comma-separated CSS values.

For example: opacity, transform 1s ease-in

{
  type: 'ValueList',
  body: [{
    type: 'Value',
    important: false,
    body: [
      /* AST for opacity */
    ]
  }, {
    type: 'Value',
    important: false,
    body: [
      /* AST for transform 1s ease-in */
    ]
  }]
}

Value

Value contains a set of nodes that are whitespace-separated.

For example: 1px solid black

{
  type: 'Value',
  important: false,
  body: [
    /* Nodes for 1px solid black */
  ]
}

Node Types

Identifier

Identifiers are all kind of words such as solid.

// e.g. solid
{
  type: 'Identifier',
  value: 'solid'
}

Operator

Operators are basic arithmetic expression symbols for addition +, subtraction -, multiplication *, and division /.

// e.g. +
{
  type: 'Operator',
  value: '+'
}

HexColor

HexColor represents color values given in hexadecimal notation.

// e.g. #FF66FF
{
  type: 'HexColor',
  value: 'FF66FF'
}

Parenthesis

Parenthesis are used to wrap expressions. They may used to enforce e.g. additions to be executed before multiplications. Parenthesis surrounding Functions will not be parsed into AST nodes.

// e.g. (
{
  type: 'Parenthesis',
  value: '('
}

URL

URL is used for any URI-type string. It is not validated by the parser!

// e.g. https://github.com/
{
  type: 'URL',
  value: 'https://github.com/'
}

StringLiteral

Strings are all values that are wrapped in quotes, either single ' or double ".

Property Value Description
 quote  ', " The used quote type 
// e.g. "I'm a string!!11!1"
{
  type: 'StringLiteral',
  value: 'I\'m a string!!11!1',
  quote: '"'
}

Integer

Integers are simple numbers without a unit or fractional part.

Property Value Description
 negative (boolean)  flag indicating a negative value 
// e.g. 34
{
  type: 'Integer',
  negative: false,
  value: 34
}

Float

Floats are floating-point numbers with a fractional part and an integer part.

Property Value Description
 integer  (number)  The integer part
 fractional (number)  The fractional part
 negative (boolean)  flag indicating a negative value 
// e.g. 587.923
{
  type: 'Float',
  integer: 587,
  fractional: 0.923,
  negative: false
}

Assignment

Assignments are combinations of identifiers and a value, combined using an equal sign. They may only appear within FunctionExpressions.

Property Value Description
name (string) The variable name that is assigned to
 value (Node)  The value that is assigned 
// e.g. color="red"
{
  type: 'Assignment',
  name: 'color',
  value: {
    type: 'Identifier',
    value: 'red'
  }
}

// e.g. opacity=0.9
{
  type: 'Assignment',
  name: 'opacity',
  value: {
    type: 'Float',
    negative: false,
    fractional: 0.9,
    integer: 0
  }
}

Dimension

Dimensions are special integers or floats that are postfixed with an extra unit. They are used e.g. to measure font sizes.

Property Value Description
 value (Integer, Float)  The pure value without a unit
 unit  %, em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pt, pc, px, deg, grad, rad, turn, s, ms, Hz, kHz, dpi, dpcm, dppx The concrete dimension unit 
// e.g. 12px
{
  type: 'Dimension',
  unit: 'px',
  value: {
    type: 'Integer',
    negative: false,
    value: 12
  }
}

// e.g. 33.33%
{
  type: 'Dimension',
  unit: 'px',
  value: {
    type: 'Float',
    fractional: 0.33,
    integer: 33,
    negative: false
  }
}

FunctionExpression

Functions represent CSS functions wrapped in parentheses.

Property Value Description
 callee  (string)  The function name
 params  (Array) An array of function parameter of any AST node type 
// e.g. rgba(10, 20, 30, 0.55)
{
  type: 'FunctionExpression',
  callee: 'rgba',
  params: [{
    type: 'Integer',
    negative: false,
    value: 10
  }, {
    type: 'Integer',
    negative: false, 
    value: 20
  }, {
    type: 'Integer',
    negative: false,
    value: 30
  }, {
    type: 'Float',
    negative: false,
    fractional: 0.55,
    integer: 0
  }]
}

Expression

Expressions are mathematical calculations.
They can only appear inside the CSS calc-function.

Property Value  Description
 body (Array)  An array of any AST nodes 
// e.g. 100% - 30px*3
{
  type: 'Expression',
  body: [{
    type: 'Dimension',
    value: {
      type: 'Integer',
      negative: false,
      value: 100
    },
    unit: '%'
  }, {
    type: 'Operator',
    value: '-'
  }, {
    type: 'Dimension',
    value: {
      type: 'Integer',
      negative: false,
      value: 30
    },
    unit: 'px'
  }, {
    type: 'Operator',
    value: '*'
  }, {
    type: 'Integer',
    negative: false,
    value: 3
  }]
}