[v4] Splitting the --value([*]) along the separator and get the nth element by --value or whatever new function

[rozsazoltan]

I see that currently there is no way to extract just a specific value from the result of the --value([*]) function. Is there a possibility for such an implementation in the future?

<img class="clipcirc-[40%_50%_50%]" src="...">

@utility clipcirc-* {
  /* expected result: circle(40% at 50% 50%); */
  clip-path: circle(--value([percentage:1st]) at --value([percentage:2nd]) --value([percentage:3th]));
}

• It was inspired by TailwindCSS @utility that takes several arbitrary values

Here, for the purpose of the request/idea, it is irrelevant whether 40%_at_50%_50% works, as my answer shows. The idea is based on the fact that we should be able to query any element along a given (currently space) separator, in any form.

[dg291223]

I already had a similar idea.

The following came to my mind:

@utility text-*-**-***-**** {}

A perfect application scenario would be fluid typography. Which I sorely miss in Tailwind v4.

Example:

@theme inline reference {
  text-base-size: .25;
  breakpoint-raw-md: 48;
  breakpoint-raw-2xl: 96;
}

@utility text-*-**-***-**** {
  font-size: clamp(
    calc(--value(--text-base-size)rem * --value(number:**)),
    calc(calc(--value(--text-base-size)rem * --value(number:**)) + (calc(--value(--text-base-size) * --value(number:***)) - calc(--value(--text-base-size) * --value(number:**))) * ((100vw - --value(--breakpoint-*)) / (--value(--breakpoint-raw-****) - --value(--breakpoint-raw-*)))),
    calc(--value(--text-base-size)rem * --value(number:***));
  )
}

Without the use of CSS variables, it looks like this:

@utility text-md-8-16-2xl {
  font-size: clamp(
    calc(.25rem * 8),
    calc(calc(.25rem * 8) + (calc(.25 * 16) - calc(.25 * 8)) * ((100vw - 48rem) / (96 - 48))),
    calc(.25rem * 16));
}

And after editing with Lightning CSS, the final CSS looks like this:

.text-md-8-16-2xl {
  font-size: clamp(2rem, 4.16667vw, 4rem);
}

@adamwathan Wouldn't that be something that could be integrated?

It is important that you really do the whole thing without CSS variables. This is the only way Lightning CSS can fully utilise its strengths and simplify the mathematical calculations with CSS.

To realise this, I am currently working with theme().

For example, I don't understand why you need CSS variables for padding, margin etc.. If you pass a calculation to Lightning CSS, the final CSS with the actual final calculation value is much shorter.

That's the way it is now:

.p-3 {
    padding: calc(var(--spacing)* 3);
}

It would be better if it was:

.p-3 {
    padding: calc(.25rem * 3);
}

And final after Lightning CSS it would look like this:

.p-3 {
    padding: .75rem;
}