Can the plugin ignore tsx files but still work with the `@apply` directive?

[bkjohnson]

Thank you for this plugin! I think it's going to make things much easier for a project I'm on.

For my project we have a separate package where we use stencil to build web components, and most of them are using scoped CSS instead of shadow DOM. We're then using these components in an app with tailwind, so we have an app-wide global tailwind stylesheet with styles that will be available to the web components since they're not isolated in the shadow DOM. This plugin allows us to use @apply in our component stylesheets, but if the .tsx file uses a utility like flex it will also end up in the compiled stylesheet even though that class is already in the global stylesheet.

I've been trying to get the plugin to exclude utilities it finds in .tsx files without much luck. Is this possible with the current config options, or would this optimization require changes to the actual plugin itself?

[Poimen]

Hi there,

I don't believe that would be possible. I'm not sure I'm understanding your use case properly either.

@apply would want to expand itself when the TW compiler runs. Hence the output won't contain any @apply directives.

Are you wanting the directives not to expand?

You may also find that having a prefix may help you to get the special directives to be ignored, or visa versa, use a prefix for the stencil classes.

If you have a small sample repo of what you are trying to do, I could take a look next week for for you?

[bkjohnson]

I'll put together a sample repo to show the use case. A prefix sounds like it may help with the duplication but I was hoping to avoid a change in the developer experience.

[bkjohnson]

Here is the sample repo, let me know if there are any problems with the setup. I left a comment in there, but I think one thing I can do to reduce some duplication is to remove our src/components/*.tsx files from tailwind's content config option. That won't completely get rid of the problem but at least it should prevent a utility from going in the global stylesheet if it's only ever used inside of a web component.

[Poimen]

Hey @bkjohnson

Looks like I'm not going to get to this this week. Apologies for the delay, come Feb, I should have some dedicated time again to focus on this.

[bkjohnson]

No problem!

[Poimen]

Hi @bkjohnson - so far I can't think of a way to solve your problem, but not changing the DX experience is a bit challenging.

I'll keep giving it a think, but fighting with the Tailwind processor.