Media queries

[Matthew Phillips]

Need a concrete use-case but it would be fun.

[Matthew Phillips]

@media only screen and (max-width: 768px) {
  .sidebar {
    mount: ${MobileSidebar};
  }
}

To dynamically load the mobile sidebar:

// This is a mountpoint which loads another mountpoint dynamically.
const mount = Symbol();
const Loadable = fn => state => {
  if(state[mount]) {
    return state[mount];
  }

  fn().then(mod => {
    // Triggers a reload.
    state[mount] = mod.default;
  });

  return sheet``;
};

mount(document, state => {
  return sheet`
    @media only screen and (max-width: 768px) {
      .sidebar {
        mount: ${Loadable(() => import('./mobile-sidebar.js'))};
      }
    }
  `;
});