mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Ensure multiple theme(spacing[5]) calls with bracket notation in arbitrary properties work (#11039)
* ensure that last `]` doesn't stop the match Given this input: ```html <div class="[width:_calc(theme(spacing[5])_+_theme(spacing[5]))]"></div> ``` Then we would expect the match to be this: ``` [width:_calc(theme(spacing[5])_+_theme(spacing[5]))] ``` However, with the `?`, then it would stop and result in: ``` [width:_calc(theme(spacing[5])_+_theme(spacing[5] ``` Which makes it incomplete because the `))]` are missing at the end. * update changelog
This commit is contained in:
parent
defdc4b6d1
commit
0e2b4510a2
@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Inherit gradient stop positions when using variants ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
|
||||
- Honor default `to` position of gradient when using implicit transparent colors ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
|
||||
- Ensure `@tailwindcss/oxide` doesn't leak in the stable engine ([#10988](https://github.com/tailwindlabs/tailwindcss/pull/10988))
|
||||
- Ensure multiple `theme(spacing[5])` calls with bracket notation in arbitrary properties work ([#11039](https://github.com/tailwindlabs/tailwindcss/pull/11039))
|
||||
|
||||
## [3.3.1] - 2023-03-30
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ function* buildRegExps(context) {
|
||||
// This is a targeted fix to continue to allow theme()
|
||||
// with square brackets to work in arbitrary properties
|
||||
// while fixing a problem with the regex matching too much
|
||||
/\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
|
||||
/\[[^\s:'"`]+:[^\s]+?\[[^\s]+\][^\s]+?\]/,
|
||||
|
||||
// Utilities
|
||||
regex.pattern([
|
||||
|
||||
@ -41,6 +41,9 @@ const htmlExamples = html`
|
||||
<div class="[--y:theme(colors.blue.500)]">
|
||||
<div class="w-[calc(100%-theme('spacing.1'))]">
|
||||
<div class='w-[calc(100%-theme("spacing.2"))]'>
|
||||
<div class='w-[calc(100%-theme("spacing[2]"))]'>
|
||||
<div class='w-[calc(100%-theme(spacing[2]))]'>
|
||||
<div class='[width:calc(theme(spacing[2])_+_theme(spacing[3])_+_theme(spacing[4]))]'>
|
||||
|
||||
<script>
|
||||
let classes01 = ["text-[10px]"]
|
||||
@ -146,6 +149,10 @@ const includes = [
|
||||
`[--y:theme(colors.blue.500)]`,
|
||||
`w-[calc(100%-theme('spacing.1'))]`,
|
||||
`w-[calc(100%-theme("spacing.2"))]`,
|
||||
`w-[calc(100%-theme("spacing.2"))]`,
|
||||
`w-[calc(100%-theme("spacing[2]"))]`,
|
||||
`w-[calc(100%-theme(spacing[2]))]`,
|
||||
`[width:calc(theme(spacing[2])_+_theme(spacing[3])_+_theme(spacing[4]))]`,
|
||||
`border-[color:var(--color,theme(colors.cyan.500))]`,
|
||||
`translate-x-[var(--scroll-offset)]`,
|
||||
`font-[arbitrary,'arbitrary_with_space']`,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user