Add suggestions when --spacing(--value(integer, number)) is used

[RobinMalfait]

This PR adds suggestions to CSS based functional utilities when the --spacing(…) function is used.

Given this CSS:

@import "tailwindcss";

@theme {
  --spacing: 0.25rem;
  --spacing-custom: 123px;
}

@utility with-custom-spacing-* {
  size: --value(--spacing);
}

@utility with-integer-spacing-* {
  size: --spacing(--value(integer));
}

@utility with-number-spacing-* {
  size: --spacing(--value(number));
}

And this HTML:

<div class="with-custom-spacing-custom"></div>
<div class="with-custom-spacing-0"></div>
<div class="with-custom-spacing-0.5"></div>
<div class="with-custom-spacing-1"></div>
<div class="with-custom-spacing-1.5"></div>

<div class="with-integer-spacing-custom"></div>
<div class="with-integer-spacing-0"></div>
<div class="with-integer-spacing-0.5"></div>
<div class="with-integer-spacing-1"></div>
<div class="with-integer-spacing-1.5"></div>

<div class="with-number-spacing-custom"></div>
<div class="with-number-spacing-0"></div>
<div class="with-number-spacing-0.5"></div>
<div class="with-number-spacing-1"></div>
<div class="with-number-spacing-1.5"></div>

Play: https://play.tailwindcss.com/tYDaSNiNtS

Then you will see the following suggestions:

[
  "with-custom-spacing-custom",

  "with-integer-spacing-0",
  "with-integer-spacing-1",
  "with-integer-spacing-2",
  "with-integer-spacing-3",
  "with-integer-spacing-4",
  "with-integer-spacing-5",
  "with-integer-spacing-6",
  "with-integer-spacing-7",
  "with-integer-spacing-8",
  "with-integer-spacing-9",
  "with-integer-spacing-10",
  "with-integer-spacing-11",
  "with-integer-spacing-12",
  "with-integer-spacing-14",
  "with-integer-spacing-16",
  "with-integer-spacing-20",
  "with-integer-spacing-24",
  "with-integer-spacing-28",
  "with-integer-spacing-32",
  "with-integer-spacing-36",
  "with-integer-spacing-40",
  "with-integer-spacing-44",
  "with-integer-spacing-48",
  "with-integer-spacing-52",
  "with-integer-spacing-56",
  "with-integer-spacing-60",
  "with-integer-spacing-64",
  "with-integer-spacing-72",
  "with-integer-spacing-80",
  "with-integer-spacing-96",

  "with-number-spacing-0",
  "with-number-spacing-0.5",
  "with-number-spacing-1",
  "with-number-spacing-1.5",
  "with-number-spacing-2",
  "with-number-spacing-2.5",
  "with-number-spacing-3",
  "with-number-spacing-3.5",
  "with-number-spacing-4",
  "with-number-spacing-5",
  "with-number-spacing-6",
  "with-number-spacing-7",
  "with-number-spacing-8",
  "with-number-spacing-9",
  "with-number-spacing-10",
  "with-number-spacing-11",
  "with-number-spacing-12",
  "with-number-spacing-14",
  "with-number-spacing-16",
  "with-number-spacing-20",
  "with-number-spacing-24",
  "with-number-spacing-28",
  "with-number-spacing-32",
  "with-number-spacing-36",
  "with-number-spacing-40",
  "with-number-spacing-44",
  "with-number-spacing-48",
  "with-number-spacing-52",
  "with-number-spacing-56",
  "with-number-spacing-60",
  "with-number-spacing-64",
  "with-number-spacing-72",
  "with-number-spacing-80",
  "with-number-spacing-96"
]

This is because --spacing(--value(number)) will include all default spacing scale suggestions we use. And --pacing(--value(integer)) will include the same list but without the floating point numbers.

Follow up PR for: #17304

[thecrypticace]

yessssss ty!

[katerlouis]

@RobinMalfait (sorry, probably trivial...)
This merge has not been released yet, correct? At least for me on the latest version these utilities do not trigger suggestions. The play-link you provided also does not offer suggestions yet.

Sorry for the trivial noob questions; but I'm having a hard time wrapping my head around the new plugin system and want to make sure that it's not working for me, because it just can't yet :D:D – Any way for me to see if this PR has been released yet?

EDIT: Also I don't quite get why your HTML examples show with-custom-spacing-2 while the suggestion apparently only shows the custom spacings? Will with-custom-spacing-2 still give you the desired css, just without suggestion?

EDIT2: Also also :D – cool that this system easily allows to only suggest custom values <3

EDIT3...: It feels a bit odd that both --value(--spacing) and --spacing(--value(integer)) works; --spacing and --spacing() is a different thing, isn't it? Will --spacing(...) as a function (I guess?) be auto-suggested in @utility ... alongside --value() and --modifier()?

EDIT4: Proof that I'm not crazy :D

[RobinMalfait]

@katerlouis

@RobinMalfait (sorry, probably trivial...) This merge has not been released yet, correct? At least for me on the latest version these utilities do not trigger suggestions. The play-link you provided also does not offer suggestions yet.

Correct it's not yet released. You have to be on the insiders build in order to get suggestions. If you switch the Play link to use the insiders version it should work. See: https://play.tailwindcss.com/VaNteSLX3A

Sorry for the trivial noob questions; but I'm having a hard time wrapping my head around the new plugin system and want to make sure that it's not working for me, because it just can't yet :D:D – Any way for me to see if this PR has been released yet?

Yep, checkout the CHANGELOG.md file for this: https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md#unreleased

EDIT: Also I don't quite get why your HTML examples show with-custom-spacing-2 while the suggestion apparently only shows the custom spacings? Will with-custom-spacing-2 still give you the desired css, just without suggestion?

I just copied the 3 types of plugins with the exact same values. Then verified what actually got generated (see Generated CSS tab at the bottom).

Let me annotation it for you: https://play.tailwindcss.com/ZiGsqoXgwV

EDIT2: Also also :D – cool that this system easily allows to only suggest custom values <3

EDIT3...: It feels a bit odd that both --value(--spacing) and --spacing(--value(integer)) works; --spacing and --spacing() is a different thing, isn't it?

It is a bit odd, but this is how CSS defines custom functions, they just look like a CSS variable.

• --value(--spacing) means: read values defined with --spacing-*: …
• --spacing(--value(integer)) means: use the --spacing() function, and read any bare value integer. So foo-123 would have a bare value of 123.

In this case --spacing(x) is a helper that generates calc(var(--spacing) * x). Where var(--spacing) is set to --spacing: 0.25rem by default.

Will --spacing(...) as a function (I guess?) be auto-suggested in @utility ... alongside --value() and --modifier()?

Yes, should already be the case:

EDIT4: Proof that I'm not crazy :D

Correct, just need to be on the correct version 😁