datasette-css-properties by simonw

44 downloads this week        Star

README source code


PyPI Changelog Tests License

Extremely experimental Datasette output plugin using CSS properties, inspired by Custom Properties as State by Chris Coyier.

More about this project: APIs from CSS without JavaScript: the datasette-css-properties plugin


Install this plugin in the same environment as Datasette.

$ datasette install datasette-css-properties


Once installed, this plugin adds a .css output format to every query result. This will return the first row in the query as a valid CSS file, defining each column as a custom property:

Example: produces:

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

If you link this stylesheet to your page you can then do things like this;

<link rel="stylesheet" href="">
.attraction-name:after { content: var(--name); }
<p class="attraction-name">Attraction name: </p>

Values will be quoted as CSS strings by default. If you want to return a "raw" value without the quotes - for example to set a CSS property that is numeric or a color, you can specify that column name using the ?_raw=column-name parameter. This can be passed multiple times.

Consider this example query:

  '#' || substr(sha, 0, 6) as [custom-bg]
order by
  author_date desc

This returns the first 6 characters of the most recently authored commit with a # prefix. The .css output rendered version looks like this:

:root {
  --custom-bg: '#97fb1';

Adding ?_raw=custom-bg to the URL produces this instead:

:root {
  --custom-bg: #97fb1;

This can then be used as a color value like so:

h1 {
    background-color: var(--custom-bg);


To set up this plugin locally, first checkout the code. Then create a new virtual environment:

cd datasette-css-properties
python3 -mvenv venv
source venv/bin/activate

Or if you are using pipenv:

pipenv shell

Now install the dependencies and tests:

pip install -e '.[test]'

To run the tests: