Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/utilities.test.ts (TypeScript)

Code before:
    let { build } = await compile(css`
      @layer utilities {
        @tailwind utilities;
      }

      @theme reference {
        --text-sm: 0.875rem;
        --text-sm--line-height: 1.25rem;
      }

      @utility text-sm {
        font-size: var(--text-sm, 0.8755rem);
        line-height: var(--text-sm--line-height, 1.255rem);
        text-rendering: optimizeLegibility;
      }
    `)
    let compiled = build(['text-sm'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
      "@layer utilities {
        .text-sm {
          font-size: var(--text-sm, .875rem);
          line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem));
          font-size: var(--text-sm, .8755rem);
          line-height: var(--text-sm--line-height, 1.255rem);
          text-rendering: optimizeLegibility;
        }
      }"
    `)
  })

  test('can override the default value of a functional utility', async () => {
    let { build } = await compile(css`
      @layer utilities {
        @tailwind utilities;
      }

      @theme reference {
        --radius-xl: 16px;
      }

      @utility rounded {
        border-radius: 50rem;
      }
    `)
    let compiled = build(['rounded', 'rounded-xl', 'rounded-[33px]'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
      "@layer utilities {
        .rounded {
          border-radius: 50rem;

Review comment (performance):
This diff is weird but that's because of lightning flatting. What happens ehre is the custom new `text-sm` utility is now rendered before the core `text-sm`. The new prop ` text-rendering: optimizeLegibility;` is still added, the rest is intended behavior here since you can't _overwrite_ core utilities.

Code after:
    let { build } = await compile(css`
      @layer utilities {
        @tailwind utilities;
      }

      @theme reference {
        --text-sm: 0.875rem;
        --text-sm--line-height: 1.25rem;
      }

      @utility text-sm {
        font-size: var(--text-sm, 0.8755rem);
        line-height: var(--text-sm--line-height, 1.255rem);
        text-rendering: optimizeLegibility;
      }
    `)
    let compiled = build(['text-sm'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
      "@layer utilities {
        .text-sm {
          font-size: var(--text-sm, .8755rem);
          line-height: var(--text-sm--line-height, 1.255rem);
          text-rendering: optimizeLegibility;
          font-size: var(--text-sm, .875rem);
          line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem));
        }
      }"
    `)
  })

  test('can override the default value of a functional utility', async () => {
    let { build } = await compile(css`
      @layer utilities {
        @tailwind utilities;
      }

      @theme reference {
        --radius-xl: 16px;
      }

      @utility rounded {
        border-radius: 50rem;
      }
    `)
    let compiled = build(['rounded', 'rounded-xl', 'rounded-[33px]'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
      "@layer utilities {
        .rounded {
          border-radius: 50rem;