Skip to content

Commit

Permalink
Fix generation of utilities that use slashes in arbitrary modifiers (#…
Browse files Browse the repository at this point in the history
…12515)

* Fix support for slashes in arbitrary modifiers

* Update changelog
  • Loading branch information
thecrypticace authored Dec 1, 2023
1 parent b2b37e0 commit 3169d15
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
16 changes: 16 additions & 0 deletions src/util/pluginUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]
}
Expand Down
15 changes: 15 additions & 0 deletions tests/arbitrary-values.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -639,6 +639,21 @@ it('should support underscores in arbitrary modifiers', () => {
})
})

it('should support slashes in arbitrary modifiers', () => {
let config = {
content: [{ raw: html`<div class="text-lg/[calc(50px/1rem)]"></div>` }],
}

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`<div class="grid-cols-[calc(env(safe-area-inset-bottom)+1px)]"></div>` }],
Expand Down

0 comments on commit 3169d15

Please sign in to comment.