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` 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)\(.+\)$/ 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)