Skip to content

Show warning when using unsupported bare value data type#17464

Merged
RobinMalfait merged 7 commits intomainfrom
feat/warn-when-using-invalid-bare-data-type
Apr 4, 2025
Merged

Show warning when using unsupported bare value data type#17464
RobinMalfait merged 7 commits intomainfrom
feat/warn-when-using-invalid-bare-data-type

Conversation

@RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Mar 31, 2025

This PR will show a warning if you are using a bare value data type that is not supported.

Let's say you want to create a new utility that allows color to be a bare value data type like this:

@utility paint-* { paint: --value([color], color); }

This means that this would enable new syntax that we don't support yet. E.g.: paint-#0088cc.

The only supported data types for bare values are:

  • number2.5
  • integer2
  • ratio1/2
  • percentage50%

All other data types are not supported in this position. This PR will now show a warning:

Unsupported bare value data type: "color". Only valid data types are: "number", "integer", "ratio", "percentage". ```css --value([color],color) ^^^^^ ``` 

Once we have better sourcemap / location tracking support, this warning will point to the exact spot, but for now, only a re-print of the AST can be used.

If you do want to use other data types, then you will have to use arbitrary value syntax with […] instead.

@utility paint-* { paint: --value([color]); }

This will allow for paint-[#0088cc] for example.

Note: this is not a behavioral change, we already didn't support other data types, but we silently ignored them. This means that we have to do more parsing at runtime when evaluating the utility.

With this change, a warning is shown when registering the @utility, not when using it.

@RobinMalfait RobinMalfait requested a review from a team as a code owner March 31, 2025 10:24
!BARE_VALUE_DATA_TYPES.includes(node.value)
) {
console.warn(
`Unsupported bare value data type: "${node.value}".\nOnly valid data types are: ${BARE_VALUE_DATA_TYPES.map((x) => `"${x}"`).join(', ')}\n`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adamwathan do you want to make any changes to this warning?

Output looks something like this right now:

Unsupported bare value data type: "color". Only valid data types are: "number", "integer", "ratio", "percentage" ```css --value([color],color) ^^^^^ ``` 
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My 5 ct: I don't think the term "bare value" is something that people of that API will be familiar with but maybe we just call it "value data type" (since it's the --value(…) function)?

Unsupported value data type: "color". Only valid data types are: "number", "integer", "ratio", "percentage". ```css --value([color],color) ^^^^^ ``` 

The rest I think is fine personally but I'd add a dot at the end of the second sentence

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think people writing plugins like that will be more familiar with the term (or at least should be because they will have to know the difference between color and [color]).

Main reason I used it is because that's what we use in the docs for it: https://tailwindcss.com/docs/adding-custom-styles#bare-values

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh right we do refer to it like that in the docs huh, yep then I think this does make sense

@RobinMalfait RobinMalfait force-pushed the feat/warn-when-using-invalid-bare-data-type branch from 33c8609 to 3fef1e4 Compare April 3, 2025 16:16
@RobinMalfait RobinMalfait enabled auto-merge (squash) April 4, 2025 12:17
@RobinMalfait RobinMalfait merged commit 2fd7c8d into main Apr 4, 2025
7 checks passed
@RobinMalfait RobinMalfait deleted the feat/warn-when-using-invalid-bare-data-type branch April 4, 2025 12:20
vaernion pushed a commit to Arbeidstilsynet/brevgen2 that referenced this pull request Dec 3, 2025
…minor) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@tailwindcss/postcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-postcss)) | [`4.0.17` -> `4.1.3`](https://renovatebot.com/diffs/npm/@tailwindcss%2fpostcss/4.0.17/4.1.3) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@tailwindcss%2fpostcss/4.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@tailwindcss%2fpostcss/4.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@tailwindcss%2fpostcss/4.0.17/4.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@tailwindcss%2fpostcss/4.0.17/4.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | | [tailwindcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss)) | [`4.0.17` -> `4.1.3`](https://renovatebot.com/diffs/npm/tailwindcss/4.0.17/4.1.3) | [![age](https://developer.mend.io/api/mc/badges/age/npm/tailwindcss/4.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/tailwindcss/4.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/tailwindcss/4.0.17/4.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/tailwindcss/4.0.17/4.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>tailwindlabs/tailwindcss (@&#8203;tailwindcss/postcss)</summary> ### [`v4.1.3`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#413---2025-04-04) [Compare Source](tailwindlabs/tailwindcss@v4.1.2...v4.1.3) ##### Fixed - Show warning when using unsupported bare value data type in `--value(…)` ([#&#8203;17464](tailwindlabs/tailwindcss#17464)) - PostCSS: Ensure changes to the input CSS file don't generate stale output when using Turbopack ([#&#8203;17554](tailwindlabs/tailwindcss#17554)) - Ensure classes are detected in Ruby's `%w` syntax in Slim templates ([#&#8203;17557](tailwindlabs/tailwindcss#17557)) ### [`v4.1.2`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#412---2025-04-03) [Compare Source](tailwindlabs/tailwindcss@v4.1.1...v4.1.2) ##### Fixed - Don't rely on the presence of `@layer base` to polyfill `@property` ([#&#8203;17506](tailwindlabs/tailwindcss#17506)) - Support setting multiple inset shadows as arbi...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants