Reword merge section

barvian · Jul 1, 2024 · 0b9542e · 0b9542e
1 parent 7b7051d
commit 0b9542e
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 43 deletions.
diff --git a/packages/tailwind-merge/src/index.ts b/packages/tailwind-merge/src/index.ts
@@ -23,7 +23,7 @@ export function withFluid(config: Config<string, string>) {
 	const buildFluidValidator =
 		(defs: Exclude<ClassDefinition, ClassObject | ThemeGetter>[]): ClassValidator =>
 		(val) => {
-			// TODO: this won't handle values with `/` in them
+			// TODO: this won't handle values with `/` in them, but TW chokes on those anyway
 			const parts = val.split('/')
 			return (
 				parts.length === 2 &&
@@ -40,8 +40,8 @@ export function withFluid(config: Config<string, string>) {
 		toplevel = false
 	): [fluidValidator: ClassValidator, ...ClassObject[]] => {
 		// Separate class objects from other defs:
-		const nonObjDefs: Exclude<ClassDefinition, ThemeGetter | ClassObject>[] = []
 		const objDefs: ClassObject[] = []
+		const nonObjDefs: Exclude<ClassDefinition, ThemeGetter | ClassObject>[] = []
 
 		// Resolve theme getters first
 		resolveThemeGetters(group).forEach((def) => {
@@ -73,7 +73,8 @@ export function withFluid(config: Config<string, string>) {
 
 	return mergeConfigs(config, {
 		extend: {
-			classGroups
+			classGroups,
+			ignoredVariants: [(variant) => variant.startsWith('~')]
 		}
 	})
 }
diff --git a/packages/tailwind-merge/tests/index.test.ts b/packages/tailwind-merge/tests/index.test.ts
@@ -75,6 +75,6 @@ it('works with variants', () => {
 		'~text-2xl/3xl sm:~sm:~text-3xl/4xl'
 	)
 	expect(twMerge('text-base sm:text-lg ~text-2xl/3xl sm:~sm:~text-3xl/4xl')).toBe(
-		'sm:text-lg ~text-2xl/3xl sm:~sm:~text-3xl/4xl' // TODO: ideally this should be '~text-2xl/3xl sm:~sm:~text-3xl/4xl'
+		'~text-2xl/3xl sm:~sm:~text-3xl/4xl'
 	)
 })
diff --git a/site/components/Steps/Item.svelte b/site/components/Steps/Item.svelte
@@ -6,7 +6,7 @@
 	style:counter-increment="step"
 >
 	<div
-		class="prose prose-sm prose-slate dark:prose-invert prose-h3:text-sm/[inherit] prose-h3:mb-2 prose-h3:font-semibold col-span-2 mb-6 mt-0 lg:mb-0"
+		class="prose prose-sm prose-slate dark:prose-invert prose-h3:text-sm/[inherit] prose-h3:mb-2 prose-h3:font-semibold prose-h4:text-sm/[inherit] prose-h4:mb-2 prose-h4:font-semibold col-span-2 mb-6 mt-0 lg:mb-0"
 	>
 		<slot />
 	</div>

diff --git a/site/components/Tip/Warn.svelte b/site/components/Tip/Warn.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
 </script>
 
-<div class="WarnTip flex w-fit items-start gap-4 rounded-md bg-amber-500/10 p-4 dark:bg-black/25">
+<div class="WarnTip flex items-start gap-4 rounded-md bg-amber-500/10 p-4 dark:bg-black/25">
 	<svg
-		viewBox="0 0 20 20"
-		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
 		role="presentation"
 		class="mt-1 size-5 shrink-0 fill-amber-900 dark:fill-amber-100"
-		><path
+	>
+		<path
 			fill-rule="evenodd"
-			d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+			d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
 			clip-rule="evenodd"
-		></path></svg
-	>
+		/>
+	</svg>
 
 	<p
 		class="light:prose-code:text-current light:prose-a:text-current light:text-amber-900 m-0 flex-1 text-sm leading-6"

diff --git a/site/pages/index.mdx b/site/pages/index.mdx
@@ -17,8 +17,8 @@ import poster from './_inspector.png'
 ## Features
 
 * Works with **every utility** (including plugins)
-* Full **Intellisense** support
-* First-class [`tailwind-merge` support](#tailwind-merge)
+* Full **IntelliSense** support
+* First-class [tailwind-merge support](#tailwind-merge)
 * Ensures fluid type meets [accessibility requirements](#fluid-type-accessibility-errors)
 * **Flexible** enough to handle advanced use cases
 
@@ -350,38 +350,22 @@ you'll need to pass them in to the extractor as well:
 
 ## Integrations
 
-### [`tailwind-merge`](https://github.com/dcastil/tailwind-merge)
+### tailwind-merge
 
-`fluid-tailwind` officially supports `tailwind-merge` via a plugin.
+`fluid-tailwind` officially supports [tailwind-merge](https://github.com/dcastil/tailwind-merge) via a plugin:
 
-#### Use `fluid-tailwind` with `tailwind-merge`
+```sh frame="none"
+npm install --save @fluid-tailwind/tailwind-merge
+```
 
-<Steps.Root>
-  <Steps.Item>
-    <>
-      ### Install the package
+For best results, include it after any other tailwind-merge plugins:
 
-      Install `@fluid-tailwind/tailwind-merge` via npm.
-    </>
-    <Fragment slot="code">
-    ```sh
-    npm install -D @fluid-tailwind/tailwind-merge
-    ```
-    </Fragment>
-  </Steps.Item>
-  <Steps.Item>
-    <>
-      ### Extend `tailwind-merge`
+```js
+import { extendTailwindMerge } from 'tailwind-merge'
+import { withFluid } from '@fluid-tailwind/tailwind-merge'
 
-      For more information, see the [`tailwind-merge` plugin guide](https://github.com/dcastil/tailwind-merge/blob/v2.3.0/docs/configuration.md#using-tailwind-merge-plugins).
-    </>
-    <Fragment slot="code">
-      ```js
-      import { extendTailwindMerge } from 'tailwind-merge'
-      import { withFluid } from '@fluid-tailwind/tailwind-merge'
+export const twMerge = extendTailwindMerge(/* ... */, withFluid)
+```
+
+{/* <Tip.Warn>tailwind-merge currently doesn't merge the fluid variants (i.e. `~sm/lg:`, `~@sm/lg:`) correctly.</Tip.Warn> */}
 
-      export const twMerge = extendTailwindMerge(withFluid)
-      ```
-    </Fragment>
-  </Steps.Item>
-</Steps.Root>