From 807f4ee69cc08eef2897964b147d591f2ff24ba7 Mon Sep 17 00:00:00 2001 From: Ben Rogerson Date: Wed, 30 Mar 2022 10:34:52 +1030 Subject: [PATCH] Add text-decoration-{color/style/thickness/offset} --- .../utilitiesLayout/boxDecorationBreak.js | 6 +- .../utiltiesTypography/textDecorationColor.js | 464 ++--- .../utiltiesTypography/textDecorationStyle.js | 8 + .../textDecorationThickness.js | 15 + .../utiltiesTypography/textUnderlineOffset.js | 16 + __snapshots__/plugin.test.js.snap | 1580 ++++++++++++----- src/coerced.js | 50 +- src/config/dynamicStyles.js | 70 +- src/config/staticStyles.js | 20 +- src/handlers/corePlugins.js | 41 +- src/logging.js | 9 +- src/plugins/accentColor.js | 6 - src/plugins/bg.js | 4 +- src/plugins/border.js | 7 +- src/plugins/caretColor.js | 2 +- src/plugins/decoration.js | 24 + src/plugins/divide.js | 4 +- src/plugins/fill.js | 2 +- src/plugins/index.js | 2 +- src/plugins/placeholder.js | 4 +- src/plugins/ring.js | 4 +- src/plugins/ringOffset.js | 4 +- src/plugins/stroke.js | 4 +- src/plugins/text.js | 4 +- 24 files changed, 1552 insertions(+), 798 deletions(-) create mode 100644 __fixtures__/utiltiesTypography/textDecorationStyle.js create mode 100644 __fixtures__/utiltiesTypography/textDecorationThickness.js create mode 100644 __fixtures__/utiltiesTypography/textUnderlineOffset.js delete mode 100644 src/plugins/accentColor.js create mode 100644 src/plugins/decoration.js diff --git a/__fixtures__/utilitiesLayout/boxDecorationBreak.js b/__fixtures__/utilitiesLayout/boxDecorationBreak.js index 549d57f8..d5579532 100644 --- a/__fixtures__/utilitiesLayout/boxDecorationBreak.js +++ b/__fixtures__/utilitiesLayout/boxDecorationBreak.js @@ -1,5 +1,7 @@ import tw from './macro' // https://tailwindcss.com/docs/box-decoration-break -// tw`box-decoration-clone` -// tw`box-decoration-slice` +tw`decoration-clone` +tw`decoration-slice` +tw`box-decoration-clone` +tw`box-decoration-slice` diff --git a/__fixtures__/utiltiesTypography/textDecorationColor.js b/__fixtures__/utiltiesTypography/textDecorationColor.js index 55ff7f1b..08d6fe7a 100644 --- a/__fixtures__/utiltiesTypography/textDecorationColor.js +++ b/__fixtures__/utiltiesTypography/textDecorationColor.js @@ -3,232 +3,240 @@ import tw, { theme } from './macro' // https://tailwindcss.com/docs/text-decoration-color theme`textDecorationColor` -// tw`decoration-inherit` -// tw`decoration-current` -// tw`decoration-transparent` -// tw`decoration-black` -// tw`decoration-white` -// tw`decoration-slate-50` -// tw`decoration-slate-100` -// tw`decoration-slate-200` -// tw`decoration-slate-300` -// tw`decoration-slate-400` -// tw`decoration-slate-500` -// tw`decoration-slate-600` -// tw`decoration-slate-700` -// tw`decoration-slate-800` -// tw`decoration-slate-900` -// tw`decoration-gray-50` -// tw`decoration-gray-100` -// tw`decoration-gray-200` -// tw`decoration-gray-300` -// tw`decoration-gray-400` -// tw`decoration-gray-500` -// tw`decoration-gray-600` -// tw`decoration-gray-700` -// tw`decoration-gray-800` -// tw`decoration-gray-900` -// tw`decoration-zinc-50` -// tw`decoration-zinc-100` -// tw`decoration-zinc-200` -// tw`decoration-zinc-300` -// tw`decoration-zinc-400` -// tw`decoration-zinc-500` -// tw`decoration-zinc-600` -// tw`decoration-zinc-700` -// tw`decoration-zinc-800` -// tw`decoration-zinc-900` -// tw`decoration-neutral-50` -// tw`decoration-neutral-100` -// tw`decoration-neutral-200` -// tw`decoration-neutral-300` -// tw`decoration-neutral-400` -// tw`decoration-neutral-500` -// tw`decoration-neutral-600` -// tw`decoration-neutral-700` -// tw`decoration-neutral-800` -// tw`decoration-neutral-900` -// tw`decoration-stone-50` -// tw`decoration-stone-100` -// tw`decoration-stone-200` -// tw`decoration-stone-300` -// tw`decoration-stone-400` -// tw`decoration-stone-500` -// tw`decoration-stone-600` -// tw`decoration-stone-700` -// tw`decoration-stone-800` -// tw`decoration-stone-900` -// tw`decoration-red-50` -// tw`decoration-red-100` -// tw`decoration-red-200` -// tw`decoration-red-300` -// tw`decoration-red-400` -// tw`decoration-red-500` -// tw`decoration-red-600` -// tw`decoration-red-700` -// tw`decoration-red-800` -// tw`decoration-red-900` -// tw`decoration-orange-50` -// tw`decoration-orange-100` -// tw`decoration-orange-200` -// tw`decoration-orange-300` -// tw`decoration-orange-400` -// tw`decoration-orange-500` -// tw`decoration-orange-600` -// tw`decoration-orange-700` -// tw`decoration-orange-800` -// tw`decoration-orange-900` -// tw`decoration-amber-50` -// tw`decoration-amber-100` -// tw`decoration-amber-200` -// tw`decoration-amber-300` -// tw`decoration-amber-400` -// tw`decoration-amber-500` -// tw`decoration-amber-600` -// tw`decoration-amber-700` -// tw`decoration-amber-800` -// tw`decoration-amber-900` -// tw`decoration-yellow-50` -// tw`decoration-yellow-100` -// tw`decoration-yellow-200` -// tw`decoration-yellow-300` -// tw`decoration-yellow-400` -// tw`decoration-yellow-500` -// tw`decoration-yellow-600` -// tw`decoration-yellow-700` -// tw`decoration-yellow-800` -// tw`decoration-yellow-900` -// tw`decoration-lime-50` -// tw`decoration-lime-100` -// tw`decoration-lime-200` -// tw`decoration-lime-300` -// tw`decoration-lime-400` -// tw`decoration-lime-500` -// tw`decoration-lime-600` -// tw`decoration-lime-700` -// tw`decoration-lime-800` -// tw`decoration-lime-900` -// tw`decoration-green-50` -// tw`decoration-green-100` -// tw`decoration-green-200` -// tw`decoration-green-300` -// tw`decoration-green-400` -// tw`decoration-green-500` -// tw`decoration-green-600` -// tw`decoration-green-700` -// tw`decoration-green-800` -// tw`decoration-green-900` -// tw`decoration-emerald-50` -// tw`decoration-emerald-100` -// tw`decoration-emerald-200` -// tw`decoration-emerald-300` -// tw`decoration-emerald-400` -// tw`decoration-emerald-500` -// tw`decoration-emerald-600` -// tw`decoration-emerald-700` -// tw`decoration-emerald-800` -// tw`decoration-emerald-900` -// tw`decoration-teal-50` -// tw`decoration-teal-100` -// tw`decoration-teal-200` -// tw`decoration-teal-300` -// tw`decoration-teal-400` -// tw`decoration-teal-500` -// tw`decoration-teal-600` -// tw`decoration-teal-700` -// tw`decoration-teal-800` -// tw`decoration-teal-900` -// tw`decoration-cyan-50` -// tw`decoration-cyan-100` -// tw`decoration-cyan-200` -// tw`decoration-cyan-300` -// tw`decoration-cyan-400` -// tw`decoration-cyan-500` -// tw`decoration-cyan-600` -// tw`decoration-cyan-700` -// tw`decoration-cyan-800` -// tw`decoration-cyan-900` -// tw`decoration-sky-50` -// tw`decoration-sky-100` -// tw`decoration-sky-200` -// tw`decoration-sky-300` -// tw`decoration-sky-400` -// tw`decoration-sky-500` -// tw`decoration-sky-600` -// tw`decoration-sky-700` -// tw`decoration-sky-800` -// tw`decoration-sky-900` -// tw`decoration-blue-50` -// tw`decoration-blue-100` -// tw`decoration-blue-200` -// tw`decoration-blue-300` -// tw`decoration-blue-400` -// tw`decoration-blue-500` -// tw`decoration-blue-600` -// tw`decoration-blue-700` -// tw`decoration-blue-800` -// tw`decoration-blue-900` -// tw`decoration-indigo-50` -// tw`decoration-indigo-100` -// tw`decoration-indigo-200` -// tw`decoration-indigo-300` -// tw`decoration-indigo-400` -// tw`decoration-indigo-500` -// tw`decoration-indigo-600` -// tw`decoration-indigo-700` -// tw`decoration-indigo-800` -// tw`decoration-indigo-900` -// tw`decoration-violet-50` -// tw`decoration-violet-100` -// tw`decoration-violet-200` -// tw`decoration-violet-300` -// tw`decoration-violet-400` -// tw`decoration-violet-500` -// tw`decoration-violet-600` -// tw`decoration-violet-700` -// tw`decoration-violet-800` -// tw`decoration-violet-900` -// tw`decoration-purple-50` -// tw`decoration-purple-100` -// tw`decoration-purple-200` -// tw`decoration-purple-300` -// tw`decoration-purple-400` -// tw`decoration-purple-500` -// tw`decoration-purple-600` -// tw`decoration-purple-700` -// tw`decoration-purple-800` -// tw`decoration-purple-900` -// tw`decoration-fuchsia-50` -// tw`decoration-fuchsia-100` -// tw`decoration-fuchsia-200` -// tw`decoration-fuchsia-300` -// tw`decoration-fuchsia-400` -// tw`decoration-fuchsia-500` -// tw`decoration-fuchsia-600` -// tw`decoration-fuchsia-700` -// tw`decoration-fuchsia-800` -// tw`decoration-fuchsia-900` -// tw`decoration-pink-50` -// tw`decoration-pink-100` -// tw`decoration-pink-200` -// tw`decoration-pink-300` -// tw`decoration-pink-400` -// tw`decoration-pink-500` -// tw`decoration-pink-600` -// tw`decoration-pink-700` -// tw`decoration-pink-800` -// tw`decoration-pink-900` -// tw`decoration-rose-50` -// tw`decoration-rose-100` -// tw`decoration-rose-200` -// tw`decoration-rose-300` -// tw`decoration-rose-400` -// tw`decoration-rose-500` -// tw`decoration-rose-600` -// tw`decoration-rose-700` -// tw`decoration-rose-800` -// tw`decoration-rose-900` +tw`decoration-inherit` +tw`decoration-current` +tw`decoration-transparent` +tw`decoration-black` +tw`decoration-white` +tw`decoration-slate-50` +tw`decoration-slate-100` +tw`decoration-slate-200` +tw`decoration-slate-300` +tw`decoration-slate-400` +tw`decoration-slate-500` +tw`decoration-slate-600` +tw`decoration-slate-700` +tw`decoration-slate-800` +tw`decoration-slate-900` +tw`decoration-gray-50` +tw`decoration-gray-100` +tw`decoration-gray-200` +tw`decoration-gray-300` +tw`decoration-gray-400` +tw`decoration-gray-500` +tw`decoration-gray-600` +tw`decoration-gray-700` +tw`decoration-gray-800` +tw`decoration-gray-900` +tw`decoration-zinc-50` +tw`decoration-zinc-100` +tw`decoration-zinc-200` +tw`decoration-zinc-300` +tw`decoration-zinc-400` +tw`decoration-zinc-500` +tw`decoration-zinc-600` +tw`decoration-zinc-700` +tw`decoration-zinc-800` +tw`decoration-zinc-900` +tw`decoration-neutral-50` +tw`decoration-neutral-100` +tw`decoration-neutral-200` +tw`decoration-neutral-300` +tw`decoration-neutral-400` +tw`decoration-neutral-500` +tw`decoration-neutral-600` +tw`decoration-neutral-700` +tw`decoration-neutral-800` +tw`decoration-neutral-900` +tw`decoration-stone-50` +tw`decoration-stone-100` +tw`decoration-stone-200` +tw`decoration-stone-300` +tw`decoration-stone-400` +tw`decoration-stone-500` +tw`decoration-stone-600` +tw`decoration-stone-700` +tw`decoration-stone-800` +tw`decoration-stone-900` +tw`decoration-red-50` +tw`decoration-red-100` +tw`decoration-red-200` +tw`decoration-red-300` +tw`decoration-red-400` +tw`decoration-red-500` +tw`decoration-red-600` +tw`decoration-red-700` +tw`decoration-red-800` +tw`decoration-red-900` +tw`decoration-orange-50` +tw`decoration-orange-100` +tw`decoration-orange-200` +tw`decoration-orange-300` +tw`decoration-orange-400` +tw`decoration-orange-500` +tw`decoration-orange-600` +tw`decoration-orange-700` +tw`decoration-orange-800` +tw`decoration-orange-900` +tw`decoration-amber-50` +tw`decoration-amber-100` +tw`decoration-amber-200` +tw`decoration-amber-300` +tw`decoration-amber-400` +tw`decoration-amber-500` +tw`decoration-amber-600` +tw`decoration-amber-700` +tw`decoration-amber-800` +tw`decoration-amber-900` +tw`decoration-yellow-50` +tw`decoration-yellow-100` +tw`decoration-yellow-200` +tw`decoration-yellow-300` +tw`decoration-yellow-400` +tw`decoration-yellow-500` +tw`decoration-yellow-600` +tw`decoration-yellow-700` +tw`decoration-yellow-800` +tw`decoration-yellow-900` +tw`decoration-lime-50` +tw`decoration-lime-100` +tw`decoration-lime-200` +tw`decoration-lime-300` +tw`decoration-lime-400` +tw`decoration-lime-500` +tw`decoration-lime-600` +tw`decoration-lime-700` +tw`decoration-lime-800` +tw`decoration-lime-900` +tw`decoration-green-50` +tw`decoration-green-100` +tw`decoration-green-200` +tw`decoration-green-300` +tw`decoration-green-400` +tw`decoration-green-500` +tw`decoration-green-600` +tw`decoration-green-700` +tw`decoration-green-800` +tw`decoration-green-900` +tw`decoration-emerald-50` +tw`decoration-emerald-100` +tw`decoration-emerald-200` +tw`decoration-emerald-300` +tw`decoration-emerald-400` +tw`decoration-emerald-500` +tw`decoration-emerald-600` +tw`decoration-emerald-700` +tw`decoration-emerald-800` +tw`decoration-emerald-900` +tw`decoration-teal-50` +tw`decoration-teal-100` +tw`decoration-teal-200` +tw`decoration-teal-300` +tw`decoration-teal-400` +tw`decoration-teal-500` +tw`decoration-teal-600` +tw`decoration-teal-700` +tw`decoration-teal-800` +tw`decoration-teal-900` +tw`decoration-cyan-50` +tw`decoration-cyan-100` +tw`decoration-cyan-200` +tw`decoration-cyan-300` +tw`decoration-cyan-400` +tw`decoration-cyan-500` +tw`decoration-cyan-600` +tw`decoration-cyan-700` +tw`decoration-cyan-800` +tw`decoration-cyan-900` +tw`decoration-sky-50` +tw`decoration-sky-100` +tw`decoration-sky-200` +tw`decoration-sky-300` +tw`decoration-sky-400` +tw`decoration-sky-500` +tw`decoration-sky-600` +tw`decoration-sky-700` +tw`decoration-sky-800` +tw`decoration-sky-900` +tw`decoration-blue-50` +tw`decoration-blue-100` +tw`decoration-blue-200` +tw`decoration-blue-300` +tw`decoration-blue-400` +tw`decoration-blue-500` +tw`decoration-blue-600` +tw`decoration-blue-700` +tw`decoration-blue-800` +tw`decoration-blue-900` +tw`decoration-indigo-50` +tw`decoration-indigo-100` +tw`decoration-indigo-200` +tw`decoration-indigo-300` +tw`decoration-indigo-400` +tw`decoration-indigo-500` +tw`decoration-indigo-600` +tw`decoration-indigo-700` +tw`decoration-indigo-800` +tw`decoration-indigo-900` +tw`decoration-violet-50` +tw`decoration-violet-100` +tw`decoration-violet-200` +tw`decoration-violet-300` +tw`decoration-violet-400` +tw`decoration-violet-500` +tw`decoration-violet-600` +tw`decoration-violet-700` +tw`decoration-violet-800` +tw`decoration-violet-900` +tw`decoration-purple-50` +tw`decoration-purple-100` +tw`decoration-purple-200` +tw`decoration-purple-300` +tw`decoration-purple-400` +tw`decoration-purple-500` +tw`decoration-purple-600` +tw`decoration-purple-700` +tw`decoration-purple-800` +tw`decoration-purple-900` +tw`decoration-fuchsia-50` +tw`decoration-fuchsia-100` +tw`decoration-fuchsia-200` +tw`decoration-fuchsia-300` +tw`decoration-fuchsia-400` +tw`decoration-fuchsia-500` +tw`decoration-fuchsia-600` +tw`decoration-fuchsia-700` +tw`decoration-fuchsia-800` +tw`decoration-fuchsia-900` +tw`decoration-pink-50` +tw`decoration-pink-100` +tw`decoration-pink-200` +tw`decoration-pink-300` +tw`decoration-pink-400` +tw`decoration-pink-500` +tw`decoration-pink-600` +tw`decoration-pink-700` +tw`decoration-pink-800` +tw`decoration-pink-900` +tw`decoration-rose-50` +tw`decoration-rose-100` +tw`decoration-rose-200` +tw`decoration-rose-300` +tw`decoration-rose-400` +tw`decoration-rose-500` +tw`decoration-rose-600` +tw`decoration-rose-700` +tw`decoration-rose-800` +tw`decoration-rose-900` -// tw`decoration-sky-500/50` -// tw`decoration-sky-500/[.5]` -// tw`decoration-[#50d71e]` +tw`decoration-red-600` +tw`decoration-[#50d71e]` +tw`decoration-[black]` +tw`decoration-[rgb(123,123,123)]` +tw`decoration-[rgb(123,_123,_123)]` +tw`decoration-[rgb(123_123_123)]` +tw`decoration-[rgb(123_123_123)]/20` +tw`decoration-[rgb(123_123_123)]/[20]` +tw`decoration-[color:#50d71e]` +tw`decoration-[color:var(--color)]` +tw`decoration-[var(--color)]` diff --git a/__fixtures__/utiltiesTypography/textDecorationStyle.js b/__fixtures__/utiltiesTypography/textDecorationStyle.js new file mode 100644 index 00000000..540a6d14 --- /dev/null +++ b/__fixtures__/utiltiesTypography/textDecorationStyle.js @@ -0,0 +1,8 @@ +import tw from './macro' + +// https://tailwindcss.com/docs/text-decoration-style +tw`decoration-solid` +tw`decoration-double` +tw`decoration-dotted` +tw`decoration-dashed` +tw`decoration-wavy` diff --git a/__fixtures__/utiltiesTypography/textDecorationThickness.js b/__fixtures__/utiltiesTypography/textDecorationThickness.js new file mode 100644 index 00000000..029d1f8f --- /dev/null +++ b/__fixtures__/utiltiesTypography/textDecorationThickness.js @@ -0,0 +1,15 @@ +import tw, { theme } from './macro' + +// https://tailwindcss.com/docs/text-decoration-thickness +theme`textDecorationThickness` + +tw`decoration-auto` +tw`decoration-from-font` +tw`decoration-0` +tw`decoration-1` +tw`decoration-2` +tw`decoration-4` +tw`decoration-8` + +tw`decoration-[length:10px]` +tw`decoration-[percentage:10%]` diff --git a/__fixtures__/utiltiesTypography/textUnderlineOffset.js b/__fixtures__/utiltiesTypography/textUnderlineOffset.js new file mode 100644 index 00000000..e2c904df --- /dev/null +++ b/__fixtures__/utiltiesTypography/textUnderlineOffset.js @@ -0,0 +1,16 @@ +import tw, { theme } from './macro' + +// https://tailwindcss.com/docs/text-underline-offset +theme`textUnderlineOffset` + +tw`underline-offset-auto` +tw`underline-offset-0` +tw`underline-offset-1` +tw`underline-offset-2` +tw`underline-offset-4` +tw`underline-offset-8` + +tw`underline-offset-[3px]` +tw`underline-offset-[length:3px]` +tw`underline-offset-[30%]` +tw`underline-offset-[percentage:30%]` diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap index 28789d22..50cc1678 100644 --- a/__snapshots__/plugin.test.js.snap +++ b/__snapshots__/plugin.test.js.snap @@ -16438,11 +16438,26 @@ exports[`twin.macro boxDecorationBreak.js: boxDecorationBreak.js 1`] = ` import tw from './macro' // https://tailwindcss.com/docs/box-decoration-break -// tw\`box-decoration-clone\` -// tw\`box-decoration-slice\` +tw\`decoration-clone\` +tw\`decoration-slice\` +tw\`box-decoration-clone\` +tw\`box-decoration-slice\` ↓ ↓ ↓ ↓ ↓ ↓ +// https://tailwindcss.com/docs/box-decoration-break +;({ + boxDecorationBreak: 'clone', +}) +;({ + boxDecorationBreak: 'slice', +}) +;({ + boxDecorationBreak: 'clone', +}) +;({ + boxDecorationBreak: 'slice', +}) `; @@ -51943,235 +51958,243 @@ import tw, { theme } from './macro' // https://tailwindcss.com/docs/text-decoration-color theme\`textDecorationColor\` -// tw\`decoration-inherit\` -// tw\`decoration-current\` -// tw\`decoration-transparent\` -// tw\`decoration-black\` -// tw\`decoration-white\` -// tw\`decoration-slate-50\` -// tw\`decoration-slate-100\` -// tw\`decoration-slate-200\` -// tw\`decoration-slate-300\` -// tw\`decoration-slate-400\` -// tw\`decoration-slate-500\` -// tw\`decoration-slate-600\` -// tw\`decoration-slate-700\` -// tw\`decoration-slate-800\` -// tw\`decoration-slate-900\` -// tw\`decoration-gray-50\` -// tw\`decoration-gray-100\` -// tw\`decoration-gray-200\` -// tw\`decoration-gray-300\` -// tw\`decoration-gray-400\` -// tw\`decoration-gray-500\` -// tw\`decoration-gray-600\` -// tw\`decoration-gray-700\` -// tw\`decoration-gray-800\` -// tw\`decoration-gray-900\` -// tw\`decoration-zinc-50\` -// tw\`decoration-zinc-100\` -// tw\`decoration-zinc-200\` -// tw\`decoration-zinc-300\` -// tw\`decoration-zinc-400\` -// tw\`decoration-zinc-500\` -// tw\`decoration-zinc-600\` -// tw\`decoration-zinc-700\` -// tw\`decoration-zinc-800\` -// tw\`decoration-zinc-900\` -// tw\`decoration-neutral-50\` -// tw\`decoration-neutral-100\` -// tw\`decoration-neutral-200\` -// tw\`decoration-neutral-300\` -// tw\`decoration-neutral-400\` -// tw\`decoration-neutral-500\` -// tw\`decoration-neutral-600\` -// tw\`decoration-neutral-700\` -// tw\`decoration-neutral-800\` -// tw\`decoration-neutral-900\` -// tw\`decoration-stone-50\` -// tw\`decoration-stone-100\` -// tw\`decoration-stone-200\` -// tw\`decoration-stone-300\` -// tw\`decoration-stone-400\` -// tw\`decoration-stone-500\` -// tw\`decoration-stone-600\` -// tw\`decoration-stone-700\` -// tw\`decoration-stone-800\` -// tw\`decoration-stone-900\` -// tw\`decoration-red-50\` -// tw\`decoration-red-100\` -// tw\`decoration-red-200\` -// tw\`decoration-red-300\` -// tw\`decoration-red-400\` -// tw\`decoration-red-500\` -// tw\`decoration-red-600\` -// tw\`decoration-red-700\` -// tw\`decoration-red-800\` -// tw\`decoration-red-900\` -// tw\`decoration-orange-50\` -// tw\`decoration-orange-100\` -// tw\`decoration-orange-200\` -// tw\`decoration-orange-300\` -// tw\`decoration-orange-400\` -// tw\`decoration-orange-500\` -// tw\`decoration-orange-600\` -// tw\`decoration-orange-700\` -// tw\`decoration-orange-800\` -// tw\`decoration-orange-900\` -// tw\`decoration-amber-50\` -// tw\`decoration-amber-100\` -// tw\`decoration-amber-200\` -// tw\`decoration-amber-300\` -// tw\`decoration-amber-400\` -// tw\`decoration-amber-500\` -// tw\`decoration-amber-600\` -// tw\`decoration-amber-700\` -// tw\`decoration-amber-800\` -// tw\`decoration-amber-900\` -// tw\`decoration-yellow-50\` -// tw\`decoration-yellow-100\` -// tw\`decoration-yellow-200\` -// tw\`decoration-yellow-300\` -// tw\`decoration-yellow-400\` -// tw\`decoration-yellow-500\` -// tw\`decoration-yellow-600\` -// tw\`decoration-yellow-700\` -// tw\`decoration-yellow-800\` -// tw\`decoration-yellow-900\` -// tw\`decoration-lime-50\` -// tw\`decoration-lime-100\` -// tw\`decoration-lime-200\` -// tw\`decoration-lime-300\` -// tw\`decoration-lime-400\` -// tw\`decoration-lime-500\` -// tw\`decoration-lime-600\` -// tw\`decoration-lime-700\` -// tw\`decoration-lime-800\` -// tw\`decoration-lime-900\` -// tw\`decoration-green-50\` -// tw\`decoration-green-100\` -// tw\`decoration-green-200\` -// tw\`decoration-green-300\` -// tw\`decoration-green-400\` -// tw\`decoration-green-500\` -// tw\`decoration-green-600\` -// tw\`decoration-green-700\` -// tw\`decoration-green-800\` -// tw\`decoration-green-900\` -// tw\`decoration-emerald-50\` -// tw\`decoration-emerald-100\` -// tw\`decoration-emerald-200\` -// tw\`decoration-emerald-300\` -// tw\`decoration-emerald-400\` -// tw\`decoration-emerald-500\` -// tw\`decoration-emerald-600\` -// tw\`decoration-emerald-700\` -// tw\`decoration-emerald-800\` -// tw\`decoration-emerald-900\` -// tw\`decoration-teal-50\` -// tw\`decoration-teal-100\` -// tw\`decoration-teal-200\` -// tw\`decoration-teal-300\` -// tw\`decoration-teal-400\` -// tw\`decoration-teal-500\` -// tw\`decoration-teal-600\` -// tw\`decoration-teal-700\` -// tw\`decoration-teal-800\` -// tw\`decoration-teal-900\` -// tw\`decoration-cyan-50\` -// tw\`decoration-cyan-100\` -// tw\`decoration-cyan-200\` -// tw\`decoration-cyan-300\` -// tw\`decoration-cyan-400\` -// tw\`decoration-cyan-500\` -// tw\`decoration-cyan-600\` -// tw\`decoration-cyan-700\` -// tw\`decoration-cyan-800\` -// tw\`decoration-cyan-900\` -// tw\`decoration-sky-50\` -// tw\`decoration-sky-100\` -// tw\`decoration-sky-200\` -// tw\`decoration-sky-300\` -// tw\`decoration-sky-400\` -// tw\`decoration-sky-500\` -// tw\`decoration-sky-600\` -// tw\`decoration-sky-700\` -// tw\`decoration-sky-800\` -// tw\`decoration-sky-900\` -// tw\`decoration-blue-50\` -// tw\`decoration-blue-100\` -// tw\`decoration-blue-200\` -// tw\`decoration-blue-300\` -// tw\`decoration-blue-400\` -// tw\`decoration-blue-500\` -// tw\`decoration-blue-600\` -// tw\`decoration-blue-700\` -// tw\`decoration-blue-800\` -// tw\`decoration-blue-900\` -// tw\`decoration-indigo-50\` -// tw\`decoration-indigo-100\` -// tw\`decoration-indigo-200\` -// tw\`decoration-indigo-300\` -// tw\`decoration-indigo-400\` -// tw\`decoration-indigo-500\` -// tw\`decoration-indigo-600\` -// tw\`decoration-indigo-700\` -// tw\`decoration-indigo-800\` -// tw\`decoration-indigo-900\` -// tw\`decoration-violet-50\` -// tw\`decoration-violet-100\` -// tw\`decoration-violet-200\` -// tw\`decoration-violet-300\` -// tw\`decoration-violet-400\` -// tw\`decoration-violet-500\` -// tw\`decoration-violet-600\` -// tw\`decoration-violet-700\` -// tw\`decoration-violet-800\` -// tw\`decoration-violet-900\` -// tw\`decoration-purple-50\` -// tw\`decoration-purple-100\` -// tw\`decoration-purple-200\` -// tw\`decoration-purple-300\` -// tw\`decoration-purple-400\` -// tw\`decoration-purple-500\` -// tw\`decoration-purple-600\` -// tw\`decoration-purple-700\` -// tw\`decoration-purple-800\` -// tw\`decoration-purple-900\` -// tw\`decoration-fuchsia-50\` -// tw\`decoration-fuchsia-100\` -// tw\`decoration-fuchsia-200\` -// tw\`decoration-fuchsia-300\` -// tw\`decoration-fuchsia-400\` -// tw\`decoration-fuchsia-500\` -// tw\`decoration-fuchsia-600\` -// tw\`decoration-fuchsia-700\` -// tw\`decoration-fuchsia-800\` -// tw\`decoration-fuchsia-900\` -// tw\`decoration-pink-50\` -// tw\`decoration-pink-100\` -// tw\`decoration-pink-200\` -// tw\`decoration-pink-300\` -// tw\`decoration-pink-400\` -// tw\`decoration-pink-500\` -// tw\`decoration-pink-600\` -// tw\`decoration-pink-700\` -// tw\`decoration-pink-800\` -// tw\`decoration-pink-900\` -// tw\`decoration-rose-50\` -// tw\`decoration-rose-100\` -// tw\`decoration-rose-200\` -// tw\`decoration-rose-300\` -// tw\`decoration-rose-400\` -// tw\`decoration-rose-500\` -// tw\`decoration-rose-600\` -// tw\`decoration-rose-700\` -// tw\`decoration-rose-800\` -// tw\`decoration-rose-900\` - -// tw\`decoration-sky-500/50\` -// tw\`decoration-sky-500/[.5]\` -// tw\`decoration-[#50d71e]\` +tw\`decoration-inherit\` +tw\`decoration-current\` +tw\`decoration-transparent\` +tw\`decoration-black\` +tw\`decoration-white\` +tw\`decoration-slate-50\` +tw\`decoration-slate-100\` +tw\`decoration-slate-200\` +tw\`decoration-slate-300\` +tw\`decoration-slate-400\` +tw\`decoration-slate-500\` +tw\`decoration-slate-600\` +tw\`decoration-slate-700\` +tw\`decoration-slate-800\` +tw\`decoration-slate-900\` +tw\`decoration-gray-50\` +tw\`decoration-gray-100\` +tw\`decoration-gray-200\` +tw\`decoration-gray-300\` +tw\`decoration-gray-400\` +tw\`decoration-gray-500\` +tw\`decoration-gray-600\` +tw\`decoration-gray-700\` +tw\`decoration-gray-800\` +tw\`decoration-gray-900\` +tw\`decoration-zinc-50\` +tw\`decoration-zinc-100\` +tw\`decoration-zinc-200\` +tw\`decoration-zinc-300\` +tw\`decoration-zinc-400\` +tw\`decoration-zinc-500\` +tw\`decoration-zinc-600\` +tw\`decoration-zinc-700\` +tw\`decoration-zinc-800\` +tw\`decoration-zinc-900\` +tw\`decoration-neutral-50\` +tw\`decoration-neutral-100\` +tw\`decoration-neutral-200\` +tw\`decoration-neutral-300\` +tw\`decoration-neutral-400\` +tw\`decoration-neutral-500\` +tw\`decoration-neutral-600\` +tw\`decoration-neutral-700\` +tw\`decoration-neutral-800\` +tw\`decoration-neutral-900\` +tw\`decoration-stone-50\` +tw\`decoration-stone-100\` +tw\`decoration-stone-200\` +tw\`decoration-stone-300\` +tw\`decoration-stone-400\` +tw\`decoration-stone-500\` +tw\`decoration-stone-600\` +tw\`decoration-stone-700\` +tw\`decoration-stone-800\` +tw\`decoration-stone-900\` +tw\`decoration-red-50\` +tw\`decoration-red-100\` +tw\`decoration-red-200\` +tw\`decoration-red-300\` +tw\`decoration-red-400\` +tw\`decoration-red-500\` +tw\`decoration-red-600\` +tw\`decoration-red-700\` +tw\`decoration-red-800\` +tw\`decoration-red-900\` +tw\`decoration-orange-50\` +tw\`decoration-orange-100\` +tw\`decoration-orange-200\` +tw\`decoration-orange-300\` +tw\`decoration-orange-400\` +tw\`decoration-orange-500\` +tw\`decoration-orange-600\` +tw\`decoration-orange-700\` +tw\`decoration-orange-800\` +tw\`decoration-orange-900\` +tw\`decoration-amber-50\` +tw\`decoration-amber-100\` +tw\`decoration-amber-200\` +tw\`decoration-amber-300\` +tw\`decoration-amber-400\` +tw\`decoration-amber-500\` +tw\`decoration-amber-600\` +tw\`decoration-amber-700\` +tw\`decoration-amber-800\` +tw\`decoration-amber-900\` +tw\`decoration-yellow-50\` +tw\`decoration-yellow-100\` +tw\`decoration-yellow-200\` +tw\`decoration-yellow-300\` +tw\`decoration-yellow-400\` +tw\`decoration-yellow-500\` +tw\`decoration-yellow-600\` +tw\`decoration-yellow-700\` +tw\`decoration-yellow-800\` +tw\`decoration-yellow-900\` +tw\`decoration-lime-50\` +tw\`decoration-lime-100\` +tw\`decoration-lime-200\` +tw\`decoration-lime-300\` +tw\`decoration-lime-400\` +tw\`decoration-lime-500\` +tw\`decoration-lime-600\` +tw\`decoration-lime-700\` +tw\`decoration-lime-800\` +tw\`decoration-lime-900\` +tw\`decoration-green-50\` +tw\`decoration-green-100\` +tw\`decoration-green-200\` +tw\`decoration-green-300\` +tw\`decoration-green-400\` +tw\`decoration-green-500\` +tw\`decoration-green-600\` +tw\`decoration-green-700\` +tw\`decoration-green-800\` +tw\`decoration-green-900\` +tw\`decoration-emerald-50\` +tw\`decoration-emerald-100\` +tw\`decoration-emerald-200\` +tw\`decoration-emerald-300\` +tw\`decoration-emerald-400\` +tw\`decoration-emerald-500\` +tw\`decoration-emerald-600\` +tw\`decoration-emerald-700\` +tw\`decoration-emerald-800\` +tw\`decoration-emerald-900\` +tw\`decoration-teal-50\` +tw\`decoration-teal-100\` +tw\`decoration-teal-200\` +tw\`decoration-teal-300\` +tw\`decoration-teal-400\` +tw\`decoration-teal-500\` +tw\`decoration-teal-600\` +tw\`decoration-teal-700\` +tw\`decoration-teal-800\` +tw\`decoration-teal-900\` +tw\`decoration-cyan-50\` +tw\`decoration-cyan-100\` +tw\`decoration-cyan-200\` +tw\`decoration-cyan-300\` +tw\`decoration-cyan-400\` +tw\`decoration-cyan-500\` +tw\`decoration-cyan-600\` +tw\`decoration-cyan-700\` +tw\`decoration-cyan-800\` +tw\`decoration-cyan-900\` +tw\`decoration-sky-50\` +tw\`decoration-sky-100\` +tw\`decoration-sky-200\` +tw\`decoration-sky-300\` +tw\`decoration-sky-400\` +tw\`decoration-sky-500\` +tw\`decoration-sky-600\` +tw\`decoration-sky-700\` +tw\`decoration-sky-800\` +tw\`decoration-sky-900\` +tw\`decoration-blue-50\` +tw\`decoration-blue-100\` +tw\`decoration-blue-200\` +tw\`decoration-blue-300\` +tw\`decoration-blue-400\` +tw\`decoration-blue-500\` +tw\`decoration-blue-600\` +tw\`decoration-blue-700\` +tw\`decoration-blue-800\` +tw\`decoration-blue-900\` +tw\`decoration-indigo-50\` +tw\`decoration-indigo-100\` +tw\`decoration-indigo-200\` +tw\`decoration-indigo-300\` +tw\`decoration-indigo-400\` +tw\`decoration-indigo-500\` +tw\`decoration-indigo-600\` +tw\`decoration-indigo-700\` +tw\`decoration-indigo-800\` +tw\`decoration-indigo-900\` +tw\`decoration-violet-50\` +tw\`decoration-violet-100\` +tw\`decoration-violet-200\` +tw\`decoration-violet-300\` +tw\`decoration-violet-400\` +tw\`decoration-violet-500\` +tw\`decoration-violet-600\` +tw\`decoration-violet-700\` +tw\`decoration-violet-800\` +tw\`decoration-violet-900\` +tw\`decoration-purple-50\` +tw\`decoration-purple-100\` +tw\`decoration-purple-200\` +tw\`decoration-purple-300\` +tw\`decoration-purple-400\` +tw\`decoration-purple-500\` +tw\`decoration-purple-600\` +tw\`decoration-purple-700\` +tw\`decoration-purple-800\` +tw\`decoration-purple-900\` +tw\`decoration-fuchsia-50\` +tw\`decoration-fuchsia-100\` +tw\`decoration-fuchsia-200\` +tw\`decoration-fuchsia-300\` +tw\`decoration-fuchsia-400\` +tw\`decoration-fuchsia-500\` +tw\`decoration-fuchsia-600\` +tw\`decoration-fuchsia-700\` +tw\`decoration-fuchsia-800\` +tw\`decoration-fuchsia-900\` +tw\`decoration-pink-50\` +tw\`decoration-pink-100\` +tw\`decoration-pink-200\` +tw\`decoration-pink-300\` +tw\`decoration-pink-400\` +tw\`decoration-pink-500\` +tw\`decoration-pink-600\` +tw\`decoration-pink-700\` +tw\`decoration-pink-800\` +tw\`decoration-pink-900\` +tw\`decoration-rose-50\` +tw\`decoration-rose-100\` +tw\`decoration-rose-200\` +tw\`decoration-rose-300\` +tw\`decoration-rose-400\` +tw\`decoration-rose-500\` +tw\`decoration-rose-600\` +tw\`decoration-rose-700\` +tw\`decoration-rose-800\` +tw\`decoration-rose-900\` + +tw\`decoration-red-600\`; +tw\`decoration-[#50d71e]\` +tw\`decoration-[black]\`; +tw\`decoration-[rgb(123,123,123)]\`; +tw\`decoration-[rgb(123,_123,_123)]\`; +tw\`decoration-[rgb(123_123_123)]\`; +tw\`decoration-[rgb(123_123_123)]/20\`; +tw\`decoration-[rgb(123_123_123)]/[20]\`; +tw\`decoration-[color:#50d71e]\` +tw\`decoration-[color:var(--color)]\`; +tw\`decoration-[var(--color)]\`; ↓ ↓ ↓ ↓ ↓ ↓ @@ -52448,234 +52471,809 @@ theme\`textDecorationColor\` }, 'red-500/fromConfig': '#000', electric: void 0, -}) // tw\`decoration-inherit\` -// tw\`decoration-current\` -// tw\`decoration-transparent\` -// tw\`decoration-black\` -// tw\`decoration-white\` -// tw\`decoration-slate-50\` -// tw\`decoration-slate-100\` -// tw\`decoration-slate-200\` -// tw\`decoration-slate-300\` -// tw\`decoration-slate-400\` -// tw\`decoration-slate-500\` -// tw\`decoration-slate-600\` -// tw\`decoration-slate-700\` -// tw\`decoration-slate-800\` -// tw\`decoration-slate-900\` -// tw\`decoration-gray-50\` -// tw\`decoration-gray-100\` -// tw\`decoration-gray-200\` -// tw\`decoration-gray-300\` -// tw\`decoration-gray-400\` -// tw\`decoration-gray-500\` -// tw\`decoration-gray-600\` -// tw\`decoration-gray-700\` -// tw\`decoration-gray-800\` -// tw\`decoration-gray-900\` -// tw\`decoration-zinc-50\` -// tw\`decoration-zinc-100\` -// tw\`decoration-zinc-200\` -// tw\`decoration-zinc-300\` -// tw\`decoration-zinc-400\` -// tw\`decoration-zinc-500\` -// tw\`decoration-zinc-600\` -// tw\`decoration-zinc-700\` -// tw\`decoration-zinc-800\` -// tw\`decoration-zinc-900\` -// tw\`decoration-neutral-50\` -// tw\`decoration-neutral-100\` -// tw\`decoration-neutral-200\` -// tw\`decoration-neutral-300\` -// tw\`decoration-neutral-400\` -// tw\`decoration-neutral-500\` -// tw\`decoration-neutral-600\` -// tw\`decoration-neutral-700\` -// tw\`decoration-neutral-800\` -// tw\`decoration-neutral-900\` -// tw\`decoration-stone-50\` -// tw\`decoration-stone-100\` -// tw\`decoration-stone-200\` -// tw\`decoration-stone-300\` -// tw\`decoration-stone-400\` -// tw\`decoration-stone-500\` -// tw\`decoration-stone-600\` -// tw\`decoration-stone-700\` -// tw\`decoration-stone-800\` -// tw\`decoration-stone-900\` -// tw\`decoration-red-50\` -// tw\`decoration-red-100\` -// tw\`decoration-red-200\` -// tw\`decoration-red-300\` -// tw\`decoration-red-400\` -// tw\`decoration-red-500\` -// tw\`decoration-red-600\` -// tw\`decoration-red-700\` -// tw\`decoration-red-800\` -// tw\`decoration-red-900\` -// tw\`decoration-orange-50\` -// tw\`decoration-orange-100\` -// tw\`decoration-orange-200\` -// tw\`decoration-orange-300\` -// tw\`decoration-orange-400\` -// tw\`decoration-orange-500\` -// tw\`decoration-orange-600\` -// tw\`decoration-orange-700\` -// tw\`decoration-orange-800\` -// tw\`decoration-orange-900\` -// tw\`decoration-amber-50\` -// tw\`decoration-amber-100\` -// tw\`decoration-amber-200\` -// tw\`decoration-amber-300\` -// tw\`decoration-amber-400\` -// tw\`decoration-amber-500\` -// tw\`decoration-amber-600\` -// tw\`decoration-amber-700\` -// tw\`decoration-amber-800\` -// tw\`decoration-amber-900\` -// tw\`decoration-yellow-50\` -// tw\`decoration-yellow-100\` -// tw\`decoration-yellow-200\` -// tw\`decoration-yellow-300\` -// tw\`decoration-yellow-400\` -// tw\`decoration-yellow-500\` -// tw\`decoration-yellow-600\` -// tw\`decoration-yellow-700\` -// tw\`decoration-yellow-800\` -// tw\`decoration-yellow-900\` -// tw\`decoration-lime-50\` -// tw\`decoration-lime-100\` -// tw\`decoration-lime-200\` -// tw\`decoration-lime-300\` -// tw\`decoration-lime-400\` -// tw\`decoration-lime-500\` -// tw\`decoration-lime-600\` -// tw\`decoration-lime-700\` -// tw\`decoration-lime-800\` -// tw\`decoration-lime-900\` -// tw\`decoration-green-50\` -// tw\`decoration-green-100\` -// tw\`decoration-green-200\` -// tw\`decoration-green-300\` -// tw\`decoration-green-400\` -// tw\`decoration-green-500\` -// tw\`decoration-green-600\` -// tw\`decoration-green-700\` -// tw\`decoration-green-800\` -// tw\`decoration-green-900\` -// tw\`decoration-emerald-50\` -// tw\`decoration-emerald-100\` -// tw\`decoration-emerald-200\` -// tw\`decoration-emerald-300\` -// tw\`decoration-emerald-400\` -// tw\`decoration-emerald-500\` -// tw\`decoration-emerald-600\` -// tw\`decoration-emerald-700\` -// tw\`decoration-emerald-800\` -// tw\`decoration-emerald-900\` -// tw\`decoration-teal-50\` -// tw\`decoration-teal-100\` -// tw\`decoration-teal-200\` -// tw\`decoration-teal-300\` -// tw\`decoration-teal-400\` -// tw\`decoration-teal-500\` -// tw\`decoration-teal-600\` -// tw\`decoration-teal-700\` -// tw\`decoration-teal-800\` -// tw\`decoration-teal-900\` -// tw\`decoration-cyan-50\` -// tw\`decoration-cyan-100\` -// tw\`decoration-cyan-200\` -// tw\`decoration-cyan-300\` -// tw\`decoration-cyan-400\` -// tw\`decoration-cyan-500\` -// tw\`decoration-cyan-600\` -// tw\`decoration-cyan-700\` -// tw\`decoration-cyan-800\` -// tw\`decoration-cyan-900\` -// tw\`decoration-sky-50\` -// tw\`decoration-sky-100\` -// tw\`decoration-sky-200\` -// tw\`decoration-sky-300\` -// tw\`decoration-sky-400\` -// tw\`decoration-sky-500\` -// tw\`decoration-sky-600\` -// tw\`decoration-sky-700\` -// tw\`decoration-sky-800\` -// tw\`decoration-sky-900\` -// tw\`decoration-blue-50\` -// tw\`decoration-blue-100\` -// tw\`decoration-blue-200\` -// tw\`decoration-blue-300\` -// tw\`decoration-blue-400\` -// tw\`decoration-blue-500\` -// tw\`decoration-blue-600\` -// tw\`decoration-blue-700\` -// tw\`decoration-blue-800\` -// tw\`decoration-blue-900\` -// tw\`decoration-indigo-50\` -// tw\`decoration-indigo-100\` -// tw\`decoration-indigo-200\` -// tw\`decoration-indigo-300\` -// tw\`decoration-indigo-400\` -// tw\`decoration-indigo-500\` -// tw\`decoration-indigo-600\` -// tw\`decoration-indigo-700\` -// tw\`decoration-indigo-800\` -// tw\`decoration-indigo-900\` -// tw\`decoration-violet-50\` -// tw\`decoration-violet-100\` -// tw\`decoration-violet-200\` -// tw\`decoration-violet-300\` -// tw\`decoration-violet-400\` -// tw\`decoration-violet-500\` -// tw\`decoration-violet-600\` -// tw\`decoration-violet-700\` -// tw\`decoration-violet-800\` -// tw\`decoration-violet-900\` -// tw\`decoration-purple-50\` -// tw\`decoration-purple-100\` -// tw\`decoration-purple-200\` -// tw\`decoration-purple-300\` -// tw\`decoration-purple-400\` -// tw\`decoration-purple-500\` -// tw\`decoration-purple-600\` -// tw\`decoration-purple-700\` -// tw\`decoration-purple-800\` -// tw\`decoration-purple-900\` -// tw\`decoration-fuchsia-50\` -// tw\`decoration-fuchsia-100\` -// tw\`decoration-fuchsia-200\` -// tw\`decoration-fuchsia-300\` -// tw\`decoration-fuchsia-400\` -// tw\`decoration-fuchsia-500\` -// tw\`decoration-fuchsia-600\` -// tw\`decoration-fuchsia-700\` -// tw\`decoration-fuchsia-800\` -// tw\`decoration-fuchsia-900\` -// tw\`decoration-pink-50\` -// tw\`decoration-pink-100\` -// tw\`decoration-pink-200\` -// tw\`decoration-pink-300\` -// tw\`decoration-pink-400\` -// tw\`decoration-pink-500\` -// tw\`decoration-pink-600\` -// tw\`decoration-pink-700\` -// tw\`decoration-pink-800\` -// tw\`decoration-pink-900\` -// tw\`decoration-rose-50\` -// tw\`decoration-rose-100\` -// tw\`decoration-rose-200\` -// tw\`decoration-rose-300\` -// tw\`decoration-rose-400\` -// tw\`decoration-rose-500\` -// tw\`decoration-rose-600\` -// tw\`decoration-rose-700\` -// tw\`decoration-rose-800\` -// tw\`decoration-rose-900\` -// tw\`decoration-sky-500/50\` -// tw\`decoration-sky-500/[.5]\` -// tw\`decoration-[#50d71e]\` +}) +;({ + textDecorationColor: 'inherit', +}) +;({ + textDecorationColor: 'currentColor', +}) +;({ + textDecorationColor: 'transparent', +}) +;({ + textDecorationColor: '#000', +}) +;({ + textDecorationColor: '#fff', +}) +;({ + textDecorationColor: '#f8fafc', +}) +;({ + textDecorationColor: '#f1f5f9', +}) +;({ + textDecorationColor: '#e2e8f0', +}) +;({ + textDecorationColor: '#cbd5e1', +}) +;({ + textDecorationColor: '#94a3b8', +}) +;({ + textDecorationColor: '#64748b', +}) +;({ + textDecorationColor: '#475569', +}) +;({ + textDecorationColor: '#334155', +}) +;({ + textDecorationColor: '#1e293b', +}) +;({ + textDecorationColor: '#0f172a', +}) +;({ + textDecorationColor: '#f9fafb', +}) +;({ + textDecorationColor: '#f3f4f6', +}) +;({ + textDecorationColor: '#e5e7eb', +}) +;({ + textDecorationColor: '#d1d5db', +}) +;({ + textDecorationColor: '#9ca3af', +}) +;({ + textDecorationColor: '#6b7280', +}) +;({ + textDecorationColor: '#4b5563', +}) +;({ + textDecorationColor: '#374151', +}) +;({ + textDecorationColor: '#1f2937', +}) +;({ + textDecorationColor: '#111827', +}) +;({ + textDecorationColor: '#fafafa', +}) +;({ + textDecorationColor: '#f4f4f5', +}) +;({ + textDecorationColor: '#e4e4e7', +}) +;({ + textDecorationColor: '#d4d4d8', +}) +;({ + textDecorationColor: '#a1a1aa', +}) +;({ + textDecorationColor: '#71717a', +}) +;({ + textDecorationColor: '#52525b', +}) +;({ + textDecorationColor: '#3f3f46', +}) +;({ + textDecorationColor: '#27272a', +}) +;({ + textDecorationColor: '#18181b', +}) +;({ + textDecorationColor: '#fafafa', +}) +;({ + textDecorationColor: '#f5f5f5', +}) +;({ + textDecorationColor: '#e5e5e5', +}) +;({ + textDecorationColor: '#d4d4d4', +}) +;({ + textDecorationColor: '#a3a3a3', +}) +;({ + textDecorationColor: '#737373', +}) +;({ + textDecorationColor: '#525252', +}) +;({ + textDecorationColor: '#404040', +}) +;({ + textDecorationColor: '#262626', +}) +;({ + textDecorationColor: '#171717', +}) +;({ + textDecorationColor: '#fafaf9', +}) +;({ + textDecorationColor: '#f5f5f4', +}) +;({ + textDecorationColor: '#e7e5e4', +}) +;({ + textDecorationColor: '#d6d3d1', +}) +;({ + textDecorationColor: '#a8a29e', +}) +;({ + textDecorationColor: '#78716c', +}) +;({ + textDecorationColor: '#57534e', +}) +;({ + textDecorationColor: '#44403c', +}) +;({ + textDecorationColor: '#292524', +}) +;({ + textDecorationColor: '#1c1917', +}) +;({ + textDecorationColor: '#fef2f2', +}) +;({ + textDecorationColor: '#fee2e2', +}) +;({ + textDecorationColor: '#fecaca', +}) +;({ + textDecorationColor: '#fca5a5', +}) +;({ + textDecorationColor: '#f87171', +}) +;({ + textDecorationColor: '#ef4444', +}) +;({ + textDecorationColor: '#dc2626', +}) +;({ + textDecorationColor: '#b91c1c', +}) +;({ + textDecorationColor: '#991b1b', +}) +;({ + textDecorationColor: '#7f1d1d', +}) +;({ + textDecorationColor: '#fff7ed', +}) +;({ + textDecorationColor: '#ffedd5', +}) +;({ + textDecorationColor: '#fed7aa', +}) +;({ + textDecorationColor: '#fdba74', +}) +;({ + textDecorationColor: '#fb923c', +}) +;({ + textDecorationColor: '#f97316', +}) +;({ + textDecorationColor: '#ea580c', +}) +;({ + textDecorationColor: '#c2410c', +}) +;({ + textDecorationColor: '#9a3412', +}) +;({ + textDecorationColor: '#7c2d12', +}) +;({ + textDecorationColor: '#fffbeb', +}) +;({ + textDecorationColor: '#fef3c7', +}) +;({ + textDecorationColor: '#fde68a', +}) +;({ + textDecorationColor: '#fcd34d', +}) +;({ + textDecorationColor: '#fbbf24', +}) +;({ + textDecorationColor: '#f59e0b', +}) +;({ + textDecorationColor: '#d97706', +}) +;({ + textDecorationColor: '#b45309', +}) +;({ + textDecorationColor: '#92400e', +}) +;({ + textDecorationColor: '#78350f', +}) +;({ + textDecorationColor: '#fefce8', +}) +;({ + textDecorationColor: '#fef9c3', +}) +;({ + textDecorationColor: '#fef08a', +}) +;({ + textDecorationColor: '#fde047', +}) +;({ + textDecorationColor: '#facc15', +}) +;({ + textDecorationColor: '#eab308', +}) +;({ + textDecorationColor: '#ca8a04', +}) +;({ + textDecorationColor: '#a16207', +}) +;({ + textDecorationColor: '#854d0e', +}) +;({ + textDecorationColor: '#713f12', +}) +;({ + textDecorationColor: '#f7fee7', +}) +;({ + textDecorationColor: '#ecfccb', +}) +;({ + textDecorationColor: '#d9f99d', +}) +;({ + textDecorationColor: '#bef264', +}) +;({ + textDecorationColor: '#a3e635', +}) +;({ + textDecorationColor: '#84cc16', +}) +;({ + textDecorationColor: '#65a30d', +}) +;({ + textDecorationColor: '#4d7c0f', +}) +;({ + textDecorationColor: '#3f6212', +}) +;({ + textDecorationColor: '#365314', +}) +;({ + textDecorationColor: '#f0fdf4', +}) +;({ + textDecorationColor: '#dcfce7', +}) +;({ + textDecorationColor: '#bbf7d0', +}) +;({ + textDecorationColor: '#86efac', +}) +;({ + textDecorationColor: '#4ade80', +}) +;({ + textDecorationColor: '#22c55e', +}) +;({ + textDecorationColor: '#16a34a', +}) +;({ + textDecorationColor: '#15803d', +}) +;({ + textDecorationColor: '#166534', +}) +;({ + textDecorationColor: '#14532d', +}) +;({ + textDecorationColor: '#ecfdf5', +}) +;({ + textDecorationColor: '#d1fae5', +}) +;({ + textDecorationColor: '#a7f3d0', +}) +;({ + textDecorationColor: '#6ee7b7', +}) +;({ + textDecorationColor: '#34d399', +}) +;({ + textDecorationColor: '#10b981', +}) +;({ + textDecorationColor: '#059669', +}) +;({ + textDecorationColor: '#047857', +}) +;({ + textDecorationColor: '#065f46', +}) +;({ + textDecorationColor: '#064e3b', +}) +;({ + textDecorationColor: '#f0fdfa', +}) +;({ + textDecorationColor: '#ccfbf1', +}) +;({ + textDecorationColor: '#99f6e4', +}) +;({ + textDecorationColor: '#5eead4', +}) +;({ + textDecorationColor: '#2dd4bf', +}) +;({ + textDecorationColor: '#14b8a6', +}) +;({ + textDecorationColor: '#0d9488', +}) +;({ + textDecorationColor: '#0f766e', +}) +;({ + textDecorationColor: '#115e59', +}) +;({ + textDecorationColor: '#134e4a', +}) +;({ + textDecorationColor: '#ecfeff', +}) +;({ + textDecorationColor: '#cffafe', +}) +;({ + textDecorationColor: '#a5f3fc', +}) +;({ + textDecorationColor: '#67e8f9', +}) +;({ + textDecorationColor: '#22d3ee', +}) +;({ + textDecorationColor: '#06b6d4', +}) +;({ + textDecorationColor: '#0891b2', +}) +;({ + textDecorationColor: '#0e7490', +}) +;({ + textDecorationColor: '#155e75', +}) +;({ + textDecorationColor: '#164e63', +}) +;({ + textDecorationColor: '#f0f9ff', +}) +;({ + textDecorationColor: '#e0f2fe', +}) +;({ + textDecorationColor: '#bae6fd', +}) +;({ + textDecorationColor: '#7dd3fc', +}) +;({ + textDecorationColor: '#38bdf8', +}) +;({ + textDecorationColor: '#0ea5e9', +}) +;({ + textDecorationColor: '#0284c7', +}) +;({ + textDecorationColor: '#0369a1', +}) +;({ + textDecorationColor: '#075985', +}) +;({ + textDecorationColor: '#0c4a6e', +}) +;({ + textDecorationColor: '#eff6ff', +}) +;({ + textDecorationColor: '#dbeafe', +}) +;({ + textDecorationColor: '#bfdbfe', +}) +;({ + textDecorationColor: '#93c5fd', +}) +;({ + textDecorationColor: '#60a5fa', +}) +;({ + textDecorationColor: '#3b82f6', +}) +;({ + textDecorationColor: '#2563eb', +}) +;({ + textDecorationColor: '#1d4ed8', +}) +;({ + textDecorationColor: '#1e40af', +}) +;({ + textDecorationColor: '#1e3a8a', +}) +;({ + textDecorationColor: '#eef2ff', +}) +;({ + textDecorationColor: '#e0e7ff', +}) +;({ + textDecorationColor: '#c7d2fe', +}) +;({ + textDecorationColor: '#a5b4fc', +}) +;({ + textDecorationColor: '#818cf8', +}) +;({ + textDecorationColor: '#6366f1', +}) +;({ + textDecorationColor: '#4f46e5', +}) +;({ + textDecorationColor: '#4338ca', +}) +;({ + textDecorationColor: '#3730a3', +}) +;({ + textDecorationColor: '#312e81', +}) +;({ + textDecorationColor: '#f5f3ff', +}) +;({ + textDecorationColor: '#ede9fe', +}) +;({ + textDecorationColor: '#ddd6fe', +}) +;({ + textDecorationColor: '#c4b5fd', +}) +;({ + textDecorationColor: '#a78bfa', +}) +;({ + textDecorationColor: '#8b5cf6', +}) +;({ + textDecorationColor: '#7c3aed', +}) +;({ + textDecorationColor: '#6d28d9', +}) +;({ + textDecorationColor: '#5b21b6', +}) +;({ + textDecorationColor: '#4c1d95', +}) +;({ + textDecorationColor: '#faf5ff', +}) +;({ + textDecorationColor: '#f3e8ff', +}) +;({ + textDecorationColor: '#e9d5ff', +}) +;({ + textDecorationColor: '#d8b4fe', +}) +;({ + textDecorationColor: '#c084fc', +}) +;({ + textDecorationColor: '#a855f7', +}) +;({ + textDecorationColor: '#9333ea', +}) +;({ + textDecorationColor: '#7e22ce', +}) +;({ + textDecorationColor: '#6b21a8', +}) +;({ + textDecorationColor: '#581c87', +}) +;({ + textDecorationColor: '#fdf4ff', +}) +;({ + textDecorationColor: '#fae8ff', +}) +;({ + textDecorationColor: '#f5d0fe', +}) +;({ + textDecorationColor: '#f0abfc', +}) +;({ + textDecorationColor: '#e879f9', +}) +;({ + textDecorationColor: '#d946ef', +}) +;({ + textDecorationColor: '#c026d3', +}) +;({ + textDecorationColor: '#a21caf', +}) +;({ + textDecorationColor: '#86198f', +}) +;({ + textDecorationColor: '#701a75', +}) +;({ + textDecorationColor: '#fdf2f8', +}) +;({ + textDecorationColor: '#fce7f3', +}) +;({ + textDecorationColor: '#fbcfe8', +}) +;({ + textDecorationColor: '#f9a8d4', +}) +;({ + textDecorationColor: '#f472b6', +}) +;({ + textDecorationColor: '#ec4899', +}) +;({ + textDecorationColor: '#db2777', +}) +;({ + textDecorationColor: '#be185d', +}) +;({ + textDecorationColor: '#9d174d', +}) +;({ + textDecorationColor: '#831843', +}) +;({ + textDecorationColor: '#fff1f2', +}) +;({ + textDecorationColor: '#ffe4e6', +}) +;({ + textDecorationColor: '#fecdd3', +}) +;({ + textDecorationColor: '#fda4af', +}) +;({ + textDecorationColor: '#fb7185', +}) +;({ + textDecorationColor: '#f43f5e', +}) +;({ + textDecorationColor: '#e11d48', +}) +;({ + textDecorationColor: '#be123c', +}) +;({ + textDecorationColor: '#9f1239', +}) +;({ + textDecorationColor: '#881337', +}) +;({ + textDecorationColor: '#dc2626', +}) +;({ + textDecorationColor: '#50d71e', +}) +;({ + textDecorationColor: 'black', +}) +;({ + textDecorationColor: 'rgb(123,123,123)', +}) +;({ + textDecorationColor: 'rgb(123, 123, 123)', +}) +;({ + textDecorationColor: 'rgb(123 123 123)', +}) +;({ + textDecorationColor: 'rgb(123 123 123 / 0.2)', +}) +;({ + textDecorationColor: 'rgb(123 123 123 / 20)', +}) +;({ + textDecorationColor: '#50d71e', +}) +;({ + textDecorationColor: 'var(--color)', +}) +;({ + textDecorationColor: 'var(--color)', +}) + + +`; + +exports[`twin.macro textDecorationStyle.js: textDecorationStyle.js 1`] = ` + +import tw from './macro' + +// https://tailwindcss.com/docs/text-decoration-style +tw\`decoration-solid\` +tw\`decoration-double\` +tw\`decoration-dotted\` +tw\`decoration-dashed\` +tw\`decoration-wavy\` + + ↓ ↓ ↓ ↓ ↓ ↓ + +// https://tailwindcss.com/docs/text-decoration-style +;({ + textDecorationStyle: 'solid', +}) +;({ + textDecorationStyle: 'double', +}) +;({ + textDecorationStyle: 'dotted', +}) +;({ + textDecorationStyle: 'dashed', +}) +;({ + textDecorationStyle: 'wavy', +}) + + +`; + +exports[`twin.macro textDecorationThickness.js: textDecorationThickness.js 1`] = ` + +import tw, { theme } from './macro' + +// https://tailwindcss.com/docs/text-decoration-thickness +theme\`textDecorationThickness\` + +tw\`decoration-auto\` +tw\`decoration-from-font\` +tw\`decoration-0\` +tw\`decoration-1\` +tw\`decoration-2\` +tw\`decoration-4\` +tw\`decoration-8\` + +tw\`decoration-[length:10px]\`; +tw\`decoration-[percentage:10%]\`; + + ↓ ↓ ↓ ↓ ↓ ↓ + +// https://tailwindcss.com/docs/text-decoration-thickness +;({ + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + auto: 'auto', + 'from-font': 'from-font', +}) +;({ + textDecorationThickness: 'auto', +}) +;({ + textDecorationThickness: 'from-font', +}) +;({ + textDecorationThickness: '0px', +}) +;({ + textDecorationThickness: '1px', +}) +;({ + textDecorationThickness: '2px', +}) +;({ + textDecorationThickness: '4px', +}) +;({ + textDecorationThickness: '8px', +}) +;({ + textDecorationThickness: '10px', +}) +;({ + textDecorationThickness: '10%', +}) `; @@ -53155,6 +53753,70 @@ tw\`normal-case\` }) +`; + +exports[`twin.macro textUnderlineOffset.js: textUnderlineOffset.js 1`] = ` + +import tw, { theme } from './macro' + +// https://tailwindcss.com/docs/text-underline-offset +theme\`textUnderlineOffset\` + +tw\`underline-offset-auto\`; +tw\`underline-offset-0\`; +tw\`underline-offset-1\`; +tw\`underline-offset-2\`; +tw\`underline-offset-4\`; +tw\`underline-offset-8\`; + +tw\`underline-offset-[3px]\`; +tw\`underline-offset-[length:3px]\`; +tw\`underline-offset-[30%]\`; +tw\`underline-offset-[percentage:30%]\`; + + ↓ ↓ ↓ ↓ ↓ ↓ + +// https://tailwindcss.com/docs/text-underline-offset +;({ + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + auto: 'auto', +}) +;({ + textUnderlineOffset: 'auto', +}) +;({ + textUnderlineOffset: '0px', +}) +;({ + textUnderlineOffset: '1px', +}) +;({ + textUnderlineOffset: '2px', +}) +;({ + textUnderlineOffset: '4px', +}) +;({ + textUnderlineOffset: '8px', +}) +;({ + textUnderlineOffset: '3px', +}) +;({ + textUnderlineOffset: '3px', +}) +;({ + textUnderlineOffset: '30%', +}) +;({ + textUnderlineOffset: '30%', +}) + + `; exports[`twin.macro topRightBottomLeft.js: topRightBottomLeft.js 1`] = ` diff --git a/src/coerced.js b/src/coerced.js index d72305dc..edd7e8f7 100644 --- a/src/coerced.js +++ b/src/coerced.js @@ -194,46 +194,26 @@ const getCoercedValue = (customValue, context) => { return result } -const getCoercedColor = ({ - pieces, - theme, - config, - matchConfig, -}) => configKey => { - if (!config) return - - // Match config including a custom slash alpha, eg: bg-black/[.5] - const keys = Array.isArray(configKey) ? configKey : [configKey] - let value - keys.find(k => { - const match = matchConfig(k.config || k.property || k) - if (match) value = match - return match - }) - if (!value) return - return coercedTypeMap.color({ - value, - config, - pieces, - theme, - forceReturn: true, - }) -} +const getCoerced = ({ pieces, theme, config, matchConfig }) => type => { + const coercedConfig = config && config[type] + if (!coercedConfig) return -const getCoercedLength = ({ - pieces, - theme, - config, - matchConfig, -}) => configKey => { - const value = matchConfig(configKey.config || configKey.property || configKey) + const value = matchConfig( + coercedConfig.config || coercedConfig.property || coercedConfig + ) if (!value) return - throwIf(pieces.hasAlpha, () => + throwIf(!['color', 'any'].includes(type) && pieces.hasAlpha, () => opacityErrorNotFound({ className: pieces.classNameRaw }) ) - return coercedTypeMap.length({ value, config, pieces, theme }) + return coercedTypeMap[type]({ + value, + config: coercedConfig, + pieces, + theme, + forceReturn: true, + }) } -export { coercedTypeMap, getCoercedValue, getCoercedColor, getCoercedLength } +export { coercedTypeMap, getCoercedValue, getCoerced } diff --git a/src/config/dynamicStyles.js b/src/config/dynamicStyles.js index 944d4a0c..d5f8a5d4 100644 --- a/src/config/dynamicStyles.js +++ b/src/config/dynamicStyles.js @@ -134,6 +134,7 @@ export default { coerced: { color: { property: 'borderColor', + config: 'divideColor', variable: '--tw-divide-opacity', wrapWith: '> :not([hidden]) ~ :not([hidden])', }, @@ -320,10 +321,12 @@ export default { property: 'color', variable: '--tw-placeholder-opacity', wrapWith: '::placeholder', + config: 'placeholderColor', }, any: { property: 'color', wrapWith: '::placeholder', + config: 'placeholderColor', }, }, }, @@ -342,7 +345,11 @@ export default { value: ['color', 'absolute-size', 'relative-size', 'length', 'percentage'], plugin: 'text', coerced: { - color: { property: 'color', variable: '--tw-text-opacity' }, + color: { + property: 'color', + variable: '--tw-text-opacity', + config: 'textColor', + }, 'absolute-size': { property: 'fontSize' }, 'relative-size': { property: 'fontSize' }, length: { property: 'fontSize' }, @@ -350,6 +357,34 @@ export default { }, }, // https://tailwindcss.com/docs/text-decoration + // See staticStyles.js + + // https://tailwindcss.com/docs/text-decoration-color + // https://tailwindcss.com/docs/text-decoration-thickness + decoration: { + value: ['color', 'length', 'percentage', 'any'], + prop: 'textDecorationColor', + plugin: 'decoration', + coerced: { + color: { property: 'textDecorationColor' }, + length: { property: 'textDecorationThickness' }, + percentage: { property: 'textDecorationThickness' }, + any: { property: 'textDecorationThickness' }, + }, + }, + + // https://tailwindcss.com/docs/text-underline-offset + 'underline-offset': { + value: ['length', 'percentage'], + prop: 'textUnderlineOffset', + config: 'textUnderlineOffset', + coerced: { + length: { property: 'textUnderlineOffset' }, + percentage: { property: 'textUnderlineOffset' }, + }, + }, + + // https://tailwindcss.com/docs/text-decoration-style // https://tailwindcss.com/docs/text-transform // https://tailwindcss.com/docs/text-overflow // See staticStyles.js @@ -410,8 +445,9 @@ export default { coerced: { color: (value, { withAlpha }) => ({ '--tw-gradient-from': withAlpha(value) || value, - '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${withAlpha(value, '0', 'rgb(255 255 255 / 0)') || value - })`, + '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${ + withAlpha(value, '0', 'rgb(255 255 255 / 0)') || value + })`, }), }, }, @@ -420,12 +456,13 @@ export default { value: ['color'], coerced: { color: (value, { withAlpha }) => ({ - '--tw-gradient-stops': `var(--tw-gradient-from), ${withAlpha(value) || value - }, var(--tw-gradient-to, ${withAlpha( - value, - '0', - 'rgb(255 255 255 / 0)' - )})`, + '--tw-gradient-stops': `var(--tw-gradient-from), ${ + withAlpha(value) || value + }, var(--tw-gradient-to, ${withAlpha( + value, + '0', + 'rgb(255 255 255 / 0)' + )})`, }), }, }, @@ -591,7 +628,7 @@ export default { value: ['length', 'color'], plugin: 'ringOffset', coerced: { - color: { property: '--tw-ring-offset-color' }, + color: { property: '--tw-ring-offset-color', config: 'ringOffsetColor' }, length: { property: '--tw-ring-offset-width' }, }, }, @@ -602,7 +639,11 @@ export default { plugin: 'ring', value: ['color', 'length'], coerced: { - color: { property: '--tw-ring-color', variable: '--tw-ring-opacity' }, + color: { + property: '--tw-ring-color', + variable: '--tw-ring-opacity', + config: 'ringColor', + }, length: value => ({ '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', @@ -924,7 +965,12 @@ export default { // https://tailwindcss.com/docs/accent-color accent: { - plugin: 'accentColor', + plugin: properties => { + const coercedColor = properties.getCoerced('color') + if (coercedColor) return coercedColor + + return properties.errors.errorSuggestions({ config: 'accentColor' }) + }, prop: 'accentColor', value: ['color', 'any'], coerced: { diff --git a/src/config/staticStyles.js b/src/config/staticStyles.js index 210dc452..ce295887 100644 --- a/src/config/staticStyles.js +++ b/src/config/staticStyles.js @@ -48,8 +48,10 @@ export default { 'break-inside-avoid-column': { output: { breakInside: 'avoid-column' } }, // https://tailwindcss.com/docs/box-decoration-break - 'decoration-slice': { output: { boxDecorationBreak: 'slice' } }, - 'decoration-clone': { output: { boxDecorationBreak: 'clone' } }, + 'decoration-slice': { output: { boxDecorationBreak: 'slice' } }, // Deprecated + 'decoration-clone': { output: { boxDecorationBreak: 'clone' } }, // Deprecated + 'box-decoration-slice': { output: { boxDecorationBreak: 'slice' } }, + 'box-decoration-clone': { output: { boxDecorationBreak: 'clone' } }, // https://tailwindcss.com/docs/box-sizing 'box-border': { output: { boxSizing: 'border-box' } }, @@ -446,6 +448,20 @@ export default { 'line-through': { output: { textDecorationLine: 'line-through' } }, 'no-underline': { output: { textDecorationLine: 'none' } }, + // https://tailwindcss.com/docs/text-decoration-color + // See dynamicStyles.js + + // https://tailwindcss.com/docs/text-decoration-style + 'decoration-solid': { output: { textDecorationStyle: 'solid' } }, + 'decoration-double': { output: { textDecorationStyle: 'double' } }, + 'decoration-dotted': { output: { textDecorationStyle: 'dotted' } }, + 'decoration-dashed': { output: { textDecorationStyle: 'dashed' } }, + 'decoration-wavy': { output: { textDecorationStyle: 'wavy' } }, + + // https://tailwindcss.com/docs/text-decoration-thickness + // https://tailwindcss.com/docs/text-underline-offset + // See dynamicStyles.js + // https://tailwindcss.com/docs/text-transform uppercase: { output: { textTransform: 'uppercase' } }, lowercase: { output: { textTransform: 'lowercase' } }, diff --git a/src/handlers/corePlugins.js b/src/handlers/corePlugins.js index 8e4eb227..9bdf113d 100644 --- a/src/handlers/corePlugins.js +++ b/src/handlers/corePlugins.js @@ -6,7 +6,7 @@ import { getColor } from './../utils/color' /* eslint import/namespace: [2, { allowComputed: true }] */ /* eslint-disable-next-line unicorn/import-index */ import * as plugins from '../plugins/index' -import { getCoercedColor, getCoercedLength } from './../coerced' +import { getCoerced } from './../coerced' const getErrors = ({ pieces, state, dynamicKey }) => { const { className, variants } = pieces @@ -46,6 +46,10 @@ const getErrors = ({ pieces, state, dynamicKey }) => { } const callPlugin = (corePlugin, context) => { + if (typeof corePlugin === 'function') { + return corePlugin(context) + } + const handle = plugins[corePlugin] || null if (!handle) { throw new MacroError(`No handler specified, looked for "${corePlugin}"`) @@ -54,23 +58,15 @@ const callPlugin = (corePlugin, context) => { return handle(context) } -// TODO: Deprecate -const getMatchConfigValue = ({ match, theme, getConfigValue }) => ( - config, - regexMatch -) => { +// Legacy +const getMatchConfigValue = ({ match, theme }) => (config, regexMatch) => { const matcher = match(regexMatch) if (matcher === undefined) return return getConfigValue(theme(config), matcher) } // Direct match -const getMatchConfig = ({ - match, - theme, - getConfigValue, - dynamicKey, -}) => config => { +const getMatchConfig = ({ match, theme, dynamicKey }) => config => { const directMatch = match(`(?<=${dynamicKey}(-|$))(.)*`) if (directMatch === undefined) return @@ -95,13 +91,8 @@ export default ({ return result } - const matchConfigValue = getMatchConfigValue({ match, theme, getConfigValue }) - const matchConfig = getMatchConfig({ - match, - theme, - getConfigValue, - dynamicKey, - }) + const matchConfigValue = getMatchConfigValue({ match, theme }) + const matchConfig = getMatchConfig({ match, theme, dynamicKey }) const toColor = getColor({ theme, @@ -121,18 +112,12 @@ export default ({ toColor, configTwin, getConfigValue, - matchConfigValue, // TODO: Deprecate + matchConfigValue, // Legacy matchConfig, dynamicKey, dynamicConfig, - getCoercedColor: getCoercedColor({ - config: coercedConfig.color, - pieces, - theme, - matchConfig, - }), - getCoercedLength: getCoercedLength({ - config: coercedConfig.length, + getCoerced: getCoerced({ + config: coercedConfig, pieces, theme, matchConfig, diff --git a/src/logging.js b/src/logging.js index 8319401b..7ce62416 100644 --- a/src/logging.js +++ b/src/logging.js @@ -216,12 +216,11 @@ const themeErrorNotFound = ({ theme, input, trimInput }) => { return spaced(`${textNotFound}\n\n${suggestionText}`) } -const opacityErrorNotFound = ({ className }) => { - const textNotFound = warning( - `The class ${color.errorLight(className)} doesn’t support an opacity` +const opacityErrorNotFound = ({ className }) => + logBadGood( + `The class \`${className}\` had an unsupported slash opacity`, + `Remove the opacity from the end of the class` ) - return spaced(textNotFound) -} const logNotFoundVariant = ({ classNameRaw }) => logBadGood( diff --git a/src/plugins/accentColor.js b/src/plugins/accentColor.js deleted file mode 100644 index 3fa94ea6..00000000 --- a/src/plugins/accentColor.js +++ /dev/null @@ -1,6 +0,0 @@ -export default properties => { - const coercedColor = properties.getCoercedColor('accentColor') - if (coercedColor) return coercedColor - - return properties.errors.errorSuggestions({ config: 'accentColor' }) -} diff --git a/src/plugins/bg.js b/src/plugins/bg.js index a82288f2..2b0dbdd0 100644 --- a/src/plugins/bg.js +++ b/src/plugins/bg.js @@ -24,12 +24,12 @@ export default properties => { theme, match, getConfigValue, - getCoercedColor, + getCoerced, errors: { errorSuggestions }, pieces: { important }, } = properties - const coercedColor = getCoercedColor('backgroundColor') + const coercedColor = getCoerced('color') if (coercedColor) return coercedColor const classValue = match(/(?<=(bg)-)([^]*)/) diff --git a/src/plugins/border.js b/src/plugins/border.js index 6a377827..e35b2897 100644 --- a/src/plugins/border.js +++ b/src/plugins/border.js @@ -1,15 +1,14 @@ export default properties => { const { - getCoercedLength, - getCoercedColor, + getCoerced, errors: { errorSuggestions }, dynamicConfig: { coerced }, } = properties - const coercedLength = getCoercedLength(coerced.length) + const coercedLength = getCoerced('length') if (coercedLength) return coercedLength - const coercedColor = getCoercedColor(coerced.color) + const coercedColor = getCoerced('color') if (coercedColor) return coercedColor errorSuggestions({ config: Object.values(coerced).map(v => v.property) }) diff --git a/src/plugins/caretColor.js b/src/plugins/caretColor.js index 7b3e69aa..a08b21ea 100644 --- a/src/plugins/caretColor.js +++ b/src/plugins/caretColor.js @@ -1,5 +1,5 @@ export default properties => { - const coercedColor = properties.getCoercedColor('caretColor') + const coercedColor = properties.getCoerced('color') if (!coercedColor) properties.errors.errorSuggestions({ config: 'caretColor' }) diff --git a/src/plugins/decoration.js b/src/plugins/decoration.js new file mode 100644 index 00000000..dbad4ea2 --- /dev/null +++ b/src/plugins/decoration.js @@ -0,0 +1,24 @@ +export default properties => { + const { + getCoerced, + dynamicConfig: { coerced }, + pieces: { hasNegative }, + errors: { errorSuggestions, errorNoNegatives }, + } = properties + + hasNegative && errorNoNegatives() + + const coercedColor = getCoerced('color') + if (coercedColor) return coercedColor + + const coercedLength = getCoerced('length') + if (coercedLength) return coercedLength + + const coercedPercentage = getCoerced('percentage') + if (coercedPercentage) return coercedPercentage + + const coercedAny = getCoerced('any') + if (coercedAny) return coercedAny + + errorSuggestions({ config: [coerced.length, coerced.color] }) +} diff --git a/src/plugins/divide.js b/src/plugins/divide.js index a4e2ab51..aef8d638 100644 --- a/src/plugins/divide.js +++ b/src/plugins/divide.js @@ -40,12 +40,12 @@ export default properties => { const { errors: { errorSuggestions }, getConfigValue, - getCoercedColor, + getCoerced, theme, match, } = properties - const coercedColor = getCoercedColor(['divideColor', 'borderColor', 'colors']) + const coercedColor = getCoerced('color') if (coercedColor) return coercedColor const opacityMatch = diff --git a/src/plugins/fill.js b/src/plugins/fill.js index 36d735ed..c61de508 100644 --- a/src/plugins/fill.js +++ b/src/plugins/fill.js @@ -1,5 +1,5 @@ export default properties => { - const coercedColor = properties.getCoercedColor('fill') + const coercedColor = properties.getCoerced('color') if (!coercedColor) properties.errors.errorSuggestions({ config: 'fill' }) return coercedColor diff --git a/src/plugins/index.js b/src/plugins/index.js index 29070eed..1bad30b2 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,4 +1,3 @@ -export { default as accentColor } from './accentColor' export { default as animation } from './animation' export { default as backdropBlur } from './backdropBlur' export { default as backdropBrightness } from './backdropBrightness' @@ -19,6 +18,7 @@ export { default as contrast } from './contrast' export { default as container } from './container' export { default as divide } from './divide' export { default as dropShadow } from './dropShadow' +export { default as decoration } from './decoration' export { default as fill } from './fill' export { default as gradient } from './gradient' export { default as grayscale } from './grayscale' diff --git a/src/plugins/placeholder.js b/src/plugins/placeholder.js index 733a244a..17c2d6f1 100644 --- a/src/plugins/placeholder.js +++ b/src/plugins/placeholder.js @@ -10,7 +10,7 @@ export default properties => { match, theme, getConfigValue, - getCoercedColor, + getCoerced, errors: { errorSuggestions }, } = properties @@ -21,7 +21,7 @@ export default properties => { }) if (opacity) return opacity - const coercedColor = getCoercedColor('placeholderColor') + const coercedColor = getCoerced('color') if (coercedColor) return coercedColor errorSuggestions({ diff --git a/src/plugins/ring.js b/src/plugins/ring.js index 67bdf048..e3325dee 100644 --- a/src/plugins/ring.js +++ b/src/plugins/ring.js @@ -36,7 +36,7 @@ export default properties => { const { theme, match, - getCoercedColor, + getCoerced, getConfigValue, errors: { errorSuggestions }, pieces: { important }, @@ -52,7 +52,7 @@ export default properties => { }) if (width) return width - const coercedColor = getCoercedColor('ringColor') + const coercedColor = getCoerced('color') if (coercedColor) return coercedColor errorSuggestions({ diff --git a/src/plugins/ringOffset.js b/src/plugins/ringOffset.js index 01d67b83..3550fae5 100644 --- a/src/plugins/ringOffset.js +++ b/src/plugins/ringOffset.js @@ -1,6 +1,6 @@ export default properties => { const { - getCoercedColor, + getCoerced, matchConfigValue, errors: { errorSuggestions }, pieces: { negative }, @@ -9,7 +9,7 @@ export default properties => { const width = matchConfigValue('ringOffsetWidth', /(?<=(ring-offset)-)([^]*)/) if (width) return { '--tw-ring-offset-width': `${negative}${width}` } - const coercedColor = getCoercedColor('ringOffsetColor') + const coercedColor = getCoerced('color') if (coercedColor) return coercedColor errorSuggestions({ diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index d20483a6..f614ae43 100644 --- a/src/plugins/stroke.js +++ b/src/plugins/stroke.js @@ -19,13 +19,13 @@ export default properties => { const { theme, match, - getCoercedColor, + getCoerced, getConfigValue, errors: { errorSuggestions }, pieces: { important }, } = properties - const coercedColor = getCoercedColor('stroke') + const coercedColor = getCoerced('color') if (coercedColor) return coercedColor const classValue = match(/(?<=(stroke)-)([^]*)/) diff --git a/src/plugins/text.js b/src/plugins/text.js index 20ceb44e..58d70e99 100644 --- a/src/plugins/text.js +++ b/src/plugins/text.js @@ -22,7 +22,7 @@ export default properties => { const { match, theme, - getCoercedColor, + getCoerced, getConfigValue, pieces: { important, hasNegative }, errors: { errorSuggestions, errorNoNegatives }, @@ -30,7 +30,7 @@ export default properties => { hasNegative && errorNoNegatives() - const coercedColor = getCoercedColor('textColor') + const coercedColor = getCoerced('color') if (coercedColor) return coercedColor const classValue = match(/(?<=(text-))([^]*)/)