No description
Find a file
Robin Malfait f369e22172
Fix class extraction followed by ( in Slim (#17278)
This PR fixes an issue where using the class shorthand in Slim
templates, followed by an `(` results in the last class being ignored.

E.g.:

```slim
body.border-t-4.p-8(class="#{body_classes}" data-hotwire-native="#{hotwire_native_app?}" data-controller="update-time-zone")
```

This is because we will eventually extract `p-8` but it's followed by an
invalid boundary character `(`.

To solve this, we make sure to replace the `(` with a space. We already
do a similar thing when the classes are followed by an `[`.

One caveat, we _can_ have `(` in our classes, like `bg-(--my-color)`.
But in my testing this is not something that can be used in the
shorthand version.

E.g.:
```slim
div.bg-(--my-color)
```

Compiles to:
```html
<div --my-color="" class="bg-"></div>
```

So I didn't add any special handling for this. Even when trying to
escape the `(`, `-` and `)` characters, it still doesn't work. E.g.:

```slim
div.bg-\(--my-color\)
```

Compiles to:
```html
<div class="bg-">\(--my-color\)</div>
```

# Test plan

1. Added test for the issue
2. Existing tests pass
3. Verified via the extractor tool:

| Before | After |
| --- | --- |
| <img width="958" alt="image"
src="https://github.com/user-attachments/assets/f72c420e-5429-424f-a01d-12f724062bf2"
/> | <img width="958" alt="image"
src="https://github.com/user-attachments/assets/b0cc8f2f-97a8-4fca-8813-3bb1da8d99a8"
/> |

---

Fixes: #17277
2025-03-19 09:50:30 -04:00
.github Fix segmentation fault when loading @tailwindcss/oxide in a Worker thread (#17276) 2025-03-18 16:28:20 -04:00
crates Fix class extraction followed by ( in Slim (#17278) 2025-03-19 09:50:30 -04:00
integrations Fix segmentation fault when loading @tailwindcss/oxide in a Worker thread (#17276) 2025-03-18 16:28:20 -04:00
packages Ensure multiple --value(…) or --modifier(…) calls don't delete subsequent declarations (#17273) 2025-03-19 13:25:53 +00:00
patches Upgrade lightningcss (#17043) 2025-03-11 17:39:30 +01:00
playgrounds Update autoprefixer 10.4.20 → 10.4.21 (patch) (#17229) 2025-03-17 09:59:18 +00:00
scripts Prepare v4.0.1 release (#16018) 2025-01-29 14:14:35 -05:00
.gitignore Add test.debug to integration tests (#14133) 2024-08-08 12:02:19 +02:00
.npmrc introduce v4 codebase 2024-03-05 14:29:15 +01:00
.prettierignore Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
Cargo.lock Pre process <template lang="…"> in Vue files (#17252) 2025-03-17 13:54:37 +00:00
Cargo.toml Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
CHANGELOG.md Fix class extraction followed by ( in Slim (#17278) 2025-03-19 09:50:30 -04:00
LICENSE Add README, LICENSE, and CONTRIBUTING (#13088) 2024-03-05 14:45:39 -05:00
package.json Update @playwright/test 1.50.1 → 1.51.0 (minor) (#17184) 2025-03-14 17:39:35 +01:00
pnpm-lock.yaml Update autoprefixer 10.4.20 → 10.4.21 (patch) (#17229) 2025-03-17 09:59:18 +00:00
pnpm-workspace.yaml Upgrade lightningcss to 1.29.2 in Standalone (#17169) 2025-03-13 11:18:06 +01:00
README.md Copy README file to every package (#13096) 2024-03-06 08:49:31 -05:00
rust-toolchain.toml Improve Oxide candidate extractor [0] (#16306) 2025-03-05 11:55:24 +01:00
turbo.json Fix segmentation fault when loading @tailwindcss/oxide in a Worker thread (#17276) 2025-03-18 16:28:20 -04:00
vitest.workspace.ts introduce v4 codebase 2024-03-05 14:29:15 +01:00

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.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For chatting with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.