tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Improve type checking for formal syntax

Open lzt1008 opened this issue 1 year ago • 0 comments

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. https://github.com/tailwindlabs/tailwindcss/blob/b37a44a85d803ca353f299c1989c425874da9af5/src/util/validateFormalSyntax.js#L22 and I think it's also a better solution for https://github.com/tailwindlabs/tailwindcss/issues/7997, which can also fix https://github.com/tailwindlabs/tailwindcss/issues/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 https://github.com/tailwindlabs/tailwindcss/blob/b37a44a85d803ca353f299c1989c425874da9af5/src/util/dataTypes.js#L9

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: https://github.com/tailwindlabs/tailwindcss/discussions/9351

lzt1008 avatar Sep 17 '22 10:09 lzt1008