Better prefix behavior

plugin/package.json

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

plugin/src/index.ts

@@ -67,7 +67,7 @@ function getFluidAPI(
 			Object.entries(utilities).forEach(([util, origFn]) => {
 				orig(
 					{
-						[`~${util}`](start, { modifier: end }) {
+						[`~${context.prefix}${util}`](start, { modifier: end }) {
 							// See note about default modifiers above
 							if (end === null && DEFAULT) end = DEFAULT
 
@@ -84,6 +84,7 @@ function getFluidAPI(
 						...options,
 						values,
 						supportsNegativeValues: false, // b/c Tailwind only negates the value, not the modifier
+						respectPrefix: false, // we add it manually, for better ordering
 						modifiers
 					}
 				)
@@ -110,9 +111,9 @@ const fluid = plugin.withOptions((options: PluginOptions = {}) => (api: PluginAP
 	if (inFluidPlugin) return // prevent recursion when adding fluid versions of config.plugins
 	inFluidPlugin = true
 
-	const { theme, config, corePlugins: corePluginEnabled, matchUtilities } = api
-	const context = getContext(theme, options)
-	const { screens, containers } = context
+	const { config, theme, corePlugins: corePluginEnabled, matchUtilities } = api
+	const context = getContext(config, theme, options)
+	const { screens, containers, prefix } = context
 
 	// Add new fluid text utility to handle potentially complex theme values
 	// ---
@@ -156,7 +157,7 @@ const fluid = plugin.withOptions((options: PluginOptions = {}) => (api: PluginAP
 	const { DEFAULT, ...fontSizeModifiers } = fontSizeValues
 	matchUtilities(
 		{
-			'~text'(_from, { modifier: _to }) {
+			[`~${prefix}text`](_from, { modifier: _to }) {
 				if (_to === null && DEFAULT) _to = DEFAULT
 
 				const from = normalize(_from)
@@ -209,6 +210,7 @@ const fluid = plugin.withOptions((options: PluginOptions = {}) => (api: PluginAP
 			values: fontSizeValues,
 			modifiers: fontSizeModifiers,
 			supportsNegativeValues: false,
+			respectPrefix: false,
 			type: ['absolute-size', 'relative-size', 'length', 'percentage']
 		}
 	)

plugin/src/util/context.ts

@@ -1,4 +1,4 @@
-import type { KeyValuePair, PluginAPI, ThemeConfig } from 'tailwindcss/types/config'
+import type { KeyValuePair, PluginAPI, PrefixConfig, ThemeConfig } from 'tailwindcss/types/config'
 import mapObject, { mapObjectSkip } from 'map-obj'
 import { error } from './errors'
 import { Length } from './css'
@@ -15,9 +15,11 @@ export type ResolvedFluidThemeConfig = Partial<{
 }>
 
 export default function getContext(
+	config: PluginAPI['config'],
 	theme: PluginAPI['theme'],
 	{ checkSC144 = true }: PluginOptions = {}
 ) {
+	const prefix: PrefixConfig = config('prefix')
 	const themeConfig: ResolvedFluidThemeConfig = theme('fluid') ?? {}
 
 	// Filter breakpoints by simple valid lengths
@@ -92,6 +94,7 @@ export default function getContext(
 			)
 		},
 		theme,
+		prefix,
 		checkSC144
 	}
 }

plugin/tests/index.test.ts

@@ -252,7 +252,7 @@ it(`supports custom separator and prefix`, async () => {
 		content: {
 			files: [
 				{
-					raw: html`<div class="~sm/lg_tw-~p-1/2"></div>`
+					raw: html`<div class="~sm/lg_~tw-p-1/2 ~tw-text-[1rem]/[2rem]"></div>`
 				}
 			],
 			extract: extract({ separator: '_', prefix: 'tw-' })
@@ -267,7 +267,14 @@ it(`supports custom separator and prefix`, async () => {
 		}
 	})
 	expect(result.css).toMatchFormattedCss(css`
-		.\~sm\/lg_tw-\~p-1\/2 {
+		.\~tw-text-\[1rem\]\/\[2rem\] {
+			font-size: clamp(
+				1rem,
+				0.4rem + 2vw,
+				2rem
+			); /* fluid type from 1rem at 30rem to 2rem at 80rem */
+		}
+		.\~sm\/lg_\~tw-p-1\/2 {
 			padding: clamp(
 				0.25rem,
 				0.1rem + 0.5vw,

site/pages/index.mdx

@@ -341,5 +341,5 @@ export default {
 
 <Tip.Good>Use a custom prefix with fluid type</Tip.Good>
 ```html mark="tw-"
-<div class="tw-~text-sm/xl">
+<div class="~tw-text-sm/xl">
 ```