diff --git a/CHANGELOG.md b/CHANGELOG.md index 180fad7acdb6..28ad6b7485a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure configured `font-feature-settings` for `mono` are included in Preflight ([#12342](https://github.com/tailwindlabs/tailwindcss/pull/12342)) - Improve candidate detection in minified JS arrays (without spaces) ([#12396](https://github.com/tailwindlabs/tailwindcss/pull/12396)) - Don't crash when given applying a variant to a negated version of a simple utility ([#12514](https://github.com/tailwindlabs/tailwindcss/pull/12514)) +- Fix support for slashes in arbitrary modifiers ([#12515](https://github.com/tailwindlabs/tailwindcss/pull/12515)) - [Oxide] Remove `autoprefixer` dependency ([#11315](https://github.com/tailwindlabs/tailwindcss/pull/11315)) - [Oxide] Fix source maps issue resulting in a crash ([#11319](https://github.com/tailwindlabs/tailwindcss/pull/11319)) - [Oxide] Fallback to RegEx based parser when using custom transformers or extractors ([#11335](https://github.com/tailwindlabs/tailwindcss/pull/11335)) diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js index d4df12286f96..a170f4f9bf0f 100644 --- a/src/util/pluginUtils.js +++ b/src/util/pluginUtils.js @@ -87,6 +87,22 @@ function isArbitraryValue(input) { function splitUtilityModifier(modifier) { let slashIdx = modifier.lastIndexOf('/') + // If the `/` is inside an arbitrary, we want to find the previous one if any + // This logic probably isn't perfect but it should work for most cases + let arbitraryStartIdx = modifier.lastIndexOf('[', slashIdx) + let arbitraryEndIdx = modifier.indexOf(']', slashIdx) + + let isNextToArbitrary = modifier[slashIdx - 1] === ']' || modifier[slashIdx + 1] === '[' + + // Backtrack to the previous `/` if the one we found was inside an arbitrary + if (!isNextToArbitrary) { + if (arbitraryStartIdx !== -1 && arbitraryEndIdx !== -1) { + if (arbitraryStartIdx < slashIdx && slashIdx < arbitraryEndIdx) { + slashIdx = modifier.lastIndexOf('/', arbitraryStartIdx) + } + } + } + if (slashIdx === -1 || slashIdx === modifier.length - 1) { return [modifier, undefined] } diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index fe85f431f82a..d0c8276145dd 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -639,6 +639,21 @@ it('should support underscores in arbitrary modifiers', () => { }) }) +it('should support slashes in arbitrary modifiers', () => { + let config = { + content: [{ raw: html`
` }], + } + + return run('@tailwind utilities', config).then((result) => { + return expect(result.css).toMatchFormattedCss(css` + .text-lg\/\[calc\(50px\/1rem\)\] { + font-size: 1.125rem; + line-height: calc(50px / 1rem); + } + `) + }) +}) + it('should not insert spaces around operators inside `env()`', () => { let config = { content: [{ raw: html`
` }],