Node types

October 31, 2016 · View on GitHub

Here is a list of all node types that you can meet in a parse tree. Some of them, for example variable and mixins, are used only with specific syntaxes. Example nodes show only node's type and content, though additional properties and methods may be available. Please see README for API reference.

arguments
atkeyword
atrule
attributeFlags
attributeMatch
attributeName
attributeSelector
attributeValue
block
brackets
class
color
combinator
condition
conditionalStatement
declaration
declarationDelimiter
default
delimiter
dimension
escapedString
extend
expression
function
global
id
ident
important
include
interpolatedVariable
interpolation
keyframesSelector
loop
mixin
multilineComment
namePrefix
namespacePrefix
namespaceSeparator
number
operator
parentheses
parentSelector
parentSelectorExtension
percentage
placeholder
progid
property
propertyDelimiter
pseudoClass
pseudoElement
raw
ruleset
space
selector
singlelineComment
string
stylesheet
typeSelector
unicodeRange
universalSelector
urange
uri
value
variable
variablesList

arguments

Description

A list of function/mixin arguments, including parentheses.

Used in syntaxes: css, less, sass, scss.

Examples

// String
()

// Parse tree
{
  type: 'arguments',
  content: []
}

// String
(a)

// Parse tree
{
  type: 'arguments',
  content: [{
    type: 'ident',
    content: 'a'
  }]
}

atkeyword

Description

Word that starts with a @, usually used in @-rules.

Used in syntaxes: css, less, sass, scss.

Examples

// String
@import

// Parse tree
{
  type: 'atkeyword',
  content: [{
    type: 'ident',
    content: 'import'
  }]
}

References

CSS 2.1

atrule

Description

At-rules start with an at-keyword, an '@' character followed immediately by an identifier (for example, '@import', '@page'). An at-rule consists of everything up to and including the next semicolon (;) or the next block, whichever comes first.

Used in syntaxes: css, less, sass, scss.

Examples

// String
@import "subs.css";

// Parse tree
{
  type: 'atrule',
  content: [{
    type: 'atkeyword',
    content: [{
      type: 'ident',
      content: 'import'
    }]
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'string',
    content: '"subs.css"'
  }]
}

// String
i

// Parse tree
{
  type: 'attributeFlags',
  content: [{
    type: 'ident',
    content: 'i'
  }]
}

// String
=

// Parse tree
{
  type: 'attributeMatch',
  content: '='
}

// String
panda

// Parse tree
{
  type: 'attributeName',
  content: [{
    type: 'ident',
    content: 'panda'
  }]
}

// String
a=b

// Parse tree
{
  type: 'attributeSelector',
  content: [{
    type: 'attributeName',
    content: [{
      type: 'ident',
      content: 'a'
    }]
  }, {
    type: 'attributeMatch',
    content: '=',
  }, {
    type: 'attributeValue',
    content: [{
      type: 'ident',
      content: 'b',
    }]
  }]
}

// String
b

// Parse tree
{
  type: 'attributeValue',
  content: [{
    type: 'ident',
    content: 'b',
  }]
}

// String
{}

// Parse tree
{
  type: 'block',
  content: []
}

// String
{ }

// Parse tree
{
  type: 'block'
  content: [{
    type: 'space',
    content: '  '
  }]
}

// String
[]

// Parse tree
{
  type: 'brackets',
  content: []
}

// String
[1]

// Parse tree
{
  type: 'brackets',
  content: [{
    type: 'number',
    content: '1',
  }]
}

// String
.panda

// Parse tree
{
  type: 'class',
  content: [{
    type: 'ident',
    content: 'panda'
  }]
}

// String
#fff

// Parse tree
{
  type: 'color',
  content: 'fff'
}

// String
~

// Parse tree
{
  type: 'combinator',
  content: '~'
}

// String
@if 1 > 2

// Parse tree
{
  type: 'condition',
  content: [{
    type: 'atkeyword',
    content: [{
      type: 'ident',
      content: 'if'
    }],
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'number',
    content: '1'
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'operator',
    content: '>'
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'number',
    content: '2'
  }],
}

// String
@if 1 > 2 { color: tomato; }

// Parse tree
{
  type: 'conditionalStatement',
  content: [{
    type: 'condition',
    content: [{
      type: 'atkeyword',
      content: [{
        type: 'ident',
        content: 'if'
      }]
    }, {
      type: 'space',
      content: ' '
    }, {
      type: 'number',
      content: '1'
    }, {
      type: 'space',
      content: ' '
    }, {
      type: 'operator',
      content: '>'
    }, {
      type: 'space',
      content: ' '
    }, {
      type: 'number',
      content: '2'
    }]
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'block',
    content: [{
      type: 'space',
      content: ' '
    }, {
      type: 'declaration',
      content: [{
        type: 'property',
        content: [{
          type: 'ident',
          content: 'color'
        }]
      }, {
        type: 'propertyDelimiter',
        content: ':'
      }, {
        type: 'space',
        content: ' '
      }, {
        type: 'value',
        content: [{
          type: 'ident',
          content: 'tomato'
        }]
      }]
    }, {
      type: 'declarationDelimiter',
      content: ';'
    }, {
      type: 'space',
      content: ' '
    }]
  }]
}

// String
a:b

// Parse tree
{
  type: 'declaration',
  content: [{
    type: 'property',
    content: [{
      type: 'ident',
      content: 'a'
    }]
  }, {
    type: 'propertyDelimiter',
    content: ':'
  }, {
    type: 'value',
    content: [{
      type: 'ident',
      content: 'b'
    }]
  }]
}

// String
;

// Parse tree
{
  type: 'declarationDelimiter',
  content: ';'
}

// String
!default

// Parse tree
{
  type: 'default',
  content: '!default'
}

// String
,

// Parse tree
{
  type: 'delimiter',
  content: ','
}

// String
10px

// Parse tree
{
  type: 'dimension',
  content: [{
    type: 'number',
    content: '10'
  }, {
    type: 'ident',
    content: 'px'
  }]
}

// String
~"nani"

// Parse tree
{
  type: 'escapedString',
  content: '"nani"'
}

// String
expression()

// Parse tree
{
  type: 'expression',
  content: ''
}

// String
@extend .nani

// Parse tree
{
  type: 'extend',
  content: [{
    type: 'atkeyword',
    content: [{
      type: 'ident',
      content: 'extend'
    }]
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'class',
    content: [{
      type: 'ident',
      content: 'nani'
    }]
  }]
}

// String
f(5)

// Parse tree
{
  type: 'function',
  content: [{
    type: 'ident',
    content: 'f'
  }, {
    type: 'arguments',
    content: [{
      type: 'number',
      content: '5'
    }]
  }]
}

// String
!global

// Parse tree
{
  type: 'global',
  content: '!global'
}

// String
#id

// Parse tree
{
  type: 'id',
  content: [{
    type: 'ident',
    content: 'id'
  }]
}

// String
panda

// Parse tree
{
  type: 'ident',
  content: 'panda'
}

// String
!important

// Parse tree
{
  type: 'important',
  content: '!important'
}

// String
@include nani

// Parse tree
{
  type: 'include',
  content: [{
    type: 'atkeyword',
    content: [{
      type: 'ident',
      content: 'include'
    }]
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'ident',
    content: 'nani'
  }]
}

// String
@{nani}

// Parse tree
{
  type: 'interpolatedVariable',
  content: [{
    type: 'ident',
    content: 'nani'
  }]
}

// String
#{$nani}

// Parse tree
{
  type: 'interpolation',
  content: [{
    type: 'variable',
    content: [{
      type: 'ident',
      content: 'nani'
    }]
  }]
}

// String
from

// Parse tree
{
  type: 'keyframesSelector',
  content: [{
    type: 'ident',
    content: 'from'
  }]
}

// String
@while 1 > 2 {a{p:v}}

// Parse tree
{
  type: 'loop',
  content: [{
    type: 'atkeyword',
    content: [{
      type: 'ident',
      content: 'while'
    }]
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'number',
    content: '1'
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'operator',
    content: '>'
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'number',
    content: '2'
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'block',
    content: [{
      type: 'ruleset',
      content: [{
        type: 'selector',
        content: [{
          type: 'typeSelector',
          content: [{
            type: 'ident',
            content: "a"
          }]
        }]
      }, {
        type: 'block',
        content: [{
          type: 'declaration',
          content: [{
            type: 'property',
            content: [{
              type: 'ident',
              content: 'p'
            }]
          }, {
            type: 'propertyDelimiter',
            content: ':'
          }, {
            type: 'value',
            content: [{
              type: 'ident',
              content: 'v'
            }]
          }]
        }]
      }]
    }]
  }]
}

// String
@mixin nani {color:tomato}

// Parse tree
{
  type: 'mixin',
  content: [{
    type: 'atkeyword',
    content: [{
      type: 'ident',
      content: 'mixin'
    }]
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'ident',
    content: 'nani'
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'block',
    content: [{
      type: 'declaration',
      content: [{
        type: 'property',
        content: [{
          type: 'ident',
          content: 'color'
        }]
      }, {
        type: 'propertyDelimiter',
        content: ':'
      }, {
        type: 'value',
        content: [{
          type: 'ident',
          content: 'tomato'
        }]
      }]
    }]
  }]
}

// String
/*test*/

// Parse tree
{
  type: 'multilineComment',
  content: 'test'
}

// String
panda|

// Parse tree
{
  type: 'namePrefix',
  content: [{
    type: 'namespacePrefix',
    content: [{
      type: 'ident',
      content: 'panda'
    }]
  }, {
    type: 'namespaceSeparator',
    content: '|'
  }]
}

// String
panda

// Parse tree
{
  type: 'namespacePrefix',
  content: [{
    type: 'ident',
    content: 'panda'
  }]
}

// String
|

// Parse tree
{
  type: 'namespaceSeparator',
  content: '|'
}

// String
10

// Parse tree
{
  type: 'number',
  content: '10'
}

// String
/

// Parse tree
{
  type: 'operator',
  content: '/'
}

// String
!optional

// Parse tree
{
  type: 'optional',
  content: '!optional'
}

// String
(1)

// Parse tree
{
  type: 'parentheses',
  content: [{
    type: 'number',
    content: '1'
  }]
}

// String
&

// Parse tree
{
  type: 'parentSelector',
  content: '&'
}

// String
&2-panda

// Parse tree
{
  type: 'selector',
  content: [{
    type: 'parentSelector',
    content: '&'
  }, {
    type: 'parentSelectorExtension',
    content: [{
      type: 'number',
      content: '2'
    }, {
      type: 'ident',
      content: '-panda'
    }]
  }]
}

// String
10%

// Parse tree
{
  type: 'percentage',
  content: [{
    type: 'number',
    content: '10'
  }]
}

// String
%nani

// Parse tree
{
  type: 'placeholder',
  content: [{
    type: 'ident',
    content: 'nani'
  }]
}

// String
color

// Parse tree
{
  type: 'property',
  content: [{
    type: 'ident',
    content: 'color'
  }]
}

// String
:

// Parse tree
{
  type: 'propertyDelimiter',
  content: ':'
}

// String
:nth-child(2n+1)

// Parse tree
{
  type: 'pseudoClass',
  content: [{
    type: 'ident',
    content: 'nth-child'
  }, {
    type: 'arguments',
    content: [{
      type: 'number',
      content: '2'
    }, {
      type: 'ident',
      content: 'n'
    }, {
      type: 'operator',
      content: '+'
    }, {
      type: 'number',
      content: '1'
    }]
  }]
}

// String
::after

// Parse tree
{
  type: 'pseudoElement',
  content: [{
    type: 'ident',
    content: 'after'
  }]
}

// String
a{color:tomato}

// Parse tree
{
  type: 'ruleset',
  content: [{
    type: 'selector',
    content: [{
      type: 'typeSelector',
      content: [{
        type: 'ident',
        content: 'a'
      }]
    }]
  }, {
    type: 'block',
    content: [{
      type: 'declaration',
      content: [{
        type: 'property',
        content: [{
          type: 'ident',
          content: 'color'
        }]
      }, {
        type: 'propertyDelimiter',
        content: ':'
      }, {
        type: 'value',
        content: [{
          type: 'ident',
          content: 'tomato'
        }]
      }]
    }]
  }]
}

// String
  

// Parse tree
{
  type: 'space',
  content: '  '
}

// String
.panda

// Parse tree
{
  type: 'selector',
  content: [{
    type: 'class',
    content: [{
      type: 'ident',
      content: 'panda'
    }]
  }]
}

// String
//panda

// Parse tree
{
  type: 'singlelineComment',
  content: 'panda'
}

// String
"test"

// Parse tree
{
  type: 'string',
  content: '"test"',
}

// String
a {color: tomato} div {color: potato}

// Parse tree
{
  type: 'stylesheet',
  content: [{
    type: 'ruleset',
    content: [{
      type: 'selector',
      content: [{
        type: 'typeSelector',
        content: [{
          type: 'ident',
          content: 'a'
        }]
      }]
    }, {
      type: 'space',
      content: ' '
    }, {
      type: 'block',
      content: [{
        type: 'declaration',
        content: [{
          type: 'property',
          content: [{
            type: 'ident',
            content: 'color'
          }]
        }, {
          type: 'propertyDelimiter',
          content: ':'
        }, {
          type: 'space',
          content: ' '
        }, {
          type: 'value',
          content: [{
            type: 'ident',
            content: 'tomato'
          }]
        }]
      }]
    }]
  }, {
    type: 'space',
    content: ' '
  }, {
    type: 'ruleset',
    content: [{
      type: 'selector',
      content: [{
        type: 'typeSelector',
        content: [{
          type: 'ident',
          content: 'div'
        }]
      }]
    }, {
      type: 'space',
      content: ' '
    }, {
      type: 'block',
      content: [{
        type: 'declaration',
        content: [{
          type: 'property',
          content: [{
            type: 'ident',
            content: 'color'
          }]
        }, {
          type: 'propertyDelimiter',
          content: ':'
        }, {
          type: 'space',
          content: ' '
        }, {
          type: 'value',
          content: [{
            type: 'ident',
            content: 'potato'
          }]
        }]
      }]
    }]
  }]
}

// String
div

// Parse tree
{
  type: 'typeSelector',
  content: [{
    type: 'ident',
    content: 'div'
  }]
}

// String
U+A5, U+4E00-9FFF

// Parse tree
{
  type: 'unicodeRange',
  content: [{
    type: 'urange',
    content: 'U+A5',
  },
  {
    type: 'delimiter',
    content: ','
  },
  {
    type: 'space',
    content: ' '
  },
  {
    type: 'urange',
    content: 'U+4E00-9FFF',
  }]
}

// String
*

// Parse tree
{
  type: 'universalSelector',
  content: []
}

// String
ns|*

// Parse tree
{
  type: 'universalSelector',
  content: [{
    type: 'namePrefix',
    content: [{
      type: 'namespacePrefix',
      content: [{
        type: 'ident',
        content: 'ns'
      }]
    }, {
      type: 'namespaceSeparator',
      content: '|'
    }]
  }]
}

// String
U+A5

// Parse tree
{
  type: 'urange',
  content: 'U+A5',
}

// String
url("http://test.com")

// Parse tree
{
  type: 'uri',
  content: [{
    type: 'string',
    content: '"http://test.com"'
  }]
}

// String
tomato

// Parse tree
{
  type: 'value',
  content: [{
    type: 'ident',
    content: 'tomato'
  }]
}

// String
$panda

// Parse tree
{
  type: 'variable',
  content: [{
    type: 'ident',
    content: 'panda'
  }]
}

// String
$colors...

// Parse tree
{
  type: 'variablesList',
  content: [{
    type: 'variable',
    content: [{
      type: 'ident',
      content: 'colors'
    }]
  }]
}