diff --git a/src/__tests__/vendor/tailwind.test.tsx b/src/__tests__/vendor/tailwind.test.tsx index dbcbcfbc..05cb9184 100644 --- a/src/__tests__/vendor/tailwind.test.tsx +++ b/src/__tests__/vendor/tailwind.test.tsx @@ -353,3 +353,61 @@ test("line-clamp", () => { testID, }); }); + +test("blur-xl", () => { + const compiled = registerCSS(` + @layer theme { + :root, :host { + --blur-xs: 4px; + } + } + @layer utilities { + .blur-xs { + --tw-blur: blur(var(--blur-xs)); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + } + `); + + expect(compiled.stylesheet()).toStrictEqual({ + s: [ + [ + "blur-xs", + [ + { + d: [ + [ + [ + [{}, "var", "tw-blur", 1], + [{}, "var", "tw-brightness", 1], + [{}, "var", "tw-contrast", 1], + [{}, "var", "tw-grayscale", 1], + [{}, "var", "tw-hue-rotate", 1], + [{}, "var", "tw-invert", 1], + [{}, "var", "tw-saturate", 1], + [{}, "var", "tw-sepia", 1], + [{}, "var", "tw-drop-shadow", 1], + ], + "filter", + ], + ], + s: [2, 1], + v: [["tw-blur", [{}, "blur", [{}, "var", "blur-xs", 1]]]], + }, + ], + ], + ], + vr: [["blur-xs", [[4]]]], + }); + + render(); + const component = screen.getByTestId(testID); + + expect(component.props).toStrictEqual({ + children: undefined, + style: { + filter: [{ blur: 4 }], + }, + testID, + }); +}); diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index d8a4c3a0..bd8b836a 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -1029,6 +1029,7 @@ export function parseUnparsed( case "translateY": tokenOrValue.value.name = `@${tokenOrValue.value.name}`; return unparsedFunction(tokenOrValue, builder); + case "blur": case "brightness": case "contrast": case "cubic-bezier":