ronantakizawa/codereview-bench huggingface dataset:
Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/ast.test.ts (TypeScript)

Code before:
      .bar {
      }
      .baz {
      }
    }
    .foo {
      & {
        &:hover {
        }
        &:focus {
        }
      }
    }
    @media (min-width: 768px);
    @media (min-width: 768px) {
      .foo {
      }
      @media (min-width: 1024px) {
        .bar {
        }
      }
    }
    @charset 'UTF-8';
    @layer foo, bar, baz;
    @custom-media --modern (color), (hover);
    "
  `)

  expect(toCss(optimizeAst(ast))).toMatchInlineSnapshot(`
    "@charset 'UTF-8';
    @layer foo, bar, baz;
    @custom-media --modern (color), (hover);
    "
  `)
})


Review comment (suggestion):
```suggestion
    @custom-media --modern (color), (hover);
    @namespace "http://www.w3.org/1999/xhtml";
```

Code after:
    .foo {
      .bar {
      }
      .baz {
      }
    }
    .foo {
      & {
        &:hover {
        }
        &:focus {
        }
      }
    }
    @media (min-width: 768px);
    @media (min-width: 768px) {
      .foo {
      }
      @media (min-width: 1024px) {
        .bar {
        }
      }
    }
    @charset "UTF-8";
    @layer foo, bar, baz;
    @custom-media --modern (color), (hover);
    @namespace 'http://www.w3.org/1999/xhtml';
    "
  `)

  expect(toCss(optimizeAst(ast))).toMatchInlineSnapshot(`
    "@charset "UTF-8";
    @layer foo, bar, baz;
    @custom-media --modern (color), (hover);
    @namespace 'http://www.w3.org/1999/xhtml';
    "
  `)
})
Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/candidate.test.ts (TypeScript)

Code before:
  let utilities = new Utilities()
  utilities.functional('bg', () => [])

  expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
    [
      {
        "important": false,
        "kind": "functional",
        "modifier": {
          "kind": "arbitrary",
          "value": "var(--value)",
        },
        "raw": "bg-red-500/[var(--value)]",
        "root": "bg",
        "value": {
          "fraction": null,
          "kind": "named",
          "value": "red-500",
        },
        "variants": [],
      },
    ]
  `)
})

it('should properly decode escaped underlines but not underlines to spaces for CSS variables in arbitrary positions', () => {
  let utilities = new Utilities()
  utilities.functional('flex', () => [])
  let variants = new Variants()
  variants.functional('supports', () => {})

  expect(run('flex-(--\\_foo)', { utilities, variants })).toMatchInlineSnapshot(`
    [
      {
        "important": false,
        "kind": "functional",
        "modifier": null,
        "raw": "flex-(--\\_foo)",
        "root": "flex",
        "value": {
          "dataType": null,
          "kind": "arbitrary",
          "value": "var(--_foo)",
        },
        "variants": [],
      },
    ]
  `)
  expect(run('flex-(--_foo)', { utilities, variants })).toMatchInlineSnapshot(`
    [
      {

Review comment (security):
```suggestion
it('should properly decode escaped underscores but not convert underscores to spaces for CSS variables in arbitrary positions', () => {
```

Not 100% sure what you wanted to say exactly, but replaced `underlines` with `underscores` and added missing word (or at least it felt like something was missing?)

Code after:
  let utilities = new Utilities()
  utilities.functional('bg', () => [])

  expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
    [
      {
        "important": false,
        "kind": "functional",
        "modifier": {
          "kind": "arbitrary",
          "value": "var(--value)",
        },
        "raw": "bg-red-500/[var(--value)]",
        "root": "bg",
        "value": {
          "fraction": null,
          "kind": "named",
          "value": "red-500",
        },
        "variants": [],
      },
    ]
  `)
})

it('should properly decode escaped underscores but not convert underscores to spaces for CSS variables in arbitrary positions', () => {
  let utilities = new Utilities()
  utilities.functional('flex', () => [])
  let variants = new Variants()
  variants.functional('supports', () => {})

  expect(run('flex-(--\\_foo)', { utilities, variants })).toMatchInlineSnapshot(`
    [
      {
        "important": false,
        "kind": "functional",
        "modifier": null,
        "raw": "flex-(--\\_foo)",
        "root": "flex",
        "value": {
          "dataType": null,
          "kind": "arbitrary",
          "value": "var(--_foo)",
        },
        "variants": [],
      },
    ]
  `)
  expect(run('flex-(--_foo)', { utilities, variants })).toMatchInlineSnapshot(`
    [
      {
Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/property-order.ts (TypeScript)

Code before:
  'max-height',
  'min-height',
  'width',
  'max-width',
  'min-width',

  'flex',
  'flex-shrink',
  'flex-grow',
  'flex-basis',

  'table-layout',
  'caption-side',
  'border-collapse',

  // There's no `border-spacing-x` property, we use variables, how to sort?
  'border-spacing',
  // '--tw-border-spacing-x',
  // '--tw-border-spacing-y',

  'transform-origin',

  'translate',
  '--tw-translate-x',
  '--tw-translate-y',
  'scale',
  '--tw-scale-x',
  '--tw-scale-y',
  '--tw-scale-z',
  'rotate',
  '--tw-rotate-x',
  '--tw-rotate-y',
  '--tw-rotate-z',
  '--tw-skew-x',
  '--tw-skew-y',
  'transform',

  'animation',

  'cursor',

  'touch-action',
  '--tw-pan-x',
  '--tw-pan-y',
  '--tw-pinch-zoom',

  'resize',

  'scroll-snap-type',
  '--tw-scroll-snap-strictness',
  'scroll-snap-align',

Review comment (suggestion):
This was missing, but we do have it for `--tw-scale-z` and `--tw-rotate-z` so I figured why don't we just add this. 

Code after:
  'max-height',
  'min-height',
  'width',
  'max-width',
  'min-width',

  'flex',
  'flex-shrink',
  'flex-grow',
  'flex-basis',

  'table-layout',
  'caption-side',
  'border-collapse',

  // There's no `border-spacing-x` property, we use variables, how to sort?
  'border-spacing',
  // '--tw-border-spacing-x',
  // '--tw-border-spacing-y',

  'transform-origin',

  'translate',
  '--tw-translate-x',
  '--tw-translate-y',
  '--tw-translate-z',
  'scale',
  '--tw-scale-x',
  '--tw-scale-y',
  '--tw-scale-z',
  'rotate',
  '--tw-rotate-x',
  '--tw-rotate-y',
  '--tw-rotate-z',
  '--tw-skew-x',
  '--tw-skew-y',
  'transform',

  'animation',

  'cursor',

  'touch-action',
  '--tw-pan-x',
  '--tw-pan-y',
  '--tw-pinch-zoom',

  'resize',

  'scroll-snap-type',
  '--tw-scroll-snap-strictness',
Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/utilities.test.ts (TypeScript)

Code before:
  `)
  expect(
    await run([
      'perspective',
      '-perspective',
      'perspective-potato',
      'perspective-123',
      'perspective-normal/foo',
      'perspective-dramatic/foo',
      'perspective-none/foo',
      'perspective-[456px]/foo',
    ]),
  ).toEqual('')
})

test('translate-z', async () => {
  expect(await run(['translate-y-px', '-translate-z-[var(--value)]'])).toMatchInlineSnapshot(`
    ".translate-y-px {
      --tw-translate-y: 1px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .-translate-z-\\[var\\(--value\\)\\] {
      --tw-translate-z: calc(var(--value) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
    }

    @property --tw-translate-x {
      syntax: "*";
      inherits: false;
      initial-value: 0;
    }

    @property --tw-translate-y {
      syntax: "*";
      inherits: false;
      initial-value: 0;
    }

    @property --tw-translate-z {
      syntax: "*";
      inherits: false;
      initial-value: 0;
    }"
  `)
  expect(
    await run([
      'translate-z',
      'translate-z--1',
      'translate-z--1/2',
      'translate-z--1/-2',

Review comment (suggestion):
Unrelated to this PR but we found `translate-z-px` emits two css classes right now. Needs a follow-up fix

Code after:
  `)
  expect(
    await run([
      'perspective',
      '-perspective',
      'perspective-potato',
      'perspective-123',
      'perspective-normal/foo',
      'perspective-dramatic/foo',
      'perspective-none/foo',
      'perspective-[456px]/foo',
    ]),
  ).toEqual('')
})

test('translate-z', async () => {
  expect(await run(['translate-z-px', '-translate-z-[var(--value)]'])).toMatchInlineSnapshot(`
    ".-translate-z-\\[var\\(--value\\)\\] {
      --tw-translate-z: calc(var(--value) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
    }

    .translate-z-px {
      --tw-translate-z: 1px;
      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
    }

    @property --tw-translate-x {
      syntax: "*";
      inherits: false;
      initial-value: 0;
    }

    @property --tw-translate-y {
      syntax: "*";
      inherits: false;
      initial-value: 0;
    }

    @property --tw-translate-z {
      syntax: "*";
      inherits: false;
      initial-value: 0;
    }"
  `)
  expect(
    await run([
      'translate-z',
      'translate-z--1',
      'translate-z--1/2',
Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/utilities.test.ts (TypeScript)

Code before:
      '@container-[size]/sidebar',
    ]),
  ).toMatchInlineSnapshot(`
    ".\\@container {
      container-type: inline-size;
    }

    .\\@container-\\[size\\] {
      container-type: size;
    }

    .\\@container-\\[size\\]\\/sidebar {
      container: sidebar / size;
    }

    .\\@container-normal {
      container-type: normal;
    }

    .\\@container-normal\\/sidebar {
      container: sidebar;
    }

    .\\@container\\/sidebar {
      container: sidebar / inline-size;
    }"
  `)
  expect(
    await run([
      '-@container',
      '-@container-normal',
      '-@container/sidebar',
      '-@container-normal/sidebar',
      '-@container-[size]',
      '-@container-[size]/sidebar',
    ]),
  ).toEqual('')
})

describe('spacing utilities', () => {
  test('`--spacing: initial` disables the spacing multiplier', async () => {
    let { build } = await compile(css`
      @theme {
        --spacing: initial;
        --spacing-4: 1rem;
      }
      @tailwind utilities;
    `)
    let compiled = build(['px-1', 'px-4'])

    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`

Review comment (suggestion):
Ah nice so this previously counted `container` and `container-type` as the same but isn't doing that anymore. Neat!

Code after:
      '@container-[size]',
      '@container-[size]/sidebar',
    ]),
  ).toMatchInlineSnapshot(`
    ".\\@container-\\[size\\]\\/sidebar {
      container: sidebar / size;
    }

    .\\@container-normal\\/sidebar {
      container: sidebar;
    }

    .\\@container\\/sidebar {
      container: sidebar / inline-size;
    }

    .\\@container {
      container-type: inline-size;
    }

    .\\@container-\\[size\\] {
      container-type: size;
    }

    .\\@container-normal {
      container-type: normal;
    }"
  `)
  expect(
    await run([
      '-@container',
      '-@container-normal',
      '-@container/sidebar',
      '-@container-normal/sidebar',
      '-@container-[size]',
      '-@container-[size]/sidebar',
    ]),
  ).toEqual('')
})

describe('spacing utilities', () => {
  test('`--spacing: initial` disables the spacing multiplier', async () => {
    let { build } = await compile(css`
      @theme {
        --spacing: initial;
        --spacing-4: 1rem;
      }
      @tailwind utilities;
    `)
    let compiled = build(['px-1', 'px-4'])
Repository: tailwindlabs/tailwindcss
File: crates/oxide/src/extractor/arbitrary_value_machine.rs (Rust)

Code before:
    }

    #[test]
    fn test_arbitrary_value_machine_extraction() {
        for (input, expected) in [
            // Simple variable
            ("[#0088cc]", vec!["[#0088cc]"]),
            // With parentheses
            (
                "[url(https://tailwindcss.com)]",
                vec!["[url(https://tailwindcss.com)]"],
            ),
            // With strings, where bracket balancing doesn't matter
            ("['[({])}']", vec!["['[({])}']"]),
            // With strings later in the input
            (
                "[url('https://tailwindcss.com?[{]}')]",
                vec!["[url('https://tailwindcss.com?[{]}')]"],
            ),
            // With nested brackets
            ("[[data-foo]]", vec!["[[data-foo]]"]),
            (
                "[&>[data-slot=icon]:last-child]",
                vec!["[&>[data-slot=icon]:last-child]"],
            ),
            // With type hings
            ("[length:32rem]", vec!["[length:32rem]"]),
            // Spaces are not allowed
            ("[ #0088cc ]", vec![]),
            // Unbalanced brackets are not allowed
            ("[foo[bar]", vec![]),
            // Empty brackets are not allowed
            ("[]", vec![]),
        ] {
            assert_eq!(ArbitraryValueMachine::test_extract_all(input), expected);
        }
    }
}


Review comment (suggestion):
```suggestion
            // With data types
```

Code after:
    }

    #[test]
    fn test_arbitrary_value_machine_extraction() {
        for (input, expected) in [
            // Simple variable
            ("[#0088cc]", vec!["[#0088cc]"]),
            // With parentheses
            (
                "[url(https://tailwindcss.com)]",
                vec!["[url(https://tailwindcss.com)]"],
            ),
            // With strings, where bracket balancing doesn't matter
            ("['[({])}']", vec!["['[({])}']"]),
            // With strings later in the input
            (
                "[url('https://tailwindcss.com?[{]}')]",
                vec!["[url('https://tailwindcss.com?[{]}')]"],
            ),
            // With nested brackets
            ("[[data-foo]]", vec!["[[data-foo]]"]),
            (
                "[&>[data-slot=icon]:last-child]",
                vec!["[&>[data-slot=icon]:last-child]"],
            ),
            // With data types
            ("[length:32rem]", vec!["[length:32rem]"]),
            // Spaces are not allowed
            ("[ #0088cc ]", vec![]),
            // Unbalanced brackets are not allowed
            ("[foo[bar]", vec![]),
            // Empty brackets are not allowed
            ("[]", vec![]),
        ] {
            assert_eq!(ArbitraryValueMachine::test_extract_all(input), expected);
        }
    }
}
Repository: tailwindlabs/tailwindcss
File: crates/oxide/src/extractor/boundary.rs (Rust)

Code before:
    // ```
    #[bytes(b'\t', b'\n', b'\x0C', b'\r', b' ')]
    // Quotes, e.g.:
    //
    // ```
    // <div class="flex">
    //            ^    ^
    // ```
    #[bytes(b'"', b'\'', b'`')]
    // End of the input, e.g.:
    //
    // ```
    // flex
    //     ^
    // ```
    #[bytes(b'\0')]
    Common,

    // Angular like attributes, e.g.:
    //
    // ````
    // [class.foo]
    //       ^
    // ```
    #[bytes(b'.')]
    // Twig like templating languages, e.g.:
    //
    // ```
    // <div class="{% if true %}flex{% else %}block{% endif %}">
    //                         ^
    // ```
    #[bytes(b'}')]
    Before,

    // Clojure and Angular like languages, e.g.:
    // ```
    // [:div.p-2]
    //          ^
    // [class.foo]
    //           ^
    // ```
    #[bytes(b']')]
    // Twig like templating languages, e.g.:
    //
    // ```
    // <div class="{% if true %}flex{% else %}block{% endif %}">
    //                              ^
    // ```
    #[bytes(b'{')]
    // Svelte like attributes, e.g.:
    //

Review comment (suggestion):
```suggestion
    // Twig-like templating languages, e.g.:
```

Code after:
    // ```
    #[bytes(b'\t', b'\n', b'\x0C', b'\r', b' ')]
    // Quotes, e.g.:
    //
    // ```
    // <div class="flex">
    //            ^    ^
    // ```
    #[bytes(b'"', b'\'', b'`')]
    // End of the input, e.g.:
    //
    // ```
    // flex
    //     ^
    // ```
    #[bytes(b'\0')]
    Common,

    // Angular like attributes, e.g.:
    //
    // ````
    // [class.foo]
    //       ^
    // ```
    #[bytes(b'.')]
    // Twig-like templating languages, e.g.:
    //
    // ```
    // <div class="{% if true %}flex{% else %}block{% endif %}">
    //                         ^
    // ```
    #[bytes(b'}')]
    Before,

    // Clojure and Angular like languages, e.g.:
    // ```
    // [:div.p-2]
    //          ^
    // [class.foo]
    //           ^
    // ```
    #[bytes(b']')]
    // Twig like templating languages, e.g.:
    //
    // ```
    // <div class="{% if true %}flex{% else %}block{% endif %}">
    //                              ^
    // ```
    #[bytes(b'{')]
    // Svelte like attributes, e.g.:
    //
Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/index.ts (TypeScript)

Code before:
          `\`@utility ${node.params}\` is empty. Utilities should include at least one property.`,
        )
      }

      let utility = createCssUtility(node)
      if (utility === null) {
        throw new Error(
          `\`@utility ${node.params}\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.`,
        )
      }

      customUtilities.push(utility)
    }

    // Collect paths from `@source` at-rules
    if (node.name === '@source') {
      if (node.nodes.length > 0) {
        throw new Error('`@source` cannot have a body.')
      }

      if (parent !== null) {
        throw new Error('`@source` cannot be nested.')
      }

      let inline = false
      let not = false
      let path = node.params

      if (enableSourceInline) {
        if (path[0] === 'n' && path.startsWith('not ')) {
          not = true
          path = path.slice(4)
        }

        if (path[0] === 'i' && path.startsWith('inline(')) {
          inline = true
          path = path.slice(7, -1)
        }
      }

      if (
        (path[0] === '"' && path[path.length - 1] !== '"') ||
        (path[0] === "'" && path[path.length - 1] !== "'") ||
        (path[0] !== "'" && path[0] !== '"')
      ) {
        throw new Error('`@source` paths must be quoted.')
      }

      let source = path.slice(1, -1)

      if (enableSourceInline && inline) {

Review comment (suggestion):
```suggestion
      let not = false
      let inline = false
```
🙈

Not required, but maps to the order of `@source not inline('path')`

Code after:
          `\`@utility ${node.params}\` is empty. Utilities should include at least one property.`,
        )
      }

      let utility = createCssUtility(node)
      if (utility === null) {
        throw new Error(
          `\`@utility ${node.params}\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.`,
        )
      }

      customUtilities.push(utility)
    }

    // Collect paths from `@source` at-rules
    if (node.name === '@source') {
      if (node.nodes.length > 0) {
        throw new Error('`@source` cannot have a body.')
      }

      if (parent !== null) {
        throw new Error('`@source` cannot be nested.')
      }

      let not = false
      let inline = false
      let path = node.params

      if (enableSourceInline) {
        if (path[0] === 'n' && path.startsWith('not ')) {
          not = true
          path = path.slice(4)
        }

        if (path[0] === 'i' && path.startsWith('inline(')) {
          inline = true
          path = path.slice(7, -1)
        }
      }

      if (
        (path[0] === '"' && path[path.length - 1] !== '"') ||
        (path[0] === "'" && path[path.length - 1] !== "'") ||
        (path[0] !== "'" && path[0] !== '"')
      ) {
        throw new Error('`@source` paths must be quoted.')
      }

      let source = path.slice(1, -1)

      if (enableSourceInline && inline) {
Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/utils/infer-data-type.ts (TypeScript)

Code before:
  if (value.startsWith('var(')) return null

  for (let type of types) {
    if (checks[type]?.(value)) {
      return type
    }
  }

  return null
}

/* -------------------------------------------------------------------------- */

const IS_URL = /^url\(.*\)$/

function isUrl(value: string): boolean {
  return IS_URL.test(value)
}

/* -------------------------------------------------------------------------- */

function isLineWidth(value: string): boolean {
  return value === 'thin' || value === 'medium' || value === 'thick'
}

/* -------------------------------------------------------------------------- */

const IS_IMAGE_FN = /^(?:element|image|cross-fade|image-set)\(/
const IS_GRADIENT_FN = /^(repeating-)?(conic|linear|radial)-gradient\(/

function isImage(value: string) {
  let count = 0

  for (let part of segment(value, ',')) {
    if (part.startsWith('var(')) continue

    if (isUrl(part)) {
      count += 1
      continue
    }

    if (IS_GRADIENT_FN.test(part)) {
      count += 1
      continue
    }

    if (IS_IMAGE_FN.test(part)) {
      count += 1
      continue
    }


Review comment (suggestion):
I think I know why `isNumber` is here… it's for `0` support right? If so we should really adjust `isLength` to account for unit-less zero instead I think.

Can do that in a separate PR tho.


Code after:
  if (value.startsWith('var(')) return null

  for (let type of types) {
    if (checks[type]?.(value)) {
      return type
    }
  }

  return null
}

/* -------------------------------------------------------------------------- */

const IS_URL = /^url\(.*\)$/

function isUrl(value: string): boolean {
  return IS_URL.test(value)
}

/* -------------------------------------------------------------------------- */

function isLineWidth(value: string): boolean {
  return segment(value, ' ').every(
    (value) =>
      isLength(value) ||
      isNumber(value) ||
      value === 'thin' ||
      value === 'medium' ||
      value === 'thick',
  )
}

/* -------------------------------------------------------------------------- */

const IS_IMAGE_FN = /^(?:element|image|cross-fade|image-set)\(/
const IS_GRADIENT_FN = /^(repeating-)?(conic|linear|radial)-gradient\(/

function isImage(value: string) {
  let count = 0

  for (let part of segment(value, ',')) {
    if (part.startsWith('var(')) continue

    if (isUrl(part)) {
      count += 1
      continue
    }

    if (IS_GRADIENT_FN.test(part)) {
      count += 1
      continue