New: Add modern mode (#123)

Author: stormwarning

.changeset/tasty-dolphins-sell.md

@@ -0,0 +1,8 @@
+---
+'tailwindcss-capsize': major
+---
+
+Add `modern` output mode
+In this mode the `fontFamily`, `fontSize`, and `lineHeight` core plugins are replaced, adding custom properties to the output of each which are used in the `calc()` expressions in the utility class.
+
+`modern` mode is enabled by default. The previous functionality can be maintained if needed by switching to `classic` mode.

README.md

@@ -8,6 +8,10 @@
 $ npm install --save-dev tailwindcss-capsize
 ```
 
+## leading-trim?
+
+A [proposed CSS property](https://www.w3.org/TR/css-inline-3/#leading-trim) to remove the extra space from text bounding boxes, which affects optical alignment. This [article from Microsoft Design][] outlines the problem and how the proposed solution works.
+
 ## Configuration
 
 This plugin requires a `fontMetrics` key added to your Tailwind theme. It should be an object with keys matching those in your `fontFamily` definitions, and each key should have an object of the following shape:
@@ -52,7 +56,7 @@ module.exports = {
 
 ## Usage
 
-The new `.capsize` utility class should be applied to the _direct parent_ element surrounding a text node. This class only provides the neccessary styles for trimming whitespace, utility classes for setting `font-family`, `font-size`, and `line-height` will need to be applied as well.
+The new `.capsize` utility class should be applied to the _direct parent_ element surrounding a text node. This class requires `font-family`, `font-size`, and `line-height` utilities to be applied at some point above it in the cascade in order for the required custom properties to be available.
 
 ## Options
 
@@ -72,5 +76,32 @@ The default `.capsize` utility class can be replaced with a custom class name if
 require('tailwindcss-capsize')({ className: 'leading-trim' })
 ```
 
+### mode
+
+By default the plugin replaces the `fontFamily`, `fontSize`, and `lineHeight` core plugins, adding custom properties to the output of each which are used in the `calc()` expressions in the utility class.
+
+```diff
+.font-sans {
++   --ascent-scale: 0.9688;
++   --descent-scale: 0.2415;
++   --cap-height-scale: 0.7273;
++   --line-gap-scale: 0;
++   --line-height-scale: 1.2102;
+    font-family: Inter, sans-serif;
+}
+```
+
+If you need to support browsers that don’t support custom properties, setting `mode` to `'classic'` will handle all the calculation at build-time before the CSS is output. This will require that the markup matches a specific selector format.
+
+```js
+require('tailwindcss-capsize')({ mode: 'classic' })
+```
+
+## Related
+
+[🔡 tailwindcss-opentype](https://github.com/stormwarning/tailwindcss-opentype)  
+Utility classes for advanced typographic features.
+
 [npm-url]: https://www.npmjs.com/package/tailwindcss-capsize
 [npm-img]: https://img.shields.io/npm/v/tailwindcss-capsize.svg?style=flat-square
+[article from microsoft design]: https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202