Breaking: Remove support for legacy AOT mode (#87)

stormwarning · Mar 25, 2022 · aa9273c · aa9273c
1 parent a28cad8
commit aa9273c
Show file tree

Hide file tree

Showing 15 changed files with 310 additions and 416 deletions.
diff --git a/.changeset/fluffy-goats-promise.md b/.changeset/fluffy-goats-promise.md
@@ -0,0 +1,7 @@
+---
+'tailwindcss-opentype': major
+---
+
+Drop support for legacy AOT mode in order to support v3
+
+Plugin no longer supports v1, may work in v2 as long as JIT mode is enabled.
diff --git a/README.md b/README.md
@@ -18,6 +18,11 @@ npm install tailwindcss-opentype
 -   [Utility OpenType](https://github.com/kennethormandy/utility-opentype) by [@kennethormandy](https://github.com/kennethormandy)
 -   [OpenType Features](https://sparanoid.com/lab/opentype-features/) by [@sparanoid](https://github.com/sparanoid)
 
+## Related
+
+[✂️ tailwindcss-capsize](https://github.com/stormwarning/tailwindcss-capsize) — Utility classes for trimming leading whitespace.
+
+
 [npm-url]: https://www.npmjs.com/package/tailwindcss-opentype
 [npm-img]: https://img.shields.io/npm/v/tailwindcss-opentype.svg?style=flat-square
 [npm-dls]: https://img.shields.io/npm/dt/tailwindcss-opentype.svg?style=flat-square
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
@@ -21,12 +21,12 @@ module.exports = function (eleventyConfig) {
             } else {
                 let linkClass = [
                     'px-3 py-2 transition-colors duration-200 relative block',
-                    isSelected && 'text-light-blue-700',
+                    isSelected && 'text-sky-700',
                     !isSelected && 'hover:text-grey-900 text-grey-500',
                 ].join(' ')
 
                 tag = dedent`<a class="${linkClass}" href="${url}">
-                    <span class="rounded-md absolute inset-0 bg-light-blue-50 ${
+                    <span class="rounded-md absolute inset-0 bg-sky-50 ${
                         !isSelected && 'opacity-0'
                     }"></span>
                     <span class="relative">${content}</span>

diff --git a/docs/src/assets/main.css b/docs/src/assets/main.css
@@ -30,7 +30,7 @@
 .token.punctuation,
 .token.module,
 .token.property {
-    @apply text-light-blue-200;
+    @apply text-sky-200;
 }
 
 .token.atapply .token:not(.rule):not(.important) {

diff --git a/docs/src/feature-alternates.md b/docs/src/feature-alternates.md
@@ -11,14 +11,8 @@ classData: ot-alternates
 
 ## Usage
 
-:::reminder
-
-**Remember:** Unless you're using Tailwind's [JIT mode](https://tailwindcss.com/docs/just-in-time-mode) — enabled in v3+, optional in v2.1+ — these utilities rely on the `.font-features` class to activate.
-
 These utilities provide access to OpenType alternate glyph features not currently available via the higher-level CSS properties. For other alternate glyph features, use the [Font Variant Alternates](/font-variant-alternates) utilities.
 
-:::
-
 ### Stylistic sets :feat[ss01–ss20]
 
 This feature replaces sets of default character glyphs with stylistic variants. Glyphs in stylistic sets may be designed to harmonise visually, interact in particular ways, or otherwise work together.

diff --git a/docs/src/feature-ligatures.md b/docs/src/feature-ligatures.md
@@ -11,12 +11,6 @@ classData: ot-ligatures
 
 ## Usage
 
-:::reminder
-
-**Remember:** these utilities rely on the `.font-features` class to activate. If you're using Tailwind's [JIT mode](https://tailwindcss.com/docs/just-in-time-mode), the extra class is _not_ required.
-
-:::
-
 These utilities provide access to OpenType ligature features not currently available via the higher-level CSS properties. For other ligature features, use the [Font Variant Ligatures](/font-variant-ligatures) utilities.
 
 ### Historical ligatures :feat[hlig]

diff --git a/docs/src/feature-position.md b/docs/src/feature-position.md
@@ -11,12 +11,6 @@ classData: position
 
 ## Usage
 
-:::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>`.
 
 Using `<sup>` or `<sub>` elements has its own pitfalls, however. Common "reset" styles and even browser default styles often try to approximate superscript or subscript glyphs, which should be disabled if you are using a font designed with these features. These resets and defaults vary, so these utilities don't attempt to disable any default styles for these elements. Either account for this in your own baseline styles, or use a more neutral wrapper, like `<span>`.

diff --git a/docs/src/includes/class-table.njk b/docs/src/includes/class-table.njk
@@ -25,7 +25,7 @@
                     >
                         {{- class -}}
                     </td>
-                    <td class="py-2 pl-2 font-mono text-xs text-light-blue-600 whitespace-pre {{ 'border-t border-grey-200' if loop.index0 !== 0 }}">
+                    <td class="py-2 pl-2 font-mono text-xs text-sky-600 whitespace-pre {{ 'border-t border-grey-200' if loop.index0 !== 0 }}">
                         {{- property -}}
                     </td>
                 </tr>

diff --git a/docs/src/layouts/base.njk b/docs/src/layouts/base.njk
@@ -34,7 +34,7 @@
                         id="nav"
                     >
                         <a class="inline-flex px-3" href="{{ '/' | url }}">
-                            <div class="w-12 h-12 rounded-xl mb-8 bg-gradient-to-br flex items-center justify-center from-cyan-400 to-light-blue-500">
+                            <div class="w-12 h-12 rounded-xl mb-8 bg-gradient-to-br flex items-center justify-center from-cyan-400 to-sky-500">
                                 {% include 'logo.njk' %}
                             </div>
                         </a>

diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -5,17 +5,15 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 const opentypePlugin = require('../dist/index')
 
 module.exports = {
-    mode: 'jit',
-    purge: [
+    content: [
         './docs/src/**/*.{html,md,njk}',
         './docs/.eleventy.js',
         './docs/remark/*.js',
     ],
-    darkMode: false, // or 'media' or 'class'
     theme: {
         extend: {
             colors: {
-                grey: colors.coolGray,
+                grey: colors.gray,
                 amber: colors.amber,
                 orange: colors.orange,
                 rose: colors.rose,
@@ -25,7 +23,7 @@ module.exports = {
                 emerald: colors.emerald,
                 teal: colors.teal,
                 cyan: colors.cyan,
-                'light-blue': colors.lightBlue,
+                sky: colors.sky,
                 violet: colors.violet,
             },