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

Code before:
    suggest('backdrop-sepia', () => [
      {
        values: ['0', '50', '100'],
        valueThemeKeys: ['--backdrop-sepia', '--sepia'],
        hasDefaultValue: true,
      },
    ])

    functionalUtility('drop-shadow', {
      themeKeys: ['--drop-shadow'],
      handle: (value) => [
        filterProperties(),
        decl(
          '--tw-drop-shadow',
          segment(value, ',')
            .map((v) => `drop-shadow(${v})`)
            .join(' '),
        ),
        decl('filter', cssFilterValue),
      ],
    })

    functionalUtility('backdrop-opacity', {
      // TODO: Do we want to remove this or not? Named opacity utilities (apart
      // form like `opacity-disabled` do not make a lot of sense). Just bare
      // values make more sense.
      themeKeys: ['--backdrop-opacity', '--opacity'],
      handleBareValue: ({ value }) => {
        if (Number.isNaN(Number(value))) return null
        return `${value}%`
      },
      handle: (value) => [
        backdropFilterProperties(),
        decl('--tw-backdrop-opacity', `opacity(${value})`),
        decl('-webkit-backdrop-filter', cssBackdropFilterValue),
        decl('backdrop-filter', cssBackdropFilterValue),
      ],
    })

    suggest('backdrop-opacity', () => [
      {
        values: Array.from({ length: 21 }, (_, i) => `${i * 5}`),
        valueThemeKeys: ['--backdrop-opacity', '--opacity'],
      },
    ])
  }

  {
    let defaultTimingFunction = theme.get(['--default-transition-timing-function']) ?? 'ease'
    let defaultDuration = theme.get(['--default-transition-duration']) ?? '0s'


Review comment (suggestion):
Motivation is backwards compatibility for anyone who had something like `opacity-backdrop` defined in their config. I don't think we'd really document these theme keys going forward but we're going to have to re-introduce all this stuff for BC if we get rid of it I think.

Code after:
        return `${value}%`
      },
      defaultValue: '100%',
      handle: (value) => [
        backdropFilterProperties(),
        decl('--tw-backdrop-sepia', `sepia(${value})`),
        decl('-webkit-backdrop-filter', cssBackdropFilterValue),
        decl('backdrop-filter', cssBackdropFilterValue),
      ],
    })

    suggest('sepia', () => [
      {
        values: ['0', '50', '100'],
        valueThemeKeys: ['--sepia'],
        hasDefaultValue: true,
      },
    ])

    suggest('backdrop-sepia', () => [
      {
        values: ['0', '50', '100'],
        valueThemeKeys: ['--backdrop-sepia', '--sepia'],
        hasDefaultValue: true,
      },
    ])

    functionalUtility('drop-shadow', {
      themeKeys: ['--drop-shadow'],
      handle: (value) => [
        filterProperties(),
        decl(
          '--tw-drop-shadow',
          segment(value, ',')
            .map((v) => `drop-shadow(${v})`)
            .join(' '),
        ),
        decl('filter', cssFilterValue),
      ],
    })

    functionalUtility('backdrop-opacity', {
      themeKeys: ['--backdrop-opacity', '--opacity'],
      handleBareValue: ({ value }) => {
        if (Number.isNaN(Number(value))) return null
        return `${value}%`
      },
      handle: (value) => [
        backdropFilterProperties(),
        decl('--tw-backdrop-opacity', `opacity(${value})`),
        decl('-webkit-backdrop-filter', cssBackdropFilterValue),