@apply styles do not work until a full page reload

[joewoodhouse]

Using the example project: https://github.com/Poimen/stencil-tailwind-plugin-example

Reproduction:

• Run the dev server (npm start)
• Add a style via @apply to e.g. hero-section.css

After the above, the component is refreshed but the @apply directive is directly put onto the component, without being transformed into it's proper tailwind class. For example if I add

@apply text-clip

My component ends up with this style:

If I manually reload the page, the style appears properly (e.g. text-overflow: clip; in the above example). But it would be great if this worked properly. Happy to help with a fix but not really sure where to start.

[Poimen]

This is a stencil dev server reload issue.

As a work around you can use:

  devServer: {
    reloadStrategy: 'pageReload'
  }

as part of the settings - see readme

The HMR is a little off - the HMR runs before the transform, but the transformed code is not used in the HMR ... it uses the return from the HMR, but that source hasn't been transformed yet either.

I was erring on the side of not processing the same files multiple times - so once in the HMR and again in the main loop. The main loop happens during build and dev server, but HMR only in the dev server configuration. Hence, can't/don't want to fiddle with the main loop.

I've looked more into the HMR recently, and I think there could be a fix to apply the TW transform (which should be pretty quick).

I'm just fiddling with some test cases, but should be able to push a new version tomorrow :+1:

[joewoodhouse]

@Poimen thanks for the detailed explanation, much appreciated.

I did wonder if that workaround mentioned in the readme was for this issue I hit but I wasn't 100% sure.

Amazing that you think you might have a fix - do let me know if I can help in any way, I'm not an expert in Stencil internals but happy to give anything a go!

[joewoodhouse]

@Poimen sorry I see you already made the changes.

To let you know I've just tried your latest version out locally and it's fixed the problem for me, nice work! 🥳

[Poimen]

Awesome sauce 👍

I've published 1.7.0 with those changes. There is also a new config function setPluginConfigurationDefaults that saves some of the boiler plate configuration being repeated.

I'm going to close this now, but if 1.7.0 doesn't work, then feel free to re-open 😃

[Poimen]

oh, I've also updated the dependencies for the example project 👍

[joewoodhouse]

@Poimen nice one, and yea I tried out the setPluginConfigurationDefaults and that seemed to work nicely for me 👍