teal-tagify

Create scoped tag selectors to style external markup

Usage no npm install needed!

<script type="module">
  import tealTagify from 'https://cdn.skypack.dev/teal-tagify';
</script>

README

Need to style markdown or other external markup with teal? Then this is the right module for you.

Usually teal only uses classes to style elements. This turns out rather impractical if you want to style markup that isn't generated by teal directly but comes from an external source like a markdown processor.

With teal-tagify you can create tag-based selectors that are scoped by an ancestor class name.

Setup

First, we need a directory (let's call it /content) with .tl files whose names match their root tag, i.e. a file called h1.tl that contains h1 { ... }. It's okay if this directory contains other components too that don't match this pattern – they will simply be ignored.

Second, we have to create a component (let's call it md.tl) that will act as wrapper for our class-less content:

div {
  tagify('/content', $children)
}

The tagify macro will scan the given directory for .tl files that match the pattern explained above. It will then add a new selector to each matching component, so .content-H1 will become .content-H1, .md H1.