Improve type checking for formal syntax

[lzt1008]

There are type validators in dataType.js referencing CSS Types, but splitting the basic data types(<length> and <percentage> ) is not a good solution for further maintenance and development. We can just keep them as minimal validators for the css data type.

In my opinion, familyName and position is something like value definition syntax. And we should take them out as validators for formal syntax for better type checking, and dataType.js is only for basic css data types.

This PR created validateFormalSyntax.js and size type (or formal syntax) for better background-size checking based on background-size MDN web docs.

tailwindcss/src/util/validateFormalSyntax.js

Line 22 in b37a44a

export function backgroundSize(value) {

and I think it's also a better solution for #7997, which can also fix #9352

Also, as MDN web doc says, the calc() min() max() clamp() function can all be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. So we can basically just check the value is wrapped by css functions in number, length, and percentage

tailwindcss/src/util/dataTypes.js

Line 9 in b37a44a

function isCSSFunction(value) {

So we can now create some crazy stuff like

/* bg-[rgb(11,22,33)] */
.bg-\[rgb\(11\2c 22\2c 33\)\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 22 33 / var(--tw-bg-opacity))
}

/* bg-[linear-gradient(45deg,_red_0_50%,_blue_50%_100%)] */
.bg-\[linear-gradient\(45deg\2c _red_0_50\%\2c _blue_50\%_100\%\)\] {
  background-image: linear-gradient(45deg, red 0 50%, blue 50% 100%)
}

/* bg-[auto_auto,cover,_contain,calc(10px_+_12%),max(20px,_10%)_10%] */
.bg-\[auto_auto\2c cover\2c _contain\2c calc\(10px_\+_12\%\)\2c max\(20px\2c _10\%\)_10\%\] {
  background-size: auto auto,cover, contain,calc(10px + 12%),max(20px, 10%) 10%
}

discussions: #9351

[RobinMalfait]

Hey! Thank you for your PR!
Much appreciated! 🙏

We recently introduced another fix where we can define fallback plugins in case we have colliding plugins where we guess what the most likely plugin is that should generate the output instead of generating nothing which requires you to add a typehint.

Because of this a few changes have been made to your PR here: #9448

Thanks for the PR!