search

Poimen / stencil-tailwind-plugin

Plugin for using tailwindcss with StencilJS
https://www.npmjs.com/package/stencil-tailwind-plugin
MIT License
51 stars 5 forks source link

No styles generated when referencing functional components in another functional component #13

Closed dnnsjsk closed 2 years ago

dnnsjsk commented 2 years ago

Hey,

first of all, great plugin! Works wonderfully besides the problem in the title.

I've seen the entry in the readme, but for me no styles are being generated at all, even when the build command is run.

Poimen commented 2 years ago

Thanks, glad it is working (for the most part 😀)

I'm away at the moment so will have a look next week when I'm back in the office.

Off the top of my head, I think that the import chain might be incorrectly looking up. I didn't consider this use case unfortunately.

Poimen commented 2 years ago

The current way the Stencil compiler works makes this non-fixable.

In the assumption that:

Main Component imports FC1 which imports FC2
MC -> FC1 -> FC2

Stencil builds MC, then FC1, then MC Stylesheet, then lastly FC2.

We use the MC stylesheet to inject the styles from FC1, but because FC2 is done last, the stylesheet cannot be updated as it has been processed already. The compilation all happens in parallel as well, so the stylesheet vs FC2 being processed is somewhat non-deterministic. You also don't know that FC2 is coming so can't delay the process until something arrives.

I have fiddled with the compilation process, but so far there doesn't seem to be a way of getting Stencil to respect the import order.

I'll make a note in the readme file, but, unfortunately won't be able to fix this bug.