Slim parser breaks Tailwind arbitrary values in shorthand syntax

[dapi]

Problem

Slim template engine's shorthand class syntax (.class-name) does not work with Tailwind's arbitrary values that use square brackets.

Example

/ ❌ Does NOT work - Slim parses [70%] as attribute, class becomes "max-w-"
.max-w-[70%]
  .content

/ ✅ Works - explicit class attribute
div class="max-w-[70%]"
  .content

/ ✅ Works - inline style
div style="max-width: 70%"
  .content

Rendered HTML (broken)

<!-- Expected -->
<div class="max-w-[70%]">...</div>

<!-- Actual -->
<div class="max-w-">...</div>

Impact

• max-width not applied, messages span full width
• Found in app/views/tenants/chats/_message.html.slim
• Fixed in PR fix: Limit chat message bubble width to 70% #164

Investigation needed

1. Is this a known Slim limitation?
2. Can we configure Slim to handle [ differently?
3. Should we add a linter rule to catch this pattern?

Workarounds

1. Use explicit class= attribute: div class="max-w-[70%]"
2. Use inline style: div style="max-width: 70%"
3. Define custom CSS class instead of arbitrary value

References

• PR fix: Limit chat message bubble width to 70% #164 - fix for chat message width
• CLAUDE.md updated with warning

[dapi]

Research: Known Slim issue

This is a known issue in Slim since March 2023:

• Support of Tailwind Arbitrary Classes slim-template/slim#906

Root cause

Slim parser uses [ as attribute delimiter in attr_list_delims. When parsing .max-w-[70%], it interprets [70%] as an attribute, truncating the class to max-w-.

Status in Slim repo

@bb created a working patch (see wip.patch) that modifies the @attr_shortcut_re regex to allow brackets in class shortcuts. However:

1. No PR created yet — patch exists but not submitted
2. Requires Tailwind changes too — Tailwind's content-finder (purger) also doesn't recognize classes from Slim that start with . and contain [

Workarounds (current)

1. Use explicit class= attribute: div class="max-w-[70%]"
2. Use inline style: div style="max-width: 70%"
3. Use [class='...'] syntax: div[class='max-w-[70%]']

Possible actions

1. Monitor Slim issue #906 for updates
2. Consider contributing to the patch/PR
3. Add project-level linter rule to catch .xxx-[ patterns in Slim files