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.

So I've created a pull request that created validateFormalSyntax.js and size type (or formal syntax) for better background checks based on MDN web docs. (#9349)

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) {

[lzt1008]

If this checking is too strict for us, I think we can also by checking the keywords(using regex), such asbackground :

url | gradient                           => background-image
rgb | hsl | # (only startWith) | color   => background-color
left | right | top | bottom | position   => background-position
auto | cover | contain | size            => background-size

so we can also infer the type of css variable (only contains the keyword):

bg[var(--some-color)]    => background-color
bg[var(--some-position)] => background-position
bg[var(--some-size)]     => background-size

and offer users a config like

// tailwind.config.js
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
  strict: true,
}

to switch between keyword mode and formal syntax mode.