chore(css): add ios_saf to default lightningcss targets

[djdjz7]

Current default target for Lightning CSS

The current default target for Lightning CSS is resolved by converting the default ESBuild targets to Lightning CSS targets. However, the default ESBuild targets does not differentiate between Safari and Safari on iOS:

export const ESBUILD_BASELINE_WIDELY_AVAILABLE_TARGET: string[] = [
  'chrome111',
  'edge111',
  'firefox114',
  'safari16.4',
]

Thus the converted default Lightning CSS targets does not include Safari on iOS, or ios_saf.

The problem is, Safari on iOS and Safari have some slightly different behaviors when handling CSS. For example, the text-size-adjust property. As of now:

• Chrome supports the unprefixed text-size-adjust
• Safari on iOS supports the prefixed -webkit-text-size-adjust
• Safari does not support text-size-adjust
• Firefox supports the prefixed -moz-text-size-adjust

The upper window is for Safari on iOS, and the lower for Safari

However, Lightning CSS treats Safari on iOS and Safari differently, introducing some problems with vendor prifixing. With the default targets, Lighting CSS does not provide prefix for -webkit, only for -moz:

Adding the ios_saf target

We can resolve the issue by simply providing a default target for ios_saf, taking the same value of safari, if not otherwise specified

About this PR

This PR copies the targets.safari value to targets.ios_saf value when converting ESBuild targets to Lightning CSS targets, if ios_saf is not otherwise specified.

This PR passes relevant tests.