output.css

output.html

<style type="text/css">
  @media screen and (max-width: 767px) {
    #a23d39cc article {
      font-size: 25px;
    }
  }

  #a23d39cc article {
    font-size: 15px;
  }
  
  #a23d39cc article a {
    color: #000;
  }
</style>
<article id="a23d39cc">
  <h2><a href="http://store.nest.com">Buy now</a></h2>
</article>

tile-example.js

import Tile from 'tile';
import hbs from 'handlebars-inline-precompile';

export default FooTile;

/**
 * The objective is to keep as much of our tile logic together
 * as possible and prevent styles from touching other tiles
 * 
 * This concept accomplishes both by creating compiling the
 * CSS with a wrapping GUID which is generated only once,
 * on initial render, and the caller (routes/welcome.js),
 * caches the previous results
 **/
class FooTile extends Tile {
  get style() {
    return {
      '@media screen and (max-width: 767px)': {
          article: { fontSize: '25px', }
      },
  
      article: {
        fontSize: '15px',
        a: {
          color: "#000"
        }
      }
    }
  }
  
  render() {
    // render precompiled handlebar template
    return hbs`
      <article>
        <h2><a href="{{nurl 'store_url'}}">Buy now</a></h2>
      </article>
    `;
  }
};