Migrate theme(…) to var(…) in CSS

[RobinMalfait]

This PR is a follow up from #14664 migrates all the theme(…) calls in your CSS to var(…) if we can.

In at-rules, like @media we can't use var(…) so we have to use the modern version of theme(…).

In declarations, we can convert to var(…) unless there is a modifier used in the theme(…) function, then we can only convert to the new theme(…) syntax without dot notation.

Input:

@media theme(spacing.4) {
  .foo {
    background-color: theme(colors.red.900);
    color: theme(colors.red.900 / 75%); /* With spaces around the `/` */
    border-color: theme(colors.red.200/75%); /* Without spaces around the `/` */
  }
}

Output:

@media theme(--spacing-4) {
/*     ^^^^^^^^^^^^^^^^^^     Use `theme(…)` since `var(…)` is invalid in this position*/
  .foo {
    background-color: var(--color-red-900); /* Converted to var(…) */
    color: theme(--color-red-900 / 75%); /* Convert to modern theme(…) */
    border-color: theme(--color-red-200 / 75%); /* Convert to modern theme(…) — pretty printed*/
  }
}

[RobinMalfait]

• Migrate theme(…) to var(…) in CSS #14695 👈
• Make themeToVar reusable #14694
• next

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @RobinMalfait and the rest of your teammates on Graphite

[philipp-spiess]

LGTM just a small nit on the pretty option

[RobinMalfait]

Merge activity

• Oct 17, 5:44 AM EDT: A user started a stack merge that includes this pull request via Graphite.
• Oct 17, 5:45 AM EDT: Graphite rebased this pull request as part of a merge.
• Oct 17, 5:50 AM EDT: A user merged this pull request with Graphite.