Don't rely on existence of --default-transition-* variables in transition utilities

[adamwathan]

This PR fixes an issue where using @theme reference { ... } would cause the transition-* to stop working properly because they were relying on theme variables being present in the generated CSS.

Right now this also inlines the values of those variables rather than emitting a var(...) call. This is fine because we generally inline values of all variables currently, but if we decide to use var(...) for everything we'll want to update this.

Fixes #13215.

[adamwathan]

Not sure if this test is really needed since this change is reflected in the utilities tests. Maybe better to test this there specifically for the transition utilities with new test cases for providing these two variables both with @theme and with @theme reference.

[Steffan153]

Shouldn't the default be 150ms, not 0s?

tailwindcss/stubs/config.full.js

Line 935 in d86fd0b

DEFAULT: '150ms',

[adamwathan]

Shouldn't the default be 150ms, not 0s?

tailwindcss/stubs/config.full.js

Line 935 in d86fd0b

DEFAULT: '150ms',

@Steffan153 So the default value here isn't meant to be the default theme value, it's the value to use if the person has explicitly disabled the default theme by not importing it.

Since the 150ms and cubic-bezier(0.4, 0, 0.2, 1) are opinionated design tokens, to me it makes more sense to default to the browser's default values rather than Tailwind's default values if someone is explicitly opting out of the default theme 👍

The value is still respected even when using @theme reference:

  expect(
    compileCss(
      css`
        @theme reference {
          --default-transition-duration: 150ms;
        }
        @tailwind utilities;
      `,
      ['transition-all'],
    ),
  ).toMatchInlineSnapshot(`
    ".transition-all {
      transition-property: all;
      transition-duration: .15s;
      transition-timing-function: ease;
    }"
  `)

The only time we'll fall back to 0s is if you aren't defining that variable at all, with or without reference 👍