Simplify font-feature-settings use in JIT-mode (#57)

.changeset/real-hornets-hunt.md

@@ -0,0 +1,5 @@
+---
+'tailwindcss-opentype': minor
+---
+
+Simplify `font-feature-settings` use in JIT-mode

docs/.eleventy.js

@@ -17,8 +17,7 @@ module.exports = function (eleventyConfig) {
                 plugin: 'remark-autolink-headings',
                 options: {
                     linkProperties: {
-                        class:
-                            'absolute ml-[-0.75em] md:ml-[-1em] pr-[0.5em] !no-underline !text-grey-400 opacity-0 group-hover:opacity-100',
+                        class: 'absolute ml-[-0.75em] md:ml-[-1em] pr-[0.5em] !no-underline !text-grey-400 opacity-0 group-hover:opacity-100',
                     },
                     content: {
                         type: 'text',

docs/remark/directives.js

@@ -1,5 +1,6 @@
 const dedent = require('dedent')
 const h = require('hastscript')
+const toHast = require('mdast-util-to-hast')
 const parse = require('rehype-parse')
 const unified = require('unified')
 const visit = require('unist-util-visit')
@@ -10,9 +11,10 @@ function htmlDirectives() {
         let hast = h(node.name, node.attributes)
         let children = []
 
-        if (node.name === 'feat') {
-            let tags = node.children[0].value.split(',')
-            let features = dedent`
+        switch (node.name) {
+            case 'feat': {
+                let tags = node.children[0].value.split(',')
+                let features = dedent`
                 <span aria-hidden="true" class="inline-flex self-center mx-4 h-6 w-px align-middle bg-grey-700 bg-opacity-20"></span>
                 ${tags.map(
                     (
@@ -22,17 +24,42 @@ function htmlDirectives() {
                     </span>`,
                 )}
                 `
-                .replace(/\n/g, '')
-                .replace(',', ' ')
+                    .replace(/\n/g, '')
+                    .replace(',', ' ')
 
-            children = unified().use(parse).parse(features).children[0]
-                .children[1].children
-            hast = h(node.name, node.attributes, [children])
-            data.hChildren = hast.children
-        }
+                children = unified().use(parse).parse(features).children[0]
+                    .children[1].children
+                hast = h(node.name, node.attributes, [children])
+                data.hChildren = hast.children
+                break
+            }
+
+            case 'reminder': {
+                let icon = dedent`
+                <svg class="flex-none h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                </svg>`
+                let existing = toHast(node).children[0]
+                let child = unified().use(parse).parse(icon).children[0]
+                    .children[1].children
 
-        data.hName = hast.tagName
-        data.hProperties = hast.properties
+                existing.properties.class = '!m-0'
+                console.log(existing)
+                hast = h(
+                    'div',
+                    { class: 'flex gap-4 p-4 bg-grey-100 rounded-lg' },
+                    [child, existing],
+                )
+                data.hName = hast.tagName
+                data.hProperties = hast.properties
+                data.hChildren = hast.children
+                break
+            }
+
+            default:
+                data.hName = hast.tagName
+                data.hProperties = hast.properties
+        }
     }
 
     function transform(tree) {

docs/src/data/classes/position.js

@@ -2,7 +2,7 @@ module.exports = {
     // 'super-position': '--ot-sups: "sups"',
     // 'sub-position': '--ot-subs: "subs"',
     // 'inferior-position': '--ot-sinf: "sinf"',
-    sups: '--ot-sups: "sups"',
-    subs: '--ot-subs: "subs"',
-    sinf: '--ot-sinf: "sinf"',
+    sups: '--ot-sups: "sups" 1',
+    subs: '--ot-subs: "subs" 1',
+    sinf: '--ot-sinf: "sinf" 1',
 }

docs/src/font-variant-position.md

@@ -5,13 +5,16 @@ description: Utilities for controlling alternate, smaller glyphs that are positi
 eleventyNavigation:
     key: Font Variant Position
     order: 5
-    # inactive: true
 classData: position
 ---
 
 ## Usage
 
-**Remember:** these utilities rely on the `.font-features` class to activate (until [browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position#browser_compatibility) for `font-variant-position` is better).
+:::reminder
+
+**Remember:** these utilities rely on the `.font-features` class to activate (until [browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position#browser_compatibility) for `font-variant-position` is better). If you're using Tailwind's [JIT mode](https://tailwindcss.com/docs/just-in-time-mode), the extra class is _not_ required.
+
+:::
 
 While it is possible to use the `font-variant-position` utilities at the "block" level, depending on the typeface this may result in other characters being substituted for the repositioned glyphs. To avoid this, wrap the appropriate characters in an inline element, such as `<sup>` or `<sub>`.
 
@@ -29,17 +32,16 @@ This feature replaces lining or oldstyle figures with superscript figures, often
         M<sup>me</sup> <sup>3</sup>He <sup>$</sup>2
     </p>
     <p class="font-warnock text-4xl">
-        M<mark class="font-features sups">me</mark>
-        <mark class="font-features sups">3</mark>He
-        <mark class="font-features sups">$</mark>2
+        M<mark class="sups">me</mark> <mark class="sups">3</mark>He
+        <mark class="sups">$</mark>2
     </p>
 </template>
 
 <p>M<sup class="font-features **sups**">me</sup></p>
 ```
 
 This illustrates a case where blanket application of the feature wouldn't work:
-in **:span[3]{.font-features.sups}He** we want the :kbd[3] superscripted, but not the lowercase :kbd[e].
+in **:span[3]{.sups}He** we want the :kbd[3] superscripted, but not the lowercase :kbd[e].
 
 ### Subscript :feat[subs]
 
@@ -49,10 +51,7 @@ Perhaps the most familiar example of subscripts is in chemical formulas.
 <template preview>
     <p class="font-hypatia text-4xl opacity-70">H<sub>2</sub>O x<sub>0</sub></p>
     <p class="font-hypatia text-4xl">
-        H<mark class="font-features subs">2</mark>O x<mark
-            class="font-features subs"
-            >0</mark
-        >
+        H<mark class="subs">2</mark>O x<mark class="subs">0</mark>
     </p>
 </template>
 
@@ -69,13 +68,11 @@ Scientific inferior are for chemical and mathematical typesetting, and include o
         H<sub>2</sub>O YC<sub>b</sub>C<sub>r</sub> ν<sub>μ</sub>
     </p>
     <p class="font-warnock text-4xl">
-        H<mark class="font-features sinf">2</mark>O YC<mark
-            class="font-features sinf"
-            >b</mark
-        >C<mark class="font-features sinf">r</mark> ν<mark
-            class="font-features sinf"
-            >μ</mark
+        H<mark class="sinf">2</mark>O YC<mark class="sinf">b</mark>C<mark
+            class="sinf"
+            >r</mark
         >
+        ν<mark class="sinf">μ</mark>
     </p>
 </template>