diff --git a/plugin/package.json b/plugin/package.json index 67a8a51..a25ff6d 100644 --- a/plugin/package.json +++ b/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", diff --git a/plugin/src/index.ts b/plugin/src/index.ts index 8eba198..a46f9ab 100644 --- a/plugin/src/index.ts +++ b/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 extends KeyValuePair ? Item : never type FontSize = Values @@ -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 // --- diff --git a/plugin/tests/text.test.ts b/plugin/tests/text.test.ts index dfe5fcb..2ee6f79 100644 --- a/plugin/tests/text.test.ts +++ b/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`
` + } + ] + }) + 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: [ diff --git a/site/pages/index.mdx b/site/pages/index.mdx index aea5ed2..ed9fd78 100644 --- a/site/pages/index.mdx +++ b/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