Implement --spacing(…), --alpha(…) and --theme(…) CSS functions

[RobinMalfait]

This PR implements new CSS functions that you can use in your CSS (or even in arbitrary value position).

For starters, we renamed the theme(…) function to --theme(…). The legacy theme(…) function is still available for backwards compatibility reasons, but this allows us to be future proof since --foo(…) is the syntax the CSS spec recommends. See: https://drafts.csswg.org/css-mixins/

In addition, this PR implements a new --spacing(…) function, this allows you to write:

@import "tailwindcss";

@theme {
  --spacing: 0.25rem;
}

.foo {
  margin: --spacing(4):
}

This is syntax sugar over:

@import "tailwindcss";

@theme {
  --spacing: 0.25rem;
}

.foo {
  margin: calc(var(--spacing) * 4);
}

If your @theme uses the inline keyword, we will also make sure to inline the value:

@import "tailwindcss";

@theme inline {
  --spacing: 0.25rem;
}

.foo {
  margin: --spacing(4):
}

Boils down to:

@import "tailwindcss";

@theme {
  --spacing: 0.25rem;
}

.foo {
  margin: calc(0.25rem * 4); /* And will be optimised to just 1rem */
}

---

Another new function function we added is the --alpha(…) function that requires a value, and a number / percentage value. This allows you to apply an alpha value to any color, but with a much shorter syntax:

@import "tailwindcss";

.foo {
  color: --alpha(var(--color-red-500), 0.5);
}

This is syntax sugar over:

@import "tailwindcss";

.foo {
  color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}

[thecrypticace]

lol this came back

[RobinMalfait]

🙃

[reinink]

Suggested change

	throw new Error('--spacing(…) depends on the `--spacing` theme value, but it was not found.')
	throw new Error('The --spacing(…) function requires that the `--spacing` theme variable be set, but it was not found.')