From 3816eacf4e8950031d1d54f8370b1de88bb6cc30 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 31 Mar 2025 12:18:01 +0200 Subject: [PATCH 1/6] add failing test --- packages/tailwindcss/src/utilities.test.ts | 30 +++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 6544129c4cf7..06325988e93d 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1,4 +1,4 @@ -import { describe, expect, test } from 'vitest' +import { describe, expect, test, vi } from 'vitest' import { compile } from '.' import { compileCss, optimizeCss, run } from './test-utils/run' @@ -26530,6 +26530,34 @@ describe('custom utilities', () => { expect(await compileCss(input, ['tab-foo'])).toEqual('') }) + test('bare values with unsupported data types should result in a warning', async () => { + let spy = vi.spyOn(console, 'warn').mockImplementation(() => {}) + let input = css` + @utility paint-* { + paint: --value([color], color); + } + + @tailwind utilities; + ` + + expect(await compileCss(input, ['paint-#0088cc', 'paint-red'])).toMatchInlineSnapshot(`""`) + expect(spy.mock.calls).toMatchInlineSnapshot(` + [ + [ + "Unsupported bare value data type: "color". + Only valid data types are: "number", "integer", "ratio", "percentage" + ", + ], + [ + "\`\`\`css + --value([color],color) + ^^^^^ + \`\`\`", + ], + ] + `) + }) + test('resolve literal values', async () => { let input = css` @utility tab-* { From 7b4a7735fd7728a3dae0b4f9e28b0d56c1bc682d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 31 Mar 2025 11:51:00 +0200 Subject: [PATCH 2/6] list all allowed bare value data types --- packages/tailwindcss/src/utilities.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index e2f35382284c..6977884e261d 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -5692,6 +5692,16 @@ export function createUtilities(theme: Theme) { return utilities } +// Only allowed bare value data types, to prevent creating new syntax that we +// typically don't support right now. E.g.: `--value(color)` would allow you to +// use `text-#0088cc` as a valid utility, which is not what we want. +export const BARE_VALUE_DATA_TYPES = [ + 'number', // 2.5 + 'integer', // 8 + 'ratio', // 2/3 + 'percentage', // 25% +] + export function createCssUtility(node: AtRule) { let name = node.params @@ -6084,12 +6094,7 @@ function resolveValueFunction( // Limit the bare value types, to prevent new syntax that we // don't want to support. E.g.: `text-#000` is something we // don't want to support, but could be built this way. - if ( - arg.value !== 'number' && - arg.value !== 'integer' && - arg.value !== 'ratio' && - arg.value !== 'percentage' - ) { + if (!BARE_VALUE_DATA_TYPES.includes(arg.value)) { continue } From fb6ad292ec8a870cbfd2d21c3c700a038118ee4c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 31 Mar 2025 12:18:20 +0200 Subject: [PATCH 3/6] =?UTF-8?q?show=20warning=20when=20using=20`--value(?= =?UTF-8?q?=E2=80=A6)`=20with=20unsupported=20bare=20value=20type?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tailwindcss/src/utilities.ts | 33 +++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 6977884e261d..70fb18aac32f 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -5834,8 +5834,7 @@ export function createCssUtility(node: AtRule) { } fn.nodes = ValueParser.parse(args.join(',')) - // Track information for suggestions - for (let node of fn.nodes) { + for (let [idx, node] of fn.nodes.entries()) { // Track literal values if ( node.kind === 'word' && @@ -5851,6 +5850,36 @@ export function createCssUtility(node: AtRule) { let value = node.value.replace(/-\*.*$/g, '') as `--${string}` storage[fn.value].themeKeys.add(value) } + + // Validate bare value data types + else if ( + node.kind === 'word' && + !(node.value[0] === '[' && node.value[node.value.length - 1] === ']') && // Ignore arbitrary values + !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`, + ) + // TODO: Once we properly track the location of the node, we can + // clean this up in a better way. + let dataType = node.value + let copy = structuredClone(fn) + let sentinelValue = '¶' + ValueParser.walk(copy.nodes, (node, { replaceWith }) => { + if (node.kind === 'word' && node.value === dataType) { + replaceWith({ kind: 'word', value: sentinelValue }) + } + }) + let underline = '^'.repeat(ValueParser.toCss([node]).length) + let offset = ValueParser.toCss([copy]).indexOf(sentinelValue) + let output = [ + '```css', + ValueParser.toCss([fn]), + ' '.repeat(offset) + underline, + '```', + ].join('\n') + console.warn(output) + } } }) From cad60cb17ad3495fcb2f2514834d479c75f1bc81 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 31 Mar 2025 17:36:51 +0200 Subject: [PATCH 4/6] remove `idx` --- packages/tailwindcss/src/utilities.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 70fb18aac32f..eb657920984d 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -5834,7 +5834,7 @@ export function createCssUtility(node: AtRule) { } fn.nodes = ValueParser.parse(args.join(',')) - for (let [idx, node] of fn.nodes.entries()) { + for (let node of fn.nodes) { // Track literal values if ( node.kind === 'word' && From c2adfadb9375a316c31152e7aad56e075dd0df32 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 31 Mar 2025 18:46:27 +0200 Subject: [PATCH 5/6] add missing `.` --- packages/tailwindcss/src/utilities.test.ts | 2 +- packages/tailwindcss/src/utilities.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 06325988e93d..c0286428f2d7 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -26545,7 +26545,7 @@ describe('custom utilities', () => { [ [ "Unsupported bare value data type: "color". - Only valid data types are: "number", "integer", "ratio", "percentage" + Only valid data types are: "number", "integer", "ratio", "percentage". ", ], [ diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index eb657920984d..a5254865095b 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -5858,7 +5858,7 @@ export function createCssUtility(node: AtRule) { !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`, + `Unsupported bare value data type: "${node.value}".\nOnly valid data types are: ${BARE_VALUE_DATA_TYPES.map((x) => `"${x}"`).join(', ')}.\n`, ) // TODO: Once we properly track the location of the node, we can // clean this up in a better way. From 3fef1e45ffe6c975f982e8a1d268812733df561d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 3 Apr 2025 18:15:38 +0200 Subject: [PATCH 6/6] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae525cc8c69b..a6920db92139 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - PostCSS: Ensure files containing `@tailwind utilities` are processed ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514)) - Ensure the `color-mix(…)` polyfill creates fallbacks even when using colors that cannot be statically analyzed ([#17513](https://github.com/tailwindlabs/tailwindcss/pull/17513)) - Fix slow incremental builds with `@tailwindcss/vite` and `@tailwindcss/postscss` (especially on Windows) ([#17511](https://github.com/tailwindlabs/tailwindcss/pull/17511)) +- Show warning when using unsupported bare value data type in `--value(…)` ([#17464](https://github.com/tailwindlabs/tailwindcss/pull/17464)) ## [4.1.1] - 2025-04-02