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

Code before:
              kind: 'functional',
              root,
              modifier: parsedModifier,
              value: null,
            }
          }

          if (value[0] === '[' && value[value.length - 1] === ']') {
            let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))

            // Empty arbitrary values are invalid. E.g.: `data-[]:`
            //                                                 ^^
            if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null

            return {
              kind: 'functional',
              root,
              modifier: parsedModifier,
              value: {
                kind: 'arbitrary',
                value: arbitraryValue,
              },
            }
          }

          // Discard values like `foo-[#bar]` or `foo-(#bar)`
          if (value[0] !== '[' && value[value.length - 1] === ']') {
            continue
          }

          if (value[0] === '(' && value[value.length - 1] === ')') {
            let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))

            // Empty arbitrary values are invalid. E.g.: `data-():`
            //                                                 ^^
            if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null

            return {
              kind: 'functional',
              root,
              modifier: parsedModifier,
              value: {
                kind: 'arbitrary',
                value: `var(${arbitraryValue})`,
              },
            }
          }

          // Discard values like `foo-[#bar]` or `foo-(#bar)`
          if (value[0] !== '(' && value[value.length - 1] === ')') {
            continue

Review comment (suggestion):
```suggestion
          // Discard values like `foo-[#bar]`
```

as this check is only for `[` and `]`.

But also we could avoid the last element access and comparison by restructuring the test above to look like this, wdyt?


```ts
if (value[value.length - 1] === ']') {
  // Discard values like `foo-[#bar]`
  if (!value[0] !== '[') continue

  let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))
  // Empty arbitrary values are invalid. E.g.: `data-[]:`
  //                                                 ^^
  if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null
  return {
    kind: 'functional',
    root,
    modifier: parsedModifier,
    value: {
      kind: 'arbitrary',
      value: arbitraryValue,
    },
  }
}

```

same for the one below obviously 

Code after:
              kind: 'functional',
              root,
              modifier: parsedModifier,
              value: null,
            }
          }

          if (value[value.length - 1] === ']') {
            // Discard values like `foo-[#bar]`
            if (value[0] !== '[') continue

            let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))

            // Empty arbitrary values are invalid. E.g.: `data-[]:`
            //                                                 ^^
            if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null

            return {
              kind: 'functional',
              root,
              modifier: parsedModifier,
              value: {
                kind: 'arbitrary',
                value: arbitraryValue,
              },
            }
          }

          if (value[value.length - 1] === ')') {
            // Discard values like `foo-(--bar)`
            if (value[0] !== '(') continue

            let arbitraryValue = decodeArbitraryValue(value.slice(1, -1))

            // Empty arbitrary values are invalid. E.g.: `data-():`
            //                                                 ^^
            if (arbitraryValue.length === 0 || arbitraryValue.trim().length === 0) return null

            return {
              kind: 'functional',
              root,
              modifier: parsedModifier,
              value: {
                kind: 'arbitrary',
                value: `var(${arbitraryValue})`,
              },
            }
          }

          return {
            kind: 'functional',