fix(compiler): support dots in class binding names - #71137
vslipchenko wants to merge 1 commit into
Conversation
angular-robot
Bot
added
the
area: compiler
5cf0db0 to
0198ee2
Compare
JeanMeche
left a comment
JeanMeche
left a comment
There was a problem hiding this comment.
AGENT: Looks good to me. The fix for dot truncation in CLASS_DOT class bindings is correct and well-tested.
0198ee2 to
b53fa41
Compare
JeanMeche
added
the
requires: TGP
|
Can you please also check that the vscode-language-service integration also works. |
Treat everything after the `class.` prefix as the class name, both in template bindings and in `host` bindings. Previously the name was cut at the next dot, so a binding like `[class.px-3.5]` silently applied `px-3` instead of `px-3.5`. This made single class bindings unusable with class names that contain a dot, which are common in Tailwind.
b53fa41 to
d0ef3b9
Compare
Manually tested in a locally built extension in VS Code - looks good. Component-side (via host binding): Added two quick info tests (template and host binding) for class names with a dot. The template test also asserts there are no diagnostics. |
|
Great it looks fine. To make sure we won't break anything I'll run some extended tests (TGP) on Google's codebase over the weekend. |
2 participants
Class bindings cut the class name at the first dot after the
class.prefix, so a binding like[class.px-3.5]="condition"silently appliespx-3instead ofpx-3.5. No error or warning is reported. The same happens forhostbindings, e.g.host: {'[class.py-2.5]': 'condition'}appliespy-2.This makes single class bindings unusable with class names that contain a dot, which are common in Tailwind (
px-3.5,w-1.5,gap-0.5).Background
[class.px-3.5]renders aspx-3(syntax highlighting issue with class binding and tailwind classes聽#67679 (comment)).vscode-ng-language-service/syntaxes/, so the rendering behavior described in that comment was not changed and is not tracked by an open issue./,:,[...]), andattr.bindings already keep everything after the prefix. Dots in class names were the remaining gap.PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
[class.px-3.5]="true"adds the classpx-3.Issue Number: N/A (reported in a comment on #67679)
What is the new behavior?
[class.px-3.5]="true"adds the classpx-3.5.Does this PR introduce a breaking change?
Other information