From 0a7dff0af635e252c31565d025da0ecfa9e0fcf8 Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Sat, 16 Mar 2024 17:03:23 +0100 Subject: [PATCH 1/3] add test case for fix --- tests/validators.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/validators.test.ts b/tests/validators.test.ts index 4a67630b..ba7bdf1a 100644 --- a/tests/validators.test.ts +++ b/tests/validators.test.ts @@ -166,6 +166,7 @@ test('isArbitraryNumber', () => { test('isArbitraryShadow', () => { expect(isArbitraryShadow('[0_35px_60px_-15px_rgba(0,0,0,0.3)]')).toBe(true) + expect(isArbitraryShadow('[inset_0_1px_0,inset_0_-1px_0]')).toBe(true) expect(isArbitraryShadow('[0_0_#00f]')).toBe(true) expect(isArbitraryShadow('[.5rem_0_rgba(5,5,5,5)]')).toBe(true) expect(isArbitraryShadow('[-.5rem_0_#123456]')).toBe(true) From dc50b45b46db3e44f3f3e71cc371da8a31c6e90b Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Sat, 16 Mar 2024 17:03:36 +0100 Subject: [PATCH 2/3] add inset to shadow regex --- src/lib/validators.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/validators.ts b/src/lib/validators.ts index 0789db12..9f5c08d8 100644 --- a/src/lib/validators.ts +++ b/src/lib/validators.ts @@ -5,8 +5,8 @@ const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/ const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/ const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/ -// Shadow always begins with x and y offset separated by underscore -const shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/ +// Shadow always begins with x and y offset separated by underscore optionally prepended by inset +const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/ const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/ From 3901cb199e584460d3eb67669dcdf392131cdcc5 Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Sat, 16 Mar 2024 17:03:47 +0100 Subject: [PATCH 3/3] add info about inset to validators docs --- docs/api-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index 9738396e..e3888f37 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -340,7 +340,7 @@ A brief summary for each validator: - `isArbitrarySize` checks whether class part is an arbitrary value which starts with `size:` (`[size:200px_100px]`) which is necessary for background-size classNames. - `isArbitraryPosition` checks whether class part is an arbitrary value which starts with `position:` (`[position:200px_100px]`) which is necessary for background-position classNames. - `isArbitraryImage` checks whether class part is an arbitrary value which is an iamge, e.g. by starting with `image:`, `url:`, `linear-gradient(` or `url(` (`[url('/path-to-image.png')]`, `image:var(--maybe-an-image-at-runtime)]`) which is necessary for background-image classNames. -- `isArbitraryShadow` checks whether class part is an arbitrary value which starts with the same pattern as a shadow value (`[0_35px_60px_-15px_rgba(0,0,0,0.3)]`), namely with two lengths separated by a underscore. +- `isArbitraryShadow` checks whether class part is an arbitrary value which starts with the same pattern as a shadow value (`[0_35px_60px_-15px_rgba(0,0,0,0.3)]`), namely with two lengths separated by a underscore, optionally prepended by `inset`. - `isAny` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when I'm certain there are no other class groups in a namespace. ## `Config`