Devise a way to express CSS in cell

One of the exciting things about cell is you can express everything as a JSON, except for a couple of scenarios. One of these is the style tag. And the style tag can be critical in some cases.

We can't always handle styles by attaching a style attribute directly to nodes, especially when we're trying to use change the style by toggling the node's class, as shown below:

<html>
...
<style>
.page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 200px;
  text-align: center;
  line-height: 100vh;
  background: white;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
  cursor: pointer;
}
.page.hidden {
  left: 100%;
}
</style>
...
</html>

This is only possible as a CSS and not as an inline style, with all the css animations, etc.

Technically it is possible to create a style tag just like other tags, maybe like this:

var css = {
  $type: "style",
  $text: ".page { position: fixed; top: 0; }"
}

But this doesn't scale because we're trying to squeeze in an entire CSS file into a $text attribute. Maybe there's an elegant way to handle CSS.

intercellular / cell

Devise a way to express CSS in cell #154