diff --git a/CHANGELOG.md b/CHANGELOG.md index 652c33fb106b..96297b4d449d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) +### Fixed + +- Guard object lookups against inherited prototype properties ([#19725](https://github.com/tailwindlabs/tailwindcss/pull/19725)) + +## [4.2.1] - 2026-02-23 + +### Fixed + +- Allow trailing dash in functional utility names for backwards compatibility ([#19696](https://github.com/tailwindlabs/tailwindcss/pull/19696)) +- Properly detect classes containing `.` characters within curly braces in MDX files ([#19711](https://github.com/tailwindlabs/tailwindcss/pull/19711)) + ## [4.2.0] - 2026-02-18 ### Added @@ -25,7 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `inline-*`, `min-inline-*`, `max-inline-*` utilities for `inline-size`, `min-inline-size`, and `max-inline-size` ([#19612](https://github.com/tailwindlabs/tailwindcss/pull/19612)) - Add `block-*`, `min-block-*`, `max-block-*` utilities for `block-size`, `min-block-size`, and `max-block-size` ([#19612](https://github.com/tailwindlabs/tailwindcss/pull/19612)) - Add `inset-s-*`, `inset-e-*`, `inset-bs-*`, `inset-be-*` utilities for `inset-inline-start`, `inset-inline-end`, `inset-block-start`, and `inset-block-end` ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613)) -- Add `font-features-*` utility for `font-feature-settings` ([#19623](https://github.com/tailwindlabs/tailwindcss/pull/19615)) +- Add `font-features-*` utility for `font-feature-settings` ([#19623](https://github.com/tailwindlabs/tailwindcss/pull/19623)) ### Fixed @@ -46,7 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Deprecated -- Deprecate `start-*` and `end-*` utilities in favor of `inline-s-*` and `inline-e-*` utilities ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613)) +- Deprecate `start-*` and `end-*` utilities in favor of `inset-s-*` and `inset-e-*` utilities ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613)) ## [4.1.18] - 2025-12-11 @@ -3941,7 +3952,8 @@ No release notes - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.0...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.1...HEAD +[4.2.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.0...v4.2.1 [4.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.18...v4.2.0 [4.1.18]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.17...v4.1.18 [3.4.19]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.18...v3.4.19 diff --git a/crates/node/npm/android-arm-eabi/package.json b/crates/node/npm/android-arm-eabi/package.json index cba6fedce0b2..34a1c58a54e0 100644 --- a/crates/node/npm/android-arm-eabi/package.json +++ b/crates/node/npm/android-arm-eabi/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-android-arm-eabi", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/android-arm64/package.json b/crates/node/npm/android-arm64/package.json index 0950b7a03e95..909ddf9145f4 100644 --- a/crates/node/npm/android-arm64/package.json +++ b/crates/node/npm/android-arm64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-android-arm64", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/darwin-arm64/package.json b/crates/node/npm/darwin-arm64/package.json index 423333d61dcf..bfeb71630488 100644 --- a/crates/node/npm/darwin-arm64/package.json +++ b/crates/node/npm/darwin-arm64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-darwin-arm64", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/darwin-x64/package.json b/crates/node/npm/darwin-x64/package.json index 81007674ee5c..bf4bfe6524e2 100644 --- a/crates/node/npm/darwin-x64/package.json +++ b/crates/node/npm/darwin-x64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-darwin-x64", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/freebsd-x64/package.json b/crates/node/npm/freebsd-x64/package.json index 8c25927edc39..0619de4ad584 100644 --- a/crates/node/npm/freebsd-x64/package.json +++ b/crates/node/npm/freebsd-x64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-freebsd-x64", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm-gnueabihf/package.json b/crates/node/npm/linux-arm-gnueabihf/package.json index b2a4c0281127..cd818b2aa2da 100644 --- a/crates/node/npm/linux-arm-gnueabihf/package.json +++ b/crates/node/npm/linux-arm-gnueabihf/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm-gnueabihf", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm64-gnu/package.json b/crates/node/npm/linux-arm64-gnu/package.json index e1855f2894c3..9dd325f38624 100644 --- a/crates/node/npm/linux-arm64-gnu/package.json +++ b/crates/node/npm/linux-arm64-gnu/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm64-gnu", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm64-musl/package.json b/crates/node/npm/linux-arm64-musl/package.json index c6b96ab8ab14..991a9c2104b3 100644 --- a/crates/node/npm/linux-arm64-musl/package.json +++ b/crates/node/npm/linux-arm64-musl/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm64-musl", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-x64-gnu/package.json b/crates/node/npm/linux-x64-gnu/package.json index 2d4fa6fe3c84..847484f1dcb5 100644 --- a/crates/node/npm/linux-x64-gnu/package.json +++ b/crates/node/npm/linux-x64-gnu/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-x64-gnu", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-x64-musl/package.json b/crates/node/npm/linux-x64-musl/package.json index 5855b5d6a331..66acddc12fe0 100644 --- a/crates/node/npm/linux-x64-musl/package.json +++ b/crates/node/npm/linux-x64-musl/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-x64-musl", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/wasm32-wasi/package.json b/crates/node/npm/wasm32-wasi/package.json index 0c1defca3a43..25807493d8d4 100644 --- a/crates/node/npm/wasm32-wasi/package.json +++ b/crates/node/npm/wasm32-wasi/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-wasm32-wasi", - "version": "4.2.0", + "version": "4.2.1", "cpu": [ "wasm32" ], diff --git a/crates/node/npm/win32-arm64-msvc/package.json b/crates/node/npm/win32-arm64-msvc/package.json index 633a4d12eb9c..2dca490b5005 100644 --- a/crates/node/npm/win32-arm64-msvc/package.json +++ b/crates/node/npm/win32-arm64-msvc/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-win32-arm64-msvc", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/win32-x64-msvc/package.json b/crates/node/npm/win32-x64-msvc/package.json index 99dca35d18c4..ddcf1802662e 100644 --- a/crates/node/npm/win32-x64-msvc/package.json +++ b/crates/node/npm/win32-x64-msvc/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-win32-x64-msvc", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/package.json b/crates/node/package.json index 6da669ced184..f16920029f84 100644 --- a/crates/node/package.json +++ b/crates/node/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide", - "version": "4.2.0", + "version": "4.2.1", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/oxide/src/extractor/pre_processors/markdown.rs b/crates/oxide/src/extractor/pre_processors/markdown.rs index d2acc6a58738..488614ee57bd 100644 --- a/crates/oxide/src/extractor/pre_processors/markdown.rs +++ b/crates/oxide/src/extractor/pre_processors/markdown.rs @@ -9,6 +9,7 @@ impl PreProcessor for Markdown { let len = content.len(); let mut result = content.to_vec(); let mut cursor = cursor::Cursor::new(content); + let mut bracket_stack = vec![]; let mut in_directive = false; @@ -18,11 +19,17 @@ impl PreProcessor for Markdown { result[cursor.pos] = b' '; in_directive = true; } + (true, b'(' | b'[' | b'{' | b'<') => { + bracket_stack.push(cursor.curr()); + } + (true, b')' | b']' | b'}' | b'>') if !bracket_stack.is_empty() => { + bracket_stack.pop(); + } (true, b'}') => { result[cursor.pos] = b' '; in_directive = false; } - (true, b'.') => { + (true, b'.') if bracket_stack.is_empty() => { result[cursor.pos] = b' '; } _ => {} @@ -60,4 +67,17 @@ mod tests { Markdown::test(input, expected); } } + + #[test] + fn test_nested_classes_keep_the_dots() { + for (input, expected) in [ + ( + r#"{
}"#, + r#"
"#, + ), + (r#"{content-['example.js']}"#, r#" content-['example.js'] "#), + ] { + Markdown::test(input, expected); + } + } } diff --git a/crates/oxide/src/extractor/pre_processors/ruby.rs b/crates/oxide/src/extractor/pre_processors/ruby.rs index 1f2221414ff4..5a3a0fabbfc7 100644 --- a/crates/oxide/src/extractor/pre_processors/ruby.rs +++ b/crates/oxide/src/extractor/pre_processors/ruby.rs @@ -124,7 +124,9 @@ impl PreProcessor for Ruby { // Except for strict locals, these are defined in a `<%# locals: … %>`. Checking if // the comment is preceded by a `%` should be enough without having to perform more // parsing logic. Worst case we _do_ scan a few comments. - b'#' if !matches!(cursor.prev(), b'%') => { + // + // We also want to skip interpolation syntax, which look like `#{…}`. + b'#' if !matches!(cursor.prev(), b'%') && !matches!(cursor.next(), b'{') => { result[cursor.pos] = b' '; cursor.advance(); @@ -388,6 +390,20 @@ mod tests { Ruby::test_extract_contains(input, vec!["z-1", "z-2", "z-3"]); } + // https://github.com/tailwindlabs/tailwindcss/issues/19728 + #[test] + fn test_interpolated_expressions() { + let input = r#" + def width_class(width = nil) + <<~STYLE_CLASS + #{width || 'w-100'} + STYLE_CLASS + end + "#; + + Ruby::test_extract_contains(input, vec!["w-100"]); + } + // https://github.com/tailwindlabs/tailwindcss/issues/19239 #[test] fn test_skip_comments() { diff --git a/packages/@tailwindcss-browser/package.json b/packages/@tailwindcss-browser/package.json index 8075cfb3fc0c..12442e87e66b 100644 --- a/packages/@tailwindcss-browser/package.json +++ b/packages/@tailwindcss-browser/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/browser", - "version": "4.2.0", + "version": "4.2.1", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "./dist/index.global.js", diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json index af488a701caa..2a91542f1059 100644 --- a/packages/@tailwindcss-cli/package.json +++ b/packages/@tailwindcss-cli/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/cli", - "version": "4.2.0", + "version": "4.2.1", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-node/package.json b/packages/@tailwindcss-node/package.json index 064b53f802a7..c4d7d48739ad 100644 --- a/packages/@tailwindcss-node/package.json +++ b/packages/@tailwindcss-node/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/node", - "version": "4.2.0", + "version": "4.2.1", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index 5180133e8f27..6052a08b070b 100644 --- a/packages/@tailwindcss-postcss/package.json +++ b/packages/@tailwindcss-postcss/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/postcss", - "version": "4.2.0", + "version": "4.2.1", "description": "PostCSS plugin for Tailwind CSS, a utility-first CSS framework for rapidly building custom user interfaces", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-standalone/package.json b/packages/@tailwindcss-standalone/package.json index 50039f29a459..b25d5bb9e04b 100644 --- a/packages/@tailwindcss-standalone/package.json +++ b/packages/@tailwindcss-standalone/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/standalone", - "version": "4.2.0", + "version": "4.2.1", "private": true, "description": "Standalone CLI for Tailwind CSS", "license": "MIT", diff --git a/packages/@tailwindcss-upgrade/package.json b/packages/@tailwindcss-upgrade/package.json index b8191e23c58e..cf9de79d6a11 100644 --- a/packages/@tailwindcss-upgrade/package.json +++ b/packages/@tailwindcss-upgrade/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/upgrade", - "version": "4.2.0", + "version": "4.2.1", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json index db0297fc215a..24fac1bd46c6 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/packages/@tailwindcss-vite/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/vite", - "version": "4.2.0", + "version": "4.2.1", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-webpack/README.md b/packages/@tailwindcss-webpack/README.md index 55e60562203c..56484ed7f0f6 100644 --- a/packages/@tailwindcss-webpack/README.md +++ b/packages/@tailwindcss-webpack/README.md @@ -1,4 +1,43 @@ -# @tailwindcss/webpack +

+ + + + + Tailwind CSS + + +

+ +

+ A utility-first CSS framework for rapidly building custom user interfaces. +

+ +

+ Build Status + Total Downloads + Latest Release + License +

+ +--- + +## Documentation + +For full documentation, visit [tailwindcss.com](https://tailwindcss.com). + +## Community + +For help, discussion about best practices, or feature ideas: + +[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions) + +## Contributing + +If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**. + +--- + +## @tailwindcss/webpack A webpack loader for Tailwind CSS v4. @@ -8,7 +47,7 @@ A webpack loader for Tailwind CSS v4. npm install @tailwindcss/webpack ``` -## Usage +### Usage ```javascript // webpack.config.js @@ -31,13 +70,12 @@ Then create a CSS file that imports Tailwind: ```css /* src/index.css */ -@import 'tailwindcss/theme'; -@import 'tailwindcss/utilities'; +@import 'tailwindcss'; ``` -## Options +### Options -### `base` +#### `base` The base directory to scan for class candidates. Defaults to the current working directory. @@ -50,7 +88,7 @@ The base directory to scan for class candidates. Defaults to the current working } ``` -### `optimize` +#### `optimize` Whether to optimize and minify the output CSS. Defaults to `true` in production mode. diff --git a/packages/@tailwindcss-webpack/package.json b/packages/@tailwindcss-webpack/package.json index 0fcf0d3f7b0c..ed9206a9e7c0 100644 --- a/packages/@tailwindcss-webpack/package.json +++ b/packages/@tailwindcss-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/webpack", - "version": "4.2.0", + "version": "4.2.1", "description": "A webpack loader for Tailwind CSS v4.", "license": "MIT", "repository": { diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index abe6da365387..f98c80152d65 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "4.2.0", + "version": "4.2.1", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 4e35afa5a84e..cc410995b442 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -4592,4 +4592,48 @@ describe('config()', () => { expect(fn).toHaveBeenCalledWith('defaultvalue') }) + + // https://github.com/tailwindlabs/tailwindcss/issues/19721 + test('matchUtilities does not match Object.prototype properties as values', async ({ + expect, + }) => { + let input = css` + @tailwind utilities; + @plugin "my-plugin"; + ` + + let compiler = await compile(input, { + loadModule: async (id, base) => { + return { + path: '', + base, + module: plugin(function ({ matchUtilities }) { + matchUtilities( + { + test: (value) => ({ '--test': value }), + }, + { + values: { + foo: 'bar', + }, + }, + ) + }), + } + }, + }) + + // These should not crash or produce output + expect( + optimizeCss( + compiler.build([ + 'test-constructor', + 'test-hasOwnProperty', + 'test-toString', + 'test-valueOf', + 'test-__proto__', + ]), + ).trim(), + ).toEqual('') + }) }) diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts index 5954040017d2..af6e98d770ff 100644 --- a/packages/tailwindcss/src/compat/plugin-api.ts +++ b/packages/tailwindcss/src/compat/plugin-api.ts @@ -202,6 +202,9 @@ export function buildPluginApi({ ruleNodes.nodes, ) } else if (variant.value.kind === 'named' && options?.values) { + if (!Object.hasOwn(options.values, variant.value.value)) { + return null + } let defaultValue = options.values[variant.value.value] if (typeof defaultValue !== 'string') { return null @@ -223,8 +226,14 @@ export function buildPluginApi({ let aValueKey = a.value ? a.value.value : 'DEFAULT' let zValueKey = z.value ? z.value.value : 'DEFAULT' - let aValue = options?.values?.[aValueKey] ?? aValueKey - let zValue = options?.values?.[zValueKey] ?? zValueKey + let aValue = + (options?.values && Object.hasOwn(options.values, aValueKey) + ? options.values[aValueKey] + : undefined) ?? aValueKey + let zValue = + (options?.values && Object.hasOwn(options.values, zValueKey) + ? options.values[zValueKey] + : undefined) ?? zValueKey if (options && typeof options.sort === 'function') { return options.sort( @@ -406,10 +415,13 @@ export function buildPluginApi({ value = values.DEFAULT ?? null } else if (candidate.value.kind === 'arbitrary') { value = candidate.value.value - } else if (candidate.value.fraction && values[candidate.value.fraction]) { + } else if ( + candidate.value.fraction && + Object.hasOwn(values, candidate.value.fraction) + ) { value = values[candidate.value.fraction] ignoreModifier = true - } else if (values[candidate.value.value]) { + } else if (Object.hasOwn(values, candidate.value.value)) { value = values[candidate.value.value] } else if (values.__BARE_VALUE__) { value = values.__BARE_VALUE__(candidate.value) ?? null @@ -430,7 +442,7 @@ export function buildPluginApi({ modifier = null } else if (modifiers === 'any' || candidate.modifier.kind === 'arbitrary') { modifier = candidate.modifier.value - } else if (modifiers?.[candidate.modifier.value]) { + } else if (modifiers && Object.hasOwn(modifiers, candidate.modifier.value)) { modifier = modifiers[candidate.modifier.value] } else if (isColor && !Number.isNaN(Number(candidate.modifier.value))) { modifier = `${candidate.modifier.value}%` diff --git a/packages/tailwindcss/src/compat/plugin-functions.ts b/packages/tailwindcss/src/compat/plugin-functions.ts index f311ad1e8c43..40b8c93e89f1 100644 --- a/packages/tailwindcss/src/compat/plugin-functions.ts +++ b/packages/tailwindcss/src/compat/plugin-functions.ts @@ -223,8 +223,10 @@ function get(obj: any, path: string[]) { for (let i = 0; i < path.length; ++i) { let key = path[i] - // The key does not exist so concatenate it with the next key - if (obj?.[key] === undefined) { + // The key does not exist so concatenate it with the next key. + // We use Object.hasOwn to avoid matching inherited prototype properties + // (e.g. "constructor", "toString") when traversing config objects. + if (obj === null || obj === undefined || typeof obj !== 'object' || !Object.hasOwn(obj, key)) { if (path[i + 1] === undefined) { return undefined } @@ -233,11 +235,6 @@ function get(obj: any, path: string[]) { continue } - // We never want to index into strings - if (typeof obj === 'string') { - return undefined - } - obj = obj[key] } diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 7bd03b577f66..e562cd3be15a 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1646,6 +1646,13 @@ test('row', async () => { 'row-span-full/foo', 'row-[span_123/span_123]/foo', 'row-span-[var(--my-variable)]/foo', + + // Candidates matching Object.prototype properties should not crash or + // produce output (see: https://github.com/tailwindlabs/tailwindcss/issues/19721) + 'row-constructor', + 'row-hasOwnProperty', + 'row-toString', + 'row-valueOf', ]), ).toEqual('') @@ -28428,7 +28435,7 @@ describe('custom utilities', () => { test.each([ ['foo', false], // Simple name, missing '-*' suffix ['foo-*', true], // Simple name - ['foo--*', false], // Root should not end in `-` + ['foo--*', true], // Root ending in `-` is valid (e.g. `border--*`) ['-foo-*', true], // Simple name (negative) ['foo-bar-*', true], // With dashes ['foo_bar-*', true], // With underscores @@ -28900,6 +28907,38 @@ describe('custom utilities', () => { expect(await compileCss(input, ['tab-3', 'tab-gitlab'])).toEqual('') }) + test('functional utility with double-dash separator', async () => { + let input = css` + @theme reference { + --color-border-0: #e5e7eb; + --color-border-1: #d1d5db; + --color-border-2: #9ca3af; + } + + @utility border--* { + border-color: --value(--color-border-*, [color]); + } + + @tailwind utilities; + ` + + expect(await compileCss(input, ['border--0', 'border--1', 'border--2'])) + .toMatchInlineSnapshot(` + ".border--0 { + border-color: var(--color-border-0, #e5e7eb); + } + + .border--1 { + border-color: var(--color-border-1, #d1d5db); + } + + .border--2 { + border-color: var(--color-border-2, #9ca3af); + }" + `) + expect(await compileCss(input, ['border--3'])).toEqual('') + }) + test('resolving values from `@theme`, with `--tab-size-*` syntax', async () => { let input = // Explicitly not using the css tagged template literal so that diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 69837e0d3345..62e4510b7309 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -391,6 +391,8 @@ export function createUtilities(theme: Theme) { * user's theme. */ function functionalUtility(classRoot: string, desc: UtilityDescription) { + if (desc.staticValues) desc.staticValues = Object.assign(Object.create(null), desc.staticValues) + function handleFunctionalUtility({ negative }: { negative: boolean }) { return (candidate: Extract) => { let value: string | null = null @@ -6659,22 +6661,21 @@ export function isValidFunctionalUtilityName(name: string): boolean { let root = match[0] let value = name.slice(root.length) - // Root should not end in `-` if there is no value - // - // `tab-size--*` - // --------- Root - // -- Suffix - // - // Because with default values, this could match `tab-size-` which is invalid. - if (value.length === 0 && root.endsWith('-')) { - return false - } - // No remaining value is valid // // `tab-size-*` // -------- Root // -- Suffix + // + // Backwards compatibility: a root ending in `-` was valid and correctly + // scanned by Oxide. This means that custom utilities can result in candidates + // such as `foo--bar`. + // + // We might want to revisit this for Tailwind CSS v5, but for now we have to + // make it backwards compatible. + // + // PR: https://github.com/tailwindlabs/tailwindcss/pull/19696 + // if (value.length === 0) { return true }