Inviz

@h|50-[#something]-10-(.value:first)-20-(.probably-many)-| gap(10) outer-gap(15)
 
#something, .value:first, .probably-many {
  // default gap
  [gap] == 10
  
  // gap for specific element
  &:matches(.value:first) {
    [gap] == 20
  }

Inviz

Registry = require('./Registry.js')

class Evaluator extends Registry
  constructor: ->
    @values = {}
    super()

  evaluate: (op, i, context, continuation) ->
    method = op[0]
    func = def = @[method]

Inviz

Registry = require('./Registry.js')

class Evaluator extends Registry
  constructor: ->
    @values = {}
    super()

  evaluate: (op, i, context, continuation) ->
    method = op[0]
    func = def = @[method]

Inviz

  var attrModifiedWorks = false;
  var listener = function(){ attrModifiedWorks = true; };
  document.documentElement.addEventListener("DOMAttrModified", listener, false);
  document.documentElement.setAttribute("___TEST___", true);
  document.documentElement.removeAttribute("___TEST___", true);
  document.documentElement.removeEventListener("DOMAttrModified", listener, false);

  HTMLElement.prototype.__removeAttribute = HTMLElement.prototype.removeAttribute;
  HTMLElement.prototype.removeAttribute = function(attrName)

Inviz

      it  'element resized by inserting child', (done) ->
        scope.innerHTML = """
          <div style="display:inline-block;" id="box1" class="box">zOne</div>
          <div style="width:222px;" id="box2" class="box">One</div>
        """
        engine.run commands: [
          ['eq', ['get$','height',['$class','box']],['get$','intrinsic-width',['$id','box1']]]
        ]
        count = 0
        listener = (e) ->

Inviz

rules = [
          {
            type:'constraint', 
            cssText:'(header > h2.gizoogle ! section div:get("parentNode"))[target-size] == 100', 
            commands: [
              ["eq", 
                ["get$",
                  ['$pseudo',
                    ['$tag',
                      ['$combinator', 

Inviz

/*
  div picture {
    float: left;
    clear: left;
  }
*/

div picture {
  &:next {
    @if ::this[width] + ::scope[right] < ::parent[width]

Inviz

 ['$if', 
      ['$class',
        ['$combinator'
          ['$class', 'vessel']
          ' ']
        'box']
      ["eq", 
        ["get$","x",
          ["$reserved","this"]]
        100]

Inviz

New parser wishlist

Features

• Can we have nested syntax built in? Maybe with its own script type. Code examples are nested for brevity

Inviz

[width] = 10

div {
  [width] = 20        # All variables are resolved through scope, so can be redefined locally
  
  width: $width       # bind to variable once (doesnt listen for future changes)
  width: [width]      # equasion (observes width)
  width: (div)[width] # only binds by selector (observes)
}