v0.2.1

Closes #18

plugin/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fluid-tailwind",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"author": "Maxwell Barvian",
 	"main": "dist/index.js",
 	"module": "dist/index.mjs",

plugin/src/index.ts

@@ -113,35 +113,9 @@ const fluid = plugin.withOptions((options: PluginOptions = {}) => (api: PluginAP
 	const context = getContext(theme, options)
 	const { screens, containers } = context
 
-	// Add fluid versions for enabled core plugins
-	const fluidCoreAPI = getFluidAPI(api, context, {
-		// Filter out fontSize plugin
-		filter: (utils, options) => !utils.includes('text') || !options?.type?.includes('length')
-	})
-	Object.entries(corePlugins).forEach(([name, corePlugin]) => {
-		if (!corePluginEnabled(name)) return
-		corePlugin(fluidCoreAPI)
-	})
-
-	// Add fluid versions of external plugins
-	const fluidPluginAPI = getFluidAPI(api, context)
-	const plugins = config('plugins') as (Function | Plugin)[]
-	plugins.forEach((plug, i) => {
-		if (typeof plug === 'function') {
-			// It's a plugin.withOptions, but wasn't passed options so try executing it
-			// with no arguments:
-			try {
-				(plug() as Plugin).handler(fluidPluginAPI)
-			} catch (e) {
-				log.warn('fluid-tailwind', `Could not add fluid version of \`plugins[${i}]\``)
-			}
-		} else {
-			plug.handler(fluidPluginAPI)
-		}
-	})
-
 	// Add new fluid text utility to handle potentially complex theme values
 	// ---
+	// This has to be first so that utilities like ~leading (from corePlugins) can override it
 
 	type Values<Type> = Type extends KeyValuePair<any, infer Item> ? Item : never
 	type FontSize = Values<ThemeConfig['fontSize']>
@@ -238,6 +212,37 @@ const fluid = plugin.withOptions((options: PluginOptions = {}) => (api: PluginAP
 		}
 	)
 
+	// Add fluid versions for enabled core plugins
+	// ---
+
+	const fluidCoreAPI = getFluidAPI(api, context, {
+		// Filter out fontSize plugin
+		filter: (utils, options) => !utils.includes('text') || !options?.type?.includes('length')
+	})
+	Object.entries(corePlugins).forEach(([name, corePlugin]) => {
+		if (!corePluginEnabled(name)) return
+		corePlugin(fluidCoreAPI)
+	})
+
+	// Add fluid versions of external plugins
+	// ---
+
+	const fluidPluginAPI = getFluidAPI(api, context)
+	const plugins = config('plugins') as (Function | Plugin)[]
+	plugins.forEach((plug, i) => {
+		if (typeof plug === 'function') {
+			// It's a plugin.withOptions, but wasn't passed options so try executing it
+			// with no arguments:
+			try {
+				;(plug() as Plugin).handler(fluidPluginAPI)
+			} catch (e) {
+				log.warn('fluid-tailwind', `Could not add fluid version of \`plugins[${i}]\``)
+			}
+		} else {
+			plug.handler(fluidPluginAPI)
+		}
+	})
+
 	// Screen variants
 	// ---
 

plugin/tests/text.test.ts

@@ -166,6 +166,34 @@ it(`applies consistent line height`, async () => {
 	`)
 })
 
+it(`can be overridden by ~leading`, async () => {
+	const result = await run({
+		content: [
+			{
+				raw: html`<div class="~text-sm/lg ~leading-3/4"></div>`
+			}
+		]
+	})
+	expect(result.css).toMatchFormattedCss(css`
+		.\~text-sm\/lg {
+			font-size: clamp(0.875rem, 0.696rem + 0.446vw, 1.125rem)
+				/* fluid type from 0.875rem at 40rem to 1.125rem at 96rem */;
+			line-height: clamp(
+				1.25rem,
+				0.89rem + 0.89vw,
+				1.75rem
+			); /* fluid from 1.25rem at 40rem to 1.75rem at 96rem */
+		}
+		.\~leading-3\/4 {
+			line-height: clamp(
+				0.75rem,
+				0.57rem + 0.45vw,
+				1rem
+			); /* fluid from 0.75rem at 40rem to 1rem at 96rem */
+		}
+	`)
+})
+
 it(`fails for inconsistent line height`, async () => {
 	const result = await run({
 		content: [

site/pages/index.mdx

@@ -14,7 +14,7 @@ import Resizer from '/components/Resizer.svelte'
 
 * Supports **every utility** out of the box (including plugins)
 * Full **Intellisense** support
-* Ensures all fluid type meets [accessibility requirements](#fluid-type-accessibility-errors)
+* Ensures fluid type meets [accessibility requirements](#fluid-type-accessibility-errors)
 * **Flexible** enough to handle advanced use cases