ronantakizawa/codereview-bench huggingface dataset:
Repository: tailwindlabs/tailwindcss
File: __tests__/plugins/gradientColorStops.test.js (JavaScript)

Code before:
          },
          secondary: 'hsl(10, 50%, 50%)',
        },
        opacity: {
          50: '0.5',
        },
      },
      variants: {
        textColor: [],
        textOpacity: [],
        gradientColorStops: [],
      },
      corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
    }),
  ])
    .process('@tailwind utilities', { from: undefined })
    .then((result) => {
      const expected = `
      .text-primary {
        --tw-text-opacity: 1;
        color: rgba(31, 31, 31, var(--tw-text-opacity));
      }

      .text-secondary {
        --tw-text-opacity: 1;
        color: hsla(10, 50, 50, var(--tw-text-opacity));
      }

      .text-opacity-50 {
        --tw-text-opacity: 0.5;
      }

      .from-primary {
        --tw-gradient-from: rgb(31, 31, 31);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .from-secondary {
        --tw-gradient-from: hsl(10, 50%, 50%);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50, 50, 0));
      }

      .via-primary {
        --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
        var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .via-secondary {
        --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
        var(--tw-gradient-to, hsla(10, 50, 50, 0));
      }

Review comment (suggestion):
```css
color: hsla(10, 50%, 50%, var(--tw-text-opacity));
```

Code after:
          },
          secondary: 'hsl(10, 50%, 50%)',
        },
        opacity: {
          50: '0.5',
        },
      },
      variants: {
        textColor: [],
        textOpacity: [],
        gradientColorStops: [],
      },
      corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
    }),
  ])
    .process('@tailwind utilities', { from: undefined })
    .then((result) => {
      const expected = `
      .text-primary {
        --tw-text-opacity: 1;
        color: rgba(31, 31, 31, var(--tw-text-opacity));
      }

      .text-secondary {
        --tw-text-opacity: 1;
        color: hsla(10, 50%, 50%, var(--tw-text-opacity));
      }

      .text-opacity-50 {
        --tw-text-opacity: 0.5;
      }

      .from-primary {
        --tw-gradient-from: rgb(31, 31, 31);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .from-secondary {
        --tw-gradient-from: hsl(10, 50%, 50%);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
      }

      .via-primary {
        --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
        var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .via-secondary {
        --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
        var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
      }
Repository: tailwindlabs/tailwindcss
File: __tests__/plugins/gradientColorStops.test.js (JavaScript)

Code before:
  ])
    .process('@tailwind utilities', { from: undefined })
    .then((result) => {
      const expected = `
      .text-primary {
        --tw-text-opacity: 1;
        color: rgba(31, 31, 31, var(--tw-text-opacity));
      }

      .text-secondary {
        --tw-text-opacity: 1;
        color: hsla(10, 50, 50, var(--tw-text-opacity));
      }

      .text-opacity-50 {
        --tw-text-opacity: 0.5;
      }

      .from-primary {
        --tw-gradient-from: rgb(31, 31, 31);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .from-secondary {
        --tw-gradient-from: hsl(10, 50%, 50%);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50, 50, 0));
      }

      .via-primary {
        --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
        var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .via-secondary {
        --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
        var(--tw-gradient-to, hsla(10, 50, 50, 0));
      }

      .to-primary {
        --tw-gradient-to: rgb(31, 31, 31);
      }

      .to-secondary {
       --tw-gradient-to: hsl(10, 50%, 50%);
      }
      `

      expect(result.css).toMatchCss(expected)
    })
})


Review comment (suggestion):
```css
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
```

Code after:
  ])
    .process('@tailwind utilities', { from: undefined })
    .then((result) => {
      const expected = `
      .text-primary {
        --tw-text-opacity: 1;
        color: rgba(31, 31, 31, var(--tw-text-opacity));
      }

      .text-secondary {
        --tw-text-opacity: 1;
        color: hsla(10, 50%, 50%, var(--tw-text-opacity));
      }

      .text-opacity-50 {
        --tw-text-opacity: 0.5;
      }

      .from-primary {
        --tw-gradient-from: rgb(31, 31, 31);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .from-secondary {
        --tw-gradient-from: hsl(10, 50%, 50%);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
      }

      .via-primary {
        --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
        var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .via-secondary {
        --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
        var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
      }

      .to-primary {
        --tw-gradient-to: rgb(31, 31, 31);
      }

      .to-secondary {
       --tw-gradient-to: hsl(10, 50%, 50%);
      }
      `

      expect(result.css).toMatchCss(expected)
    })
})
Repository: tailwindlabs/tailwindcss
File: __tests__/plugins/gradientColorStops.test.js (JavaScript)

Code before:
        --tw-text-opacity: 1;
        color: hsla(10, 50, 50, var(--tw-text-opacity));
      }

      .text-opacity-50 {
        --tw-text-opacity: 0.5;
      }

      .from-primary {
        --tw-gradient-from: rgb(31, 31, 31);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .from-secondary {
        --tw-gradient-from: hsl(10, 50%, 50%);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50, 50, 0));
      }

      .via-primary {
        --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
        var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .via-secondary {
        --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
        var(--tw-gradient-to, hsla(10, 50, 50, 0));
      }

      .to-primary {
        --tw-gradient-to: rgb(31, 31, 31);
      }

      .to-secondary {
       --tw-gradient-to: hsl(10, 50%, 50%);
      }
      `

      expect(result.css).toMatchCss(expected)
    })
})


Review comment (suggestion):
```css
var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
```

Code after:
        --tw-text-opacity: 1;
        color: hsla(10, 50%, 50%, var(--tw-text-opacity));
      }

      .text-opacity-50 {
        --tw-text-opacity: 0.5;
      }

      .from-primary {
        --tw-gradient-from: rgb(31, 31, 31);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .from-secondary {
        --tw-gradient-from: hsl(10, 50%, 50%);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
      }

      .via-primary {
        --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
        var(--tw-gradient-to, rgba(31, 31, 31, 0));
      }

      .via-secondary {
        --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
        var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
      }

      .to-primary {
        --tw-gradient-to: rgb(31, 31, 31);
      }

      .to-secondary {
       --tw-gradient-to: hsl(10, 50%, 50%);
      }
      `

      expect(result.css).toMatchCss(expected)
    })
})
Repository: tailwindlabs/tailwindcss
File: __tests__/plugins/ringWidth.test.js (JavaScript)

Code before:

test('ring widths with defaults and hsl value for ringColor', () => {
  const config = {
    theme: {
      ringWidth: {},
      ringOffsetWidth: {
        DEFAULT: '2px',
      },
      ringOffsetColor: {
        DEFAULT: 'pink',
      },
      ringColor: {
        DEFAULT: 'hsl(10, 50%, 50%)',
      },
    },
    variants: {
      ringColor: [],
    },
  }

  const { utilities } = invokePlugin(plugin(), config)
  expect(utilities).toEqual([
    [
      {
        '*': {
          '--tw-ring-color': 'hsla(10, 50, 50, 0.5)',
          '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
          '--tw-ring-offset-color': 'pink',
          '--tw-ring-offset-shadow': '0 0 #0000',
          '--tw-ring-offset-width': '2px',
          '--tw-ring-shadow': '0 0 #0000',
        },
      },
      { respectImportant: false },
    ],
    [
      {
        '.ring-inset': {
          '--tw-ring-inset': 'inset',
        },
      },
      undefined,
    ],
  ])
})

test('ring widths with defaults', () => {
  const config = {
    theme: {
      ringWidth: {},
      ringOffsetWidth: {

Review comment (suggestion):
```
'--tw-ring-color': 'hsla(10, 50%, 50%, 0.5)',
```

Code after:

test('ring widths with defaults and hsl value for ringColor', () => {
  const config = {
    theme: {
      ringWidth: {},
      ringOffsetWidth: {
        DEFAULT: '2px',
      },
      ringOffsetColor: {
        DEFAULT: 'pink',
      },
      ringColor: {
        DEFAULT: 'hsl(10, 50%, 50%)',
      },
    },
    variants: {
      ringColor: [],
    },
  }

  const { utilities } = invokePlugin(plugin(), config)
  expect(utilities).toEqual([
    [
      {
        '*': {
          '--tw-ring-color': 'hsla(10, 50%, 50%, 0.5)',
          '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
          '--tw-ring-offset-color': 'pink',
          '--tw-ring-offset-shadow': '0 0 #0000',
          '--tw-ring-offset-width': '2px',
          '--tw-ring-shadow': '0 0 #0000',
        },
      },
      { respectImportant: false },
    ],
    [
      {
        '.ring-inset': {
          '--tw-ring-inset': 'inset',
        },
      },
      undefined,
    ],
  ])
})

test('ring widths with defaults', () => {
  const config = {
    theme: {
      ringWidth: {},
      ringOffsetWidth: {
Repository: tailwindlabs/tailwindcss
File: __tests__/withAlphaVariable.test.js (JavaScript)

Code before:
  ).toEqual({
    '--tw-bg-opacity': '1',
    'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
  })
})

test('it transforms rgb and hsl to rgba and hsla', () => {
  expect(
    withAlphaVariable({
      color: 'rgb(50, 50, 50)',
      property: 'background-color',
      variable: '--tw-bg-opacity',
    })
  ).toEqual({
    '--tw-bg-opacity': '1',
    'background-color': 'rgba(50, 50, 50, var(--tw-bg-opacity))',
  })
  expect(
    withAlphaVariable({
      color: 'hsl(50, 50%, 50%)',
      property: 'background-color',
      variable: '--tw-bg-opacity',
    })
  ).toEqual({
    '--tw-bg-opacity': '1',
    'background-color': 'hsla(50, 50, 50, var(--tw-bg-opacity))',
  })
})


Review comment (suggestion):
```
'background-color': 'hsla(50, 50%, 50%, var(--tw-bg-opacity))',
```

Code after:
  ).toEqual({
    '--tw-bg-opacity': '1',
    'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
  })
})

test('it transforms rgb and hsl to rgba and hsla', () => {
  expect(
    withAlphaVariable({
      color: 'rgb(50, 50, 50)',
      property: 'background-color',
      variable: '--tw-bg-opacity',
    })
  ).toEqual({
    '--tw-bg-opacity': '1',
    'background-color': 'rgba(50, 50, 50, var(--tw-bg-opacity))',
  })
  expect(
    withAlphaVariable({
      color: 'hsl(50, 50%, 50%)',
      property: 'background-color',
      variable: '--tw-bg-opacity',
    })
  ).toEqual({
    '--tw-bg-opacity': '1',
    'background-color': 'hsla(50, 50%, 50%, var(--tw-bg-opacity))',
  })
})
Repository: tailwindlabs/tailwindcss
File: packages/@tailwindcss-cli/src/commands/build/index.ts (TypeScript)

Code before:
} from '../../utils/renderer'
import { resolve } from '../../utils/resolve'
import { drainStdin, outputFile } from './utils'

const css = String.raw

export function options() {
  return {
    '--input': {
      type: 'string',
      description: 'Input file',
      alias: '-i',
    },
    '--output': {
      type: 'string',
      description: 'Output file',
      alias: '-o',
    },
    '--watch': {
      type: 'boolean | string',
      description: 'Watch for changes and rebuild as needed',
      alias: '-w',
    },
    '--minify': {
      type: 'boolean',
      description: 'Minify the output',
      alias: '-m',
    },
    '--optimize': {
      type: 'boolean',
      description: 'Optimize the output without minifying',
    },
    '--cwd': {
      type: 'string',
      description: 'The current working directory',
      default: '.',
    },
  } satisfies Arg
}

export async function handle(args: Result<ReturnType<typeof options>>) {
  let base = path.resolve(args['--cwd'])

  // Resolve the output as an absolute path.
  if (args['--output']) {
    args['--output'] = path.resolve(base, args['--output'])
  }

  // Resolve the input as an absolute path. If the input is a `-`, then we don't
  // need to resolve it because this is a flag to indicate that we want to use
  // `stdin` instead.

Review comment (performance):
Should we say "Optimize and minify the output"? Now that the `--optimize` option exists, users may be confused that optimization isn't mentioned here.

Code after:
} from '../../utils/renderer'
import { resolve } from '../../utils/resolve'
import { drainStdin, outputFile } from './utils'

const css = String.raw

export function options() {
  return {
    '--input': {
      type: 'string',
      description: 'Input file',
      alias: '-i',
    },
    '--output': {
      type: 'string',
      description: 'Output file',
      alias: '-o',
    },
    '--watch': {
      type: 'boolean | string',
      description: 'Watch for changes and rebuild as needed',
      alias: '-w',
    },
    '--minify': {
      type: 'boolean',
      description: 'Optimize and minify the output',
      alias: '-m',
    },
    '--optimize': {
      type: 'boolean',
      description: 'Optimize the output without minifying',
    },
    '--cwd': {
      type: 'string',
      description: 'The current working directory',
      default: '.',
    },
  } satisfies Arg
}

export async function handle(args: Result<ReturnType<typeof options>>) {
  let base = path.resolve(args['--cwd'])

  // Resolve the output as an absolute path.
  if (args['--output']) {
    args['--output'] = path.resolve(base, args['--output'])
  }

  // Resolve the input as an absolute path. If the input is a `-`, then we don't
  // need to resolve it because this is a flag to indicate that we want to use
  // `stdin` instead.
Repository: tailwindlabs/tailwindcss
File: packages/@tailwindcss-vite/src/index.ts (TypeScript)

Code before:
        // browser to load a page (e.g. an URL to a missing image), triggering a
        // CSS update will cause an infinite loop. We only trigger if the
        // candidates have been updated.
        if (updated) {
          updateCssModules()
        }
      },

      // Scan all non-CSS files for candidates
      transform(src, id) {
        if (id.includes('/.vite/')) return
        let extension = getExtension(id)
        if (extension === '' || extension === 'css') return

        scan(src, extension)
        updateCssModules()
      },
    },

    /*
     * The plugins that generate CSS must run after 'enforce: pre' so @imports
     * are expanded in transform.
     */

    {
      // Step 2 (dev server mode): Generate CSS
      name: '@tailwindcss/vite:generate:serve',
      apply: 'serve',

      async transform(src, id) {
        if (!isTailwindCssFile(id, src)) return

        // In serve mode, we treat cssModules as a set, ignoring the value.
        cssModules[id] = ''

        // Wait until all other files have been processed, so we can extract all
        // candidates before generating CSS.
        await server?.waitForRequestsIdle?.(id)

        let code = await transformWithPlugins(this, id, generateCss(src))
        return { code }
      },
    },

    {
      // Step 2 (full build): Generate CSS
      name: '@tailwindcss/vite:generate:build',
      apply: 'build',

      transform(src, id) {
        if (!isTailwindCssFile(id, src)) return

Review comment (suggestion):
```suggestion
      // Step 2 (serve mode): Generate CSS
```

Code after:
        // CSS update will cause an infinite loop. We only trigger if the
        // candidates have been updated.
        if (updated) {
          updateCssModules()
        }
      },

      // Scan all non-CSS files for candidates
      transform(src, id) {
        if (id.includes('/.vite/')) return
        let extension = getExtension(id)
        if (extension === '' || extension === 'css') return

        scan(src, extension)
        updateCssModules()
      },
    },

    /*
     * The plugins that generate CSS must run after 'enforce: pre' so @imports
     * are expanded in transform.
     */

    {
      // Step 2 (serve mode): Generate CSS
      name: '@tailwindcss/vite:generate:serve',
      apply: 'serve',

      async transform(src, id) {
        if (!isTailwindCssFile(id, src)) return

        // In serve mode, we treat cssModules as a set, ignoring the value.
        cssModules[id] = ''

        // Wait until all other files have been processed, so we can extract all
        // candidates before generating CSS.
        await server?.waitForRequestsIdle?.(id)

        let code = await transformWithPlugins(this, id, generateCss(src))
        return { code }
      },
    },

    {
      // Step 2 (full build): Generate CSS
      name: '@tailwindcss/vite:generate:build',
      apply: 'build',

      transform(src, id) {
        if (!isTailwindCssFile(id, src)) return
        cssModules[id] = src
Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/index.test.ts (TypeScript)

Code before:
          }
          @theme {
            --animate-foo: initial;
          }
          @tailwind utilities;
        `,
        ['animate-foo', 'animate-foobar'],
      ),
    ).toMatchInlineSnapshot(`
      ":root {
        --animate-foobar: foobar 1s infinite;
      }

      .animate-foobar {
        animation: 1s infinite foobar;
      }

      @keyframes foobar {
        to {
          opacity: 0;
        }
      }"
    `)
  })

  test('utilities that rely on the --default namespace still work when using `@theme reference`', () => {
    expect(
      compileCss(
        css`
          @theme reference {
            --default-transition-timing-function: linear;
            --default-transition-duration: 150ms;
          }
          @tailwind utilities;
        `,
        ['transition-all'],
      ),
    ).toMatchInlineSnapshot(`
      "@theme reference {
        --default-transition-timing-function: linear; --default-transition-duration: .15s;
      }

      .transition-all {
        transition-property: all;
        transition-duration: 0s;
        transition-timing-function: ease;
      }"
    `)
  })
})


Review comment (suggestion):
Not sure if this test is _really_ needed since this change is reflected in the utilities tests. Maybe better to test this there specifically for the transition utilities with new test cases for providing these two variables both with `@theme` and with `@theme reference`.

Code after:
          }
          @theme {
            --animate-foo: initial;
          }
          @tailwind utilities;
        `,
        ['animate-foo', 'animate-foobar'],
      ),
    ).toMatchInlineSnapshot(`
      ":root {
        --animate-foobar: foobar 1s infinite;
      }

      .animate-foobar {
        animation: 1s infinite foobar;
      }

      @keyframes foobar {
        to {
          opacity: 0;
        }
      }"
    `)
  })

  test('theme values added as reference are not included in the output as variables', () => {
    expect(
      compileCss(
        css`
          @theme {
            --color-tomato: #e10c04;
          }
          @theme reference {
            --color-potato: #ac855b;
          }
          @tailwind utilities;
        `,
        ['bg-tomato', 'bg-potato'],
      ),
    ).toMatchInlineSnapshot(`
      ":root {
        --color-tomato: #e10c04;
      }

      .bg-potato {
        background-color: #ac855b;
      }

      .bg-tomato {
        background-color: #e10c04;
      }"
Repository: tailwindlabs/tailwindcss
File: scripts/pre-publish-optimizations.mjs (JavaScript)

Code before:
import fs from 'node:fs/promises'
import path from 'node:path'
import postcss from 'postcss'
import atImport from 'postcss-import'
import prettier from 'prettier'

// Performance optimization: Inline the contents of the `tailwindcss/index.css`
// file so that we don't require to handle imports at runtime.
{
  let __dirname = path.dirname(new URL(import.meta.url).pathname)
  let file = path.resolve(__dirname, '../packages/tailwindcss/index.css')
  let contents = await fs.readFile(file, 'utf-8')
  let inlined = await prettier.format(
    await postcss()
      .use(atImport())
      .process(contents, { from: file })
      .then((result) => result.css),
    { filepath: file },
  )
  await fs.writeFile(file, inlined, 'utf-8')
}


Review comment (suggestion):
```suggestion
// file so that we don't need to handle imports at runtime.
```

Code after:
import fs from 'node:fs/promises'
import path from 'node:path'
import postcss from 'postcss'
import atImport from 'postcss-import'
import prettier from 'prettier'

// Performance optimization: Inline the contents of the `tailwindcss/index.css`
// file so that we don't need to handle imports at runtime.
{
  let __dirname = path.dirname(new URL(import.meta.url).pathname)
  let file = path.resolve(__dirname, '../packages/tailwindcss/index.css')
  let contents = await fs.readFile(file, 'utf-8')
  let inlined = await prettier.format(
    await postcss()
      .use(atImport())
      .process(contents, { from: file })
      .then((result) => result.css),
    { filepath: file },
  )
  await fs.writeFile(file, inlined, 'utf-8')
}