diff --git a/src/__tests__/vendor/tailwind/_tailwind.tsx b/src/__tests__/vendor/tailwind/_tailwind.tsx index 3ba5db5e..49b18e6a 100644 --- a/src/__tests__/vendor/tailwind/_tailwind.tsx +++ b/src/__tests__/vendor/tailwind/_tailwind.tsx @@ -36,6 +36,8 @@ const debugDefault = typeof process.env.NODE_OPTIONS === "string" && process.env.NODE_OPTIONS.includes("--inspect"); +let renderCount = 0; + export async function render( component: ReactElement, { @@ -76,8 +78,8 @@ export async function render( // Process the TailwindCSS const { css: output } = await postcss([ - /* Tailwind seems to internally cache things, so we need a random value to cache bust */ - tailwind({ base: Date.now().toString() }), + // Tailwind caches its compiler per base, so each render takes a base of its own + tailwind({ base: `render-${renderCount++}` }), ]).process(css, { from: __dirname, }); diff --git a/src/__tests__/vendor/tailwind/harness.test.tsx b/src/__tests__/vendor/tailwind/harness.test.tsx new file mode 100644 index 00000000..cc13fd8b --- /dev/null +++ b/src/__tests__/vendor/tailwind/harness.test.tsx @@ -0,0 +1,16 @@ +import { renderSimple } from "./_tailwind"; + +afterEach(() => { + jest.restoreAllMocks(); +}); + +test("two renders in one millisecond each compile their own classes", async () => { + jest.spyOn(Date, "now").mockReturnValue(0); + + expect(await renderSimple({ className: "left-0" })).toStrictEqual({ + props: { style: { left: 0 } }, + }); + expect(await renderSimple({ className: "left-1" })).toStrictEqual({ + props: { style: { left: 3.5 } }, + }); +});