Repository: tailwindlabs/tailwindcss
File: src/corePlugins.js (JavaScript)

Code before:
      'group-data',
      (value, { modifier }) =>
        modifier
          ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &`
          : `:merge(.group)[data-${normalize(value)}] &`,
      { values: theme('data') ?? {} }
    )
    matchVariant(
      'peer-data',
      (value, { modifier }) =>
        modifier
          ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &`
          : `:merge(.peer)[data-${normalize(value)}] ~ &`,
      { values: theme('data') ?? {} }
    )
  },

  orientationVariants: ({ addVariant }) => {
    addVariant('portrait', '@media (orientation: portrait)')
    addVariant('landscape', '@media (orientation: landscape)')
  },

  prefersContrastVariants: ({ addVariant }) => {
    addVariant('contrast-more', '@media (prefers-contrast: more)')
    addVariant('contrast-less', '@media (prefers-contrast: less)')
    addVariant('contrast-custom', '@media (prefers-contrast: custom)')
  },

  forcedColorsVariants: ({ addVariant }) => {
    addVariant('forced-colors', '@media (forced-colors: active)')
  },
}

let cssTransformValue = [
  'translate(var(--tw-translate-x), var(--tw-translate-y))',
  'rotate(var(--tw-rotate))',
  'skewX(var(--tw-skew-x))',
  'skewY(var(--tw-skew-y))',
  'scaleX(var(--tw-scale-x))',
  'scaleY(var(--tw-scale-y))',
].join(' ')

let cssFilterValue = [
  'var(--tw-blur)',
  'var(--tw-brightness)',
  'var(--tw-contrast)',
  'var(--tw-grayscale)',
  'var(--tw-hue-rotate)',
  'var(--tw-invert)',
  'var(--tw-saturate)',
  'var(--tw-sepia)',

Review comment (performance):
It would be useful to also have a variant for `@media (prefers-contrast)` in a boolean context. But I couldn't think of a good name for it? `contrast-specified`?

To quote the [spec](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast):

>it is also common to reduce visual clutter and color complexity in response to both high and low contrast preferences. In that case, it is appropriate to use @media (prefers-contrast) { … } without specifying [more](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-contrast-more) or [less](https://drafts.csswg.org/mediaqueries-5/#valdef-media-prefers-contrast-less), to do things like replacing background images with plain colors, turning off decorative gradients, or replacing border images or box shadows with simple solid borders. As [prefers-contrast: custom](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-contrast)—like prefers-contrast: more or prefers-contrast: less—evaluates to true in a [boolean context](https://drafts.csswg.org/mediaqueries-5/#boolean-context), such simplifications would also benefit users of [forced colors mode](https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode), even when their colors of choice do not result in a particularly high or low contrast. This is desirable, as the reduced palette enforced by forced colors mode calls for some visual simplification of the page.

Code after:
      'group-data',
      (value, { modifier }) =>
        modifier
          ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &`
          : `:merge(.group)[data-${normalize(value)}] &`,
      { values: theme('data') ?? {} }
    )
    matchVariant(
      'peer-data',
      (value, { modifier }) =>
        modifier
          ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &`
          : `:merge(.peer)[data-${normalize(value)}] ~ &`,
      { values: theme('data') ?? {} }
    )
  },

  orientationVariants: ({ addVariant }) => {
    addVariant('portrait', '@media (orientation: portrait)')
    addVariant('landscape', '@media (orientation: landscape)')
  },

  prefersContrastVariants: ({ addVariant }) => {
    addVariant('contrast-more', '@media (prefers-contrast: more)')
    addVariant('contrast-less', '@media (prefers-contrast: less)')
  },

  forcedColorsVariants: ({ addVariant }) => {
    addVariant('forced-colors', '@media (forced-colors: active)')
  },
}

let cssTransformValue = [
  'translate(var(--tw-translate-x), var(--tw-translate-y))',
  'rotate(var(--tw-rotate))',
  'skewX(var(--tw-skew-x))',
  'skewY(var(--tw-skew-y))',
  'scaleX(var(--tw-scale-x))',
  'scaleY(var(--tw-scale-y))',
].join(' ')

let cssFilterValue = [
  'var(--tw-blur)',
  'var(--tw-brightness)',
  'var(--tw-contrast)',
  'var(--tw-grayscale)',
  'var(--tw-hue-rotate)',
  'var(--tw-invert)',
  'var(--tw-saturate)',
  'var(--tw-sepia)',
  'var(--tw-drop-shadow)',