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

Code before:
  test('CSS theme functions in plugins are properly evaluated', async () => {
    let compiled = await compile(
      css`
        @plugin "my-plugin";

        @theme reference {
          --color-red: red;
          --color-orange: orange;
          --color-blue: blue;
          --color-pink: pink;
        }
      `,
      {
        async loadPlugin() {
          return plugin(({ addBase }) => {
            addBase({
              '.my-base-rule': {
                color: 'theme(colors.red)',
                'outline-color': 'theme(colors.orange / 15%)',
                'background-color': 'theme(--color-blue)',
                'border-color': 'theme(--color-pink / 10%)',
              },
            })
          })
        },
      },
    )

    expect(optimizeCss(compiled.build(['my-utility'])).trim()).toMatchInlineSnapshot(`
      "@layer base {
        .my-base-rule {
          color: red;
          background-color: #00f;
          border-color: #ffc0cb1a;
          outline-color: #ffa50026;
        }
      }"
    `)
  })
})

describe('in JS config files', () => {
  test('CSS theme functions in config files are properly evaluated', async () => {
    let compiled = await compile(
      css`
        @config "./my-config.js";

        @theme reference {
          --color-red: red;
          --color-orange: orange;
        }

Review comment (refactor):
We should probably also add an `addUtility` to test values inside utilities (since these won't be added to the initial CSS AST so it will be replaced at a different layer.

```suggestion
            addBase({
              '.my-base-rule': {
                color: 'theme(colors.red)',
                'outline-color': 'theme(colors.orange / 15%)',
                'background-color': 'theme(--color-blue)',
                'border-color': 'theme(--color-pink / 10%)',
              },
            })
            
            addUtilities({
              '.my-utility': {
                color: 'theme(colors.red)',
              },
            })
```

Code after:
  test('CSS theme functions in plugins are properly evaluated', async () => {
    let compiled = await compile(
      css`
        @layer base, utilities;
        @plugin "my-plugin";
        @theme reference {
          --color-red: red;
          --color-orange: orange;
          --color-blue: blue;
          --color-pink: pink;
        }
        @layer utilities {
          @tailwind utilities;
        }
      `,
      {
        async loadPlugin() {
          return plugin(({ addBase, addUtilities }) => {
            addBase({
              '.my-base-rule': {
                color: 'theme(colors.red)',
                'outline-color': 'theme(colors.orange / 15%)',
                'background-color': 'theme(--color-blue)',
                'border-color': 'theme(--color-pink / 10%)',
              },
            })

            addUtilities({
              '.my-utility': {
                color: 'theme(colors.red)',
              },
            })
          })
        },
      },
    )

    expect(optimizeCss(compiled.build(['my-utility'])).trim()).toMatchInlineSnapshot(`
      "@layer base {
        .my-base-rule {
          color: red;
          background-color: #00f;
          border-color: #ffc0cb1a;
          outline-color: #ffa50026;
        }
      }

      @layer utilities {
        .my-utility {
          color: red;
        }