APIs from CSS without JavaScript: the datasette-CSS-properties plugin

This was inspired by https://css-tricks.com/custom-properties-as-state/ which proposes stylesheets as an API - the stylesheet defines dynamic CSS custom properties (aka CSS variables) which can then be used by the rest of the page.

For example, adding the .css extension to a Datasette table page (having installed this plugin) gives you the following:

https://latest-with-plugins.datasette.io/fixtures/roadside_a...

    :root {
      --pk: '1';
      --name: 'The Mystery Spot';
      --address: '465 Mystery Spot Road, Santa Cruz, CA 95065';
      --latitude: '37.0167';
      --longitude: '-122.0024';
    }

That's data you can display on your page like this:

    <link rel="stylesheet" href="https://latest-with-plugins.datasette.io/fixtures/roadside_attractions.css">
    <style>
    .attraction-name:after { content: var(--name); }
    .attraction-address:after { content: var(--address); }
    </style>
    <p class="attraction-name">Attraction name: </p>
    <p class="attraction-address">Address: </p>

Is this a good idea? Almost certainly not, but it's definitely a fun hack!