Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/tests/ui.spec.ts (TypeScript)

Code before:

test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) => {
  let { getPropertyValue } = await render(
    page,
    html`<div
      id="x"
      class="shadow shadow-[#f00]/50 inset-shadow inset-shadow-[#0f0]/50 ring ring-[#fff]/50 inset-ring inset-ring-[#00f]/50"
    ></div>`,
  )

  expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
    [
      'rgba(0, 255, 0, 0.5) 0px 2px 4px 0px inset', // inset-shadow
      'rgba(0, 0, 255, 0.5) 0px 0px 0px 1px inset', // inset-ring
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px', // ring-offset (disabled)
      'rgba(255, 255, 255, 0.5) 0px 0px 0px 1px', // ring
      'rgba(255, 0, 0, 0.5) 0px 1px 3px 0px, rgba(255, 0, 0, 0.5) 0px 1px 2px -1px', // shadow
    ].join(', '),
  )
})

test('shadow colors', async ({ page }) => {
  let { getPropertyValue } = await render(
    page,
    html`<div id="x" class="shadow shadow-red-500"></div>
      <div id="y" class="shadow-xl shadow-red-500"></div>`,
  )

  expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
    [
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
    ].join(', '),
  )
  expect(await getPropertyValue('#y', 'box-shadow')).toEqual(
    [
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgb(239, 68, 68) 0px 20px 25px -5px, rgb(239, 68, 68) 0px 8px 10px -6px',
    ].join(', '),
  )
})

test('outline style is optional', async ({ page }) => {
  let { getPropertyValue } = await render(
    page,

Review comment (suggestion):
That is some weird af formatting. Prettier seems to be okay with this too which feels better:

```suggestion
    html`
      <div id="x" class="shadow shadow-red-500"></div>
      <div id="y" class="shadow-xl shadow-red-500"></div>
    `,
```

Code after:

test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) => {
  let { getPropertyValue } = await render(
    page,
    html`<div
      id="x"
      class="shadow shadow-[#f00]/50 inset-shadow inset-shadow-[#0f0]/50 ring ring-[#fff]/50 inset-ring inset-ring-[#00f]/50"
    ></div>`,
  )

  expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
    [
      'rgba(0, 255, 0, 0.5) 0px 2px 4px 0px inset', // inset-shadow
      'rgba(0, 0, 255, 0.5) 0px 0px 0px 1px inset', // inset-ring
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px', // ring-offset (disabled)
      'rgba(255, 255, 255, 0.5) 0px 0px 0px 1px', // ring
      'rgba(255, 0, 0, 0.5) 0px 1px 3px 0px, rgba(255, 0, 0, 0.5) 0px 1px 2px -1px', // shadow
    ].join(', '),
  )
})

test('shadow colors', async ({ page }) => {
  let { getPropertyValue } = await render(
    page,
    html`
      <div id="x" class="shadow shadow-red-500"></div>
      <div id="y" class="shadow-xl shadow-red-500"></div>
    `,
  )

  expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
    [
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
    ].join(', '),
  )
  expect(await getPropertyValue('#y', 'box-shadow')).toEqual(
    [
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
      'rgb(239, 68, 68) 0px 20px 25px -5px, rgb(239, 68, 68) 0px 8px 10px -6px',
    ].join(', '),
  )
})

test('outline style is optional', async ({ page }) => {