Skip to content

Conversation

dimitribarbot
Copy link
Contributor

@dimitribarbot dimitribarbot commented May 23, 2025

Support for callable template literals

Description

This PR adds support for callable template literals as it was done for member template literals.
It aims at solving use cases when using the tailwind-styled-components library.

Problem

When extending components using tailwind-styled-components and following the documentation described here, we must write something such as:

const DefaultContainer = tw.div`
    flex
    items-center
`

const RedContainer = tw(DefaultContainer)`
    bg-red-300
`

However, the classes under the RedContainer component will not be handled by the prettier plugin as only the following options are currently supported:

tw.foo`sm:p-1 p-2`;
tw.foo.bar`sm:p-1 p-2`;
tw.foo('sm:p-1 p-2');
tw.foo.bar('sm:p-1 p-2');

Solution

I added the following as supported options:

tw(Foo)`sm:p-1 p-2`;
tw(Foo)(Bar)`sm:p-1 p-2`;
tw(Foo)('sm:p-1 p-2');
tw(Foo)(Bar)('sm:p-1 p-2');

Testing

I added new test cases and ran npm run test to confirm plugin compatibility and ensure no regressions.

Fixes #248

@dimitribarbot dimitribarbot force-pushed the add-support-for-callable-template-literals branch from 72a2c96 to 23094c7 Compare May 23, 2025 17:11
@thecrypticace thecrypticace self-assigned this May 23, 2025
@thecrypticace
Copy link
Contributor

@dimitribarbot I made some tweaks so traverse both calls and property accesses at the same time.

This will let things like these work:

tw(SomeComponent).div`this is now sorted`
tw.div(SomeComponent)`this is now sorted`

Not sure if this syntax is commonplace or not but seems reasonable to support it regardless (and it simplifies the code a bit too).

I don't suspect there will be any issues with that. Can you think of any?

@dimitribarbot
Copy link
Contributor Author

Thanks for these changes, the code is indeed simpler this way!

I hesitated to apply them, but ultimately felt it would be simpler (in terms of PR review) to leave them as is. For example, the factorization between isSortableTemplateExpression and isSortableCallExpression hadn't been done before, so I didn't do it myself.

I also don't think there will be any issues with these modifications, they allow generalization to all use cases.

Thanks again!

@thecrypticace
Copy link
Contributor

Planning on taking another look at this soon (this week or next week) as i'm gonna get some changes into a v0.7.0 release.

@thecrypticace thecrypticace added this to the 0.7.0 milestone Jul 23, 2025
@thecrypticace
Copy link
Contributor

thecrypticace commented Jul 23, 2025

todo for me (soon): See if this resolves #248 as well confirmed

@thecrypticace thecrypticace changed the title feat: Add support for callable template literals when using custom JSX parser Add support for callable template literals when using custom JSX parser Jul 31, 2025
@thecrypticace thecrypticace merged commit db0bd74 into tailwindlabs:main Jul 31, 2025
1 check passed
mattiamalonni added a commit to mattiamalonni/prettier-plugin-tailwindcss that referenced this pull request Jul 31, 2025
* tailwind-main:
  Add support for callable template literals when using custom JSX parser (tailwindlabs#367)
  Handle quotes in `@plugin`, `@config`, and `@source` (tailwindlabs#387)
  Drop support for `prettier-plugin-import-sort` (tailwindlabs#385)
  Remove `declare` to clean up global scope (tailwindlabs#354)
@dimitribarbot dimitribarbot deleted the add-support-for-callable-template-literals branch August 20, 2025 12:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Styling an existing component doesn't seem to work in twin.macro/react-twc

2 participants