Very early pass on a universal parse output model for CSS based on Tab Atkin's CSS parser... This is currently functional (on my local)

example.md

given the following CSS (inside the style tags below) input...

<style>
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: helvetica, arial, sans-serif;
    }
    
    .page{
        position: relative;
        width: 60%;
        height: 600px;
        margin: 50px auto;
    }
    
    .image{
        width: 65%;
        height: 200px;
        font-size: 2em;
        color: gray;
        background: lightgray;
    }
    
    #image1{
        float: right;
        margin-bottom: 50px;
    }
    
    #image2{
        position: relative;
        z-index: 2;
        clear: both;
        margin-top: 50px;
        height: 400px;
    }
    
    .col{
        width: 30%;
        height: 100%;
        float: left;
    }
    
    #col2 {
        margin: 0 5%;
    }
    
    #col2, #col3{
        /* height = .page height - (#image1 height + #image1 margin-bottom) */
        height: 350px;
    }
    
    #content{
        /* collect content into a named flow */
        -adobe-flow-into: myFlow;
        -webkit-flow-into: myFlow;
    }
    
    .region{
        /* render content from the named flow*/
        -adobe-flow-from: myFlow;
        -webkit-flow-from: myFlow;
    }
    
    p{
        font-family: Palatino, Georgia, serif;
        text-align: justify;
        line-height: 1.4em;
    }
    
    h1{
        margin: 0 0 1.5em;
    }
    
</style>

You get the following (serializable/native parseable) JSON which frees you from having to understand too much magic...

====================

{
  "type": "stylesheet",
  "value": [
    {
      "selectors": [
        {
          "selector": "html"
        },
        {
          "selector": "body",
          "specificity": 1
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "width",
          "value": "100"
        },
        {
          "type": "declaration",
          "name": "height",
          "value": "100"
        },
        {
          "type": "declaration",
          "name": "margin",
          "value": "0"
        },
        {
          "type": "declaration",
          "name": "font-family",
          "value": "helvetica , arial , sans-serif"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": ".page",
          "specificity": 16
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "position",
          "value": "relative"
        },
        {
          "type": "declaration",
          "name": "width",
          "value": "60"
        },
        {
          "type": "declaration",
          "name": "height",
          "value": "600px"
        },
        {
          "type": "declaration",
          "name": "margin",
          "value": "50px auto"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": ".image",
          "specificity": 16
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "width",
          "value": "65"
        },
        {
          "type": "declaration",
          "name": "height",
          "value": "200px"
        },
        {
          "type": "declaration",
          "name": "font-size",
          "value": "2em"
        },
        {
          "type": "declaration",
          "name": "color",
          "value": "gray"
        },
        {
          "type": "declaration",
          "name": "background",
          "value": "lightgray"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": "#image1",
          "specificity": 256
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "float",
          "value": "right"
        },
        {
          "type": "declaration",
          "name": "margin-bottom",
          "value": "50px"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": "#image2",
          "specificity": 256
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "position",
          "value": "relative"
        },
        {
          "type": "declaration",
          "name": "z-index",
          "value": "2"
        },
        {
          "type": "declaration",
          "name": "clear",
          "value": "both"
        },
        {
          "type": "declaration",
          "name": "margin-top",
          "value": "50px"
        },
        {
          "type": "declaration",
          "name": "height",
          "value": "400px"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": ".col",
          "specificity": 16
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "width",
          "value": "30"
        },
        {
          "type": "declaration",
          "name": "height",
          "value": "100"
        },
        {
          "type": "declaration",
          "name": "float",
          "value": "left"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": "#col2",
          "specificity": 256
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "margin",
          "value": "0 5"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": "#col2"
        },
        {
          "selector": "#col3",
          "specificity": 256
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "height",
          "value": "350px"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": "#content",
          "specificity": 256
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "-adobe-flow-into",
          "value": "myFlow"
        },
        {
          "type": "declaration",
          "name": "-webkit-flow-into",
          "value": "myFlow"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": ".region",
          "specificity": 16
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "-adobe-flow-from",
          "value": "myFlow"
        },
        {
          "type": "declaration",
          "name": "-webkit-flow-from",
          "value": "myFlow"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": "p",
          "specificity": 1
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "font-family",
          "value": "Palatino , Georgia , serif"
        },
        {
          "type": "declaration",
          "name": "text-align",
          "value": "justify"
        },
        {
          "type": "declaration",
          "name": "line-height",
          "value": "1.4em"
        }
      ]
    },
    {
      "selectors": [
        {
          "selector": "h1",
          "specificity": 1
        }
      ],
      "value": [
        {
          "type": "declaration",
          "name": "margin",
          "value": "0 0 1.5em"
        }
      ]
    }
  ]
}