Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve type checking for formal syntax #9349

wants to merge 4 commits into from


Copy link

@lzt1008 lzt1008 commented Sep 17, 2022

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.

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

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

@lzt1008 lzt1008 marked this pull request as draft September 17, 2022 10:51
@lzt1008 lzt1008 marked this pull request as ready for review September 17, 2022 11:58
@RobinMalfait RobinMalfait removed their request for review September 19, 2022 14:47
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

bg-[10px_10%] is missing background-size type checking
3 participants