# Snapshot report for `test.js`

The actual snapshot is saved in `test.js.snap`.

Generated by [AVA](https://ava.li).

## it loads markdown and returns a component

> Snapshot 1

    `"use strict";␊
    ␊
    Object.defineProperty(exports, "__esModule", {␊
            value: true␊
    });␊
    ␊
    var css = ".bt {\\n    border-top-style: solid;\\n    border-top-width: 1px;\\n}\\n\\n.bb {\\n    border-bottom-style: solid;\\n    border-bottom-width: 1px;\\n}\\n\\n.b--black-10 {\\n    border-color: rgba(0, 0, 0, .1);\\n}\\n\\n.db {\\n    display: block;\\n}\\n\\n.flex {\\n    display: flex;\\n}\\n\\n.flex-column {\\n    flex-direction: column;\\n}\\n\\n.avenir {\\n    font-family: 'avenir next', avenir, sans-serif;\\n}\\n\\n.baskerville {\\n    font-family: baskerville, serif;\\n}\\n\\n.fw1 {\\n    font-weight: 100;\\n}\\n\\n.lh-title {\\n    line-height: 1.25;\\n}\\n\\n.lh-copy {\\n    line-height: 1.5;\\n}\\n\\n.mw7 {\\n    max-width: 48rem;\\n}\\n\\n.w-100 {\\n    width: 100%;\\n}\\n\\n.black {\\n    color: #000;\\n}\\n\\n.pv4 {\\n    padding-top: 2rem;\\n    padding-bottom: 2rem;\\n}\\n\\n.ph3 {\\n    padding-left: 1rem;\\n    padding-right: 1rem;\\n}\\n\\n.mb4 {\\n    margin-bottom: 2rem;\\n}\\n\\n.mt0 {\\n    margin-top: 0;\\n}\\n\\n.mv0 {\\n    margin-top: 0;\\n    margin-bottom: 0;\\n}\\n\\n.no-underline {\\n    text-decoration: none;\\n}\\n\\n.f3 {\\n    font-size: 1.5rem;\\n}\\n\\n.f6 {\\n    font-size: .875rem;\\n}\\n\\n.center {\\n    margin-right: auto;\\n    margin-left: auto;\\n}\\n\\n.dim {\\n    opacity: 1;\\n    transition: opacity .15s ease-in;\\n}\\n\\n.dim:hover, .dim:focus {\\n    opacity: .5;\\n    transition: opacity .15s ease-in;\\n}\\n\\n.dim:active {\\n    opacity: .8;\\n    transition: opacity .15s ease-out;\\n}\\n\\n@media screen and (min-width: 30em) {\\n    .flex-row-ns {\\n        flex-direction: row;\\n    }\\n\\n    .w-40-ns {\\n        width: 40%;\\n    }\\n\\n    .w-60-ns {\\n        width: 60%;\\n    }\\n\\n    .pl3-ns {\\n        padding-left: 1rem;\\n    }\\n\\n    .pr3-ns {\\n        padding-right: 1rem;\\n    }\\n\\n    .mb0-ns {\\n        margin-bottom: 0;\\n    }\\n}\\n\\n@media screen and (min-width: 60em) {\\n    .ph0-l {\\n        padding-left: 0;\\n        padding-right: 0;\\n    }\\n\\n    .f5-l {\\n        font-size: 1rem;\\n    }\\n}\\n";␊
    var html = "<section class=\\"mw7 center avenir\\">\\n  <h2 class=\\"baskerville fw1 ph3 ph0-l\\">News</h2>\\n  <article class=\\"bt bb b--black-10\\">\\n    <a class=\\"db pv4 ph3 ph0-l no-underline black dim\\" href=\\"#0\\">\\n      <div class=\\"flex flex-column flex-row-ns\\">\\n        <div class=\\"pr3-ns mb4 mb0-ns w-100 w-40-ns\\">\\n          <img src=\\"http://mrmrs.github.io/photos/cpu.jpg\\" class=\\"db\\" alt=\\"Photo of a dimly lit room with a computer interface terminal.\\">\\n        </div>\\n        <div class=\\"w-100 w-60-ns pl3-ns\\">\\n          <h1 class=\\"f3 fw1 baskerville mt0 lh-title\\">Tech Giant Invests Huge Money to Build a Computer Out of Science Fiction</h1>\\n          <p class=\\"f6 f5-l lh-copy\\">\\n            The tech giant says it is ready to begin planning a quantum\\n            computer, a powerful cpu machine that relies on subatomic particles instead\\n            of transistors.\\n          </p>\\n          <p class=\\"f6 lh-copy mv0\\">By Robin Darnell</p>\\n        </div>\\n      </div>\\n    </a>\\n  </article>\\n  <article class=\\"bb b--black-10\\">\\n    <a class=\\"db pv4 ph3 ph0-l no-underline black dim\\" href=\\"#0\\">\\n      <div class=\\"flex flex-column flex-row-ns\\">\\n        <div class=\\"pr3-ns mb4 mb0-ns w-100 w-40-ns\\">\\n          <img src=\\"http://mrmrs.github.io/photos/warehouse.jpg\\" class=\\"db\\" alt=\\"Photo of a warehouse with stacked shelves.\\">\\n        </div>\\n        <div class=\\"w-100 w-60-ns pl3-ns\\">\\n          <h1 class=\\"f3 fw1 baskerville mt0 lh-title\\">Warehouse Prices Are Fast on the Rise</h1>\\n          <p class=\\"f6 f5-l lh-copy\\">\\n            A warehouse is a commercial building for storage of goods.\\n            Warehouses are used by manufacturers, importers, exporters,\\n            wholesalers, transport businesses, customs, etc. They are\\n            usually large plain buildings in industrial areas of cities,\\n            towns and villages.\\n          </p>\\n          <p class=\\"f6 lh-copy mv0\\">By Robin Darnell</p>\\n        </div>\\n      </div>\\n    </a>\\n  </article>\\n  <article class=\\"bb b--black-10\\">\\n    <a class=\\"db pv4 ph3 ph0-l no-underline black dim\\" href=\\"#0\\">\\n      <div class=\\"flex flex-column flex-row-ns\\">\\n        <div class=\\"pr3-ns mb4 mb0-ns w-100 w-40-ns\\">\\n          <img src=\\"http://mrmrs.github.io/photos/whale.jpg\\" class=\\"db\\" alt=\\"Photo of a whale's tale coming crashing out of the water.\\">\\n        </div>\\n        <div class=\\"w-100 w-60-ns pl3-ns\\">\\n          <h1 class=\\"f3 fw1 baskerville mt0 lh-title\\">Giant Whale Invests Huge Money to Build a Computer Out of Plankton</h1>\\n          <p class=\\"f6 f5-l lh-copy\\">\\n            Whale is the common name for a widely distributed and diverse\\n            group of fully aquatic placental marine mammals. They are an\\n            informal grouping within the infraorder Cetacea, usually\\n            excluding dolphins and porpoises.\\n          </p>\\n          <p class=\\"f6 lh-copy mv0\\">By Robin Darnell</p>\\n        </div>\\n      </div>\\n    </a>\\n  </article>\\n</section>\\n";␊
    var meta = { "css": ".bt {\\n    border-top-style: solid;\\n    border-top-width: 1px;\\n}\\n\\n.bb {\\n    border-bottom-style: solid;\\n    border-bottom-width: 1px;\\n}\\n\\n.b--black-10 {\\n    border-color: rgba(0, 0, 0, .1);\\n}\\n\\n.db {\\n    display: block;\\n}\\n\\n.flex {\\n    display: flex;\\n}\\n\\n.flex-column {\\n    flex-direction: column;\\n}\\n\\n.avenir {\\n    font-family: 'avenir next', avenir, sans-serif;\\n}\\n\\n.baskerville {\\n    font-family: baskerville, serif;\\n}\\n\\n.fw1 {\\n    font-weight: 100;\\n}\\n\\n.lh-title {\\n    line-height: 1.25;\\n}\\n\\n.lh-copy {\\n    line-height: 1.5;\\n}\\n\\n.mw7 {\\n    max-width: 48rem;\\n}\\n\\n.w-100 {\\n    width: 100%;\\n}\\n\\n.black {\\n    color: #000;\\n}\\n\\n.pv4 {\\n    padding-top: 2rem;\\n    padding-bottom: 2rem;\\n}\\n\\n.ph3 {\\n    padding-left: 1rem;\\n    padding-right: 1rem;\\n}\\n\\n.mb4 {\\n    margin-bottom: 2rem;\\n}\\n\\n.mt0 {\\n    margin-top: 0;\\n}\\n\\n.mv0 {\\n    margin-top: 0;\\n    margin-bottom: 0;\\n}\\n\\n.no-underline {\\n    text-decoration: none;\\n}\\n\\n.f3 {\\n    font-size: 1.5rem;\\n}\\n\\n.f6 {\\n    font-size: .875rem;\\n}\\n\\n.center {\\n    margin-right: auto;\\n    margin-left: auto;\\n}\\n\\n.dim {\\n    opacity: 1;\\n    transition: opacity .15s ease-in;\\n}\\n\\n.dim:hover, .dim:focus {\\n    opacity: .5;\\n    transition: opacity .15s ease-in;\\n}\\n\\n.dim:active {\\n    opacity: .8;\\n    transition: opacity .15s ease-out;\\n}\\n\\n@media screen and (min-width: 30em) {\\n    .flex-row-ns {\\n        flex-direction: row;\\n    }\\n\\n    .w-40-ns {\\n        width: 40%;\\n    }\\n\\n    .w-60-ns {\\n        width: 60%;\\n    }\\n\\n    .pl3-ns {\\n        padding-left: 1rem;\\n    }\\n\\n    .pr3-ns {\\n        padding-right: 1rem;\\n    }\\n\\n    .mb0-ns {\\n        margin-bottom: 0;\\n    }\\n}\\n\\n@media screen and (min-width: 60em) {\\n    .ph0-l {\\n        padding-left: 0;\\n        padding-right: 0;\\n    }\\n\\n    .f5-l {\\n        font-size: 1rem;\\n    }\\n}\\n", "stats": { "size": 1715, "gzipSize": 578, "humanizedSize": "2kB", "humanizedGzipSize": "578B", "rules": { "total": 34, "size": { "graph": [2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 2, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 2, 1], "max": 2, "average": 1.2941176470588236 }, "selectorByRuleSizes": [{ "selector": ".ph0-l", "declarations": 2 }, { "selector": ".dim:active", "declarations": 2 }, { "selector": ".dim:hover, .dim:focus", "declarations": 2 }, { "selector": ".dim", "declarations": 2 }, { "selector": ".center", "declarations": 2 }, { "selector": ".mv0", "declarations": 2 }, { "selector": ".ph3", "declarations": 2 }, { "selector": ".pv4", "declarations": 2 }, { "selector": ".bb", "declarations": 2 }, { "selector": ".bt", "declarations": 2 }, { "selector": ".f5-l", "declarations": 1 }, { "selector": ".mb0-ns", "declarations": 1 }, { "selector": ".pr3-ns", "declarations": 1 }, { "selector": ".pl3-ns", "declarations": 1 }, { "selector": ".w-60-ns", "declarations": 1 }, { "selector": ".w-40-ns", "declarations": 1 }, { "selector": ".flex-row-ns", "declarations": 1 }, { "selector": ".f6", "declarations": 1 }, { "selector": ".f3", "declarations": 1 }, { "selector": ".no-underline", "declarations": 1 }, { "selector": ".mt0", "declarations": 1 }, { "selector": ".mb4", "declarations": 1 }, { "selector": ".black", "declarations": 1 }, { "selector": ".w-100", "declarations": 1 }, { "selector": ".mw7", "declarations": 1 }, { "selector": ".lh-copy", "declarations": 1 }, { "selector": ".lh-title", "declarations": 1 }, { "selector": ".fw1", "declarations": 1 }, { "selector": ".baskerville", "declarations": 1 }, { "selector": ".avenir", "declarations": 1 }, { "selector": ".flex-column", "declarations": 1 }, { "selector": ".flex", "declarations": 1 }, { "selector": ".db", "declarations": 1 }, { "selector": ".b--black-10", "declarations": 1 }] }, "selectors": { "total": 35, "type": 0, "class": 35, "id": 0, "pseudoClass": 3, "pseudoElement": 0, "values": [".bt", ".bb", ".b--black-10", ".db", ".flex", ".flex-column", ".avenir", ".baskerville", ".fw1", ".lh-title", ".lh-copy", ".mw7", ".w-100", ".black", ".pv4", ".ph3", ".mb4", ".mt0", ".mv0", ".no-underline", ".f3", ".f6", ".center", ".dim", ".dim:hover", ".dim:focus", ".dim:active", ".flex-row-ns", ".w-40-ns", ".w-60-ns", ".pl3-ns", ".pr3-ns", ".mb0-ns", ".ph0-l", ".f5-l"], "specificity": { "max": 20, "average": 10.857142857142858 } }, "declarations": { "total": 44, "unique": 39, "properties": { "border-top-style": ["solid"], "border-top-width": ["1px"], "border-bottom-style": ["solid"], "border-bottom-width": ["1px"], "border-color": ["rgba(0, 0, 0, .1)"], "display": ["block", "flex"], "flex-direction": ["column", "row"], "font-family": ["'avenir next', avenir, sans-serif", "baskerville, serif"], "font-weight": ["100"], "line-height": ["1.25", "1.5"], "max-width": ["48rem"], "width": ["100%", "40%", "60%"], "color": ["#000"], "padding-top": ["2rem"], "padding-bottom": ["2rem"], "padding-left": ["1rem", "1rem", "0"], "padding-right": ["1rem", "1rem", "0"], "margin-bottom": ["2rem", "0", "0"], "margin-top": ["0", "0"], "text-decoration": ["none"], "font-size": ["1.5rem", ".875rem", "1rem"], "margin-right": ["auto"], "margin-left": ["auto"], "opacity": ["1", ".5", ".8"], "transition": ["opacity .15s ease-in", "opacity .15s ease-in", "opacity .15s ease-out"] } }, "mediaQueries": { "total": 2, "unique": 2, "values": ["screen and (min-width: 30em)", "screen and (min-width: 60em)"], "contents": [{ "value": "screen and (min-width: 30em)", "rules": { "total": 6, "size": { "graph": [1, 1, 1, 1, 1, 1], "max": 1, "average": 1 }, "selectorByRuleSizes": [{ "selector": ",.mb0-ns", "declarations": 1 }, { "selector": ",.pr3-ns", "declarations": 1 }, { "selector": ",.pl3-ns", "declarations": 1 }, { "selector": ",.w-60-ns", "declarations": 1 }, { "selector": ",.w-40-ns", "declarations": 1 }, { "selector": ".flex-row-ns", "declarations": 1 }] }, "selectors": { "total": 6, "type": 0, "class": 6, "id": 0, "pseudoClass": 0, "pseudoElement": 0, "values": [".flex-row-ns", ".w-40-ns", ".w-60-ns", ".pl3-ns", ".pr3-ns", ".mb0-ns"], "specificity": { "max": 10, "average": 10 } }, "declarations": { "total": 6, "unique": 6, "properties": { "flex-direction": ["row"], "width": ["40%", "60%"], "padding-left": ["1rem"], "padding-right": ["1rem"], "margin-bottom": ["0"] } } }, { "value": "screen and (min-width: 60em)", "rules": { "total": 2, "size": { "graph": [2, 1], "max": 2, "average": 1.5 }, "selectorByRuleSizes": [{ "selector": ".ph0-l", "declarations": 2 }, { "selector": ",.f5-l", "declarations": 1 }] }, "selectors": { "total": 2, "type": 0, "class": 2, "id": 0, "pseudoClass": 0, "pseudoElement": 0, "values": [".ph0-l", ".f5-l"], "specificity": { "max": 10, "average": 10 } }, "declarations": { "total": 3, "unique": 3, "properties": { "padding-left": ["0"], "padding-right": ["0"], "font-size": ["1rem"] } } }] } }, "classes": [".mw7", ".center", ".avenir", ".baskerville", ".fw1", ".ph3", ".ph0-l", ".bt", ".bb", ".b--black-10", ".db", ".pv4", ".ph3", ".ph0-l", ".no-underline", ".black", ".dim", ".flex", ".flex-column", ".flex-row-ns", ".pr3-ns", ".mb4", ".mb0-ns", ".w-100", ".w-40-ns", ".db", ".w-100", ".w-60-ns", ".pl3-ns", ".f3", ".fw1", ".baskerville", ".mt0", ".lh-title", ".f6", ".f5-l", ".lh-copy", ".f6", ".lh-copy", ".mv0", ".bb", ".b--black-10", ".db", ".pv4", ".ph3", ".ph0-l", ".no-underline", ".black", ".dim", ".flex", ".flex-column", ".flex-row-ns", ".pr3-ns", ".mb4", ".mb0-ns", ".w-100", ".w-40-ns", ".db", ".w-100", ".w-60-ns", ".pl3-ns", ".f3", ".fw1", ".baskerville", ".mt0", ".lh-title", ".f6", ".f5-l", ".lh-copy", ".f6", ".lh-copy", ".mv0", ".bb", ".b--black-10", ".db", ".pv4", ".ph3", ".ph0-l", ".no-underline", ".black", ".dim", ".flex", ".flex-column", ".flex-row-ns", ".pr3-ns", ".mb4", ".mb0-ns", ".w-100", ".w-40-ns", ".db", ".w-100", ".w-60-ns", ".pl3-ns", ".f3", ".fw1", ".baskerville", ".mt0", ".lh-title", ".f6", ".f5-l", ".lh-copy", ".f6", ".lh-copy", ".mv0"] };␊
    ␊
    exports.css = css;␊
    exports.html = html;␊
    exports.meta = meta;`
