Update plugin for Tailwind v4 support

Author: stormwarning

.changeset/thirty-pens-help.md

@@ -0,0 +1,7 @@
+---
+"tailwindcss-opentype": minor
+---
+
+Update plugin for Tailwind v4 support
+
+CSS output increased slightly for features that rely on the `font-feature-settings` property.

plugin/__tests__/plugin.test.ts

@@ -86,36 +86,43 @@ describe('Plugin', () => {
 
 			.sups {
 				--ot-sups: "sups" 1;
+				--ot-features: var(--ot-sups), var(--ot-subs), var(--ot-sinf), var(--ot-hlig), var(--ot-salt), var(--ot-ss01), var(--ot-ss02), var(--ot-ss03);
 				font-feature-settings: var(--ot-features);
 			}
 
 			.subs {
 				--ot-subs: "subs" 1;
+				--ot-features: var(--ot-sups), var(--ot-subs), var(--ot-sinf), var(--ot-hlig), var(--ot-salt), var(--ot-ss01), var(--ot-ss02), var(--ot-ss03);
 				font-feature-settings: var(--ot-features);
 			}
 
 			.sinf {
 				--ot-sinf: "sinf" 1;
+				--ot-features: var(--ot-sups), var(--ot-subs), var(--ot-sinf), var(--ot-hlig), var(--ot-salt), var(--ot-ss01), var(--ot-ss02), var(--ot-ss03);
 				font-feature-settings: var(--ot-features);
 			}
 
 			.hlig {
 				--ot-hlig: "hlig" 1;
+				--ot-features: var(--ot-sups), var(--ot-subs), var(--ot-sinf), var(--ot-hlig), var(--ot-salt), var(--ot-ss01), var(--ot-ss02), var(--ot-ss03);
 				font-feature-settings: var(--ot-features);
 			}
 
 			.ss-01 {
 				--ot-ss01: "ss01" 1;
+				--ot-features: var(--ot-sups), var(--ot-subs), var(--ot-sinf), var(--ot-hlig), var(--ot-salt), var(--ot-ss01), var(--ot-ss02), var(--ot-ss03);
 				font-feature-settings: var(--ot-features);
 			}
 
 			.ss-03 {
 				--ot-ss03: "ss03" 1;
+				--ot-features: var(--ot-sups), var(--ot-subs), var(--ot-sinf), var(--ot-hlig), var(--ot-salt), var(--ot-ss01), var(--ot-ss02), var(--ot-ss03);
 				font-feature-settings: var(--ot-features);
 			}
 
 			.ss-named {
 				--ot-ss02: "ss02" 1;
+				--ot-features: var(--ot-sups), var(--ot-subs), var(--ot-sinf), var(--ot-hlig), var(--ot-salt), var(--ot-ss01), var(--ot-ss02), var(--ot-ss03);
 				font-feature-settings: var(--ot-features);
 			}
 		`)

plugin/src/plugin.ts

@@ -1,7 +1,6 @@
 import plugin from 'tailwindcss/plugin.js'
 
 const JIT_FONT_FEATURE_DEFAULTS = {
-	'@defaults font-feature-settings': {},
 	'font-feature-settings': 'var(--ot-features)',
 }
 
@@ -68,7 +67,7 @@ const opentypePlugin = plugin.withOptions(
 			}
 
 			addBase({
-				'@defaults font-feature-settings': {
+				':root, :host': {
 					'--ot-sups': '"sups" 0',
 					'--ot-subs': '"subs" 0',
 					'--ot-sinf': '"sinf" 0',
@@ -86,25 +85,41 @@ const opentypePlugin = plugin.withOptions(
 				},
 			})
 
+			let fontFeatureProperties = {
+				'--ot-features': [
+					'var(--ot-sups)',
+					'var(--ot-subs)',
+					'var(--ot-sinf)',
+					'var(--ot-hlig)',
+					'var(--ot-salt)',
+					...stylisticSetsProperties,
+				].join(', '),
+			}
+
 			addUtilities({
 				'.sups': {
 					'--ot-sups': '"sups" 1',
+					...fontFeatureProperties,
 					...JIT_FONT_FEATURE_DEFAULTS,
 				},
 				'.subs': {
 					'--ot-subs': '"subs" 1',
+					...fontFeatureProperties,
 					...JIT_FONT_FEATURE_DEFAULTS,
 				},
 				'.sinf': {
 					'--ot-sinf': '"sinf" 1',
+					...fontFeatureProperties,
 					...JIT_FONT_FEATURE_DEFAULTS,
 				},
 				'.hlig': {
 					'--ot-hlig': '"hlig" 1',
+					...fontFeatureProperties,
 					...JIT_FONT_FEATURE_DEFAULTS,
 				},
 				'.salt': {
 					'--ot-salt': '"salt" 1',
+					...fontFeatureProperties,
 					...JIT_FONT_FEATURE_DEFAULTS,
 				},
 			})
@@ -113,6 +128,7 @@ const opentypePlugin = plugin.withOptions(
 				{
 					ss: (value: string) => ({
 						[`--ot-${value}`]: `"${value}" 1`,
+						...fontFeatureProperties,
 						...JIT_FONT_FEATURE_DEFAULTS,
 					}),
 				},