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

With shadow dom enabled, tailwind adds shadow styles #1

Open Poimen opened 3 years ago

Poimen commented 3 years ago

Stencil imports use a ?...shadow that causes tailwind jit to input shadow styles into the final out even when shadows are not used

pranav-js commented 2 years ago

can you please fix this? I was planning to use this plugin for my stencil web components project. tailwind 3.0.0 has lot to offer with JIT enabled.

Poimen commented 2 years ago

As memory serves it adds a single class for tailwind v3. This equates to a couple of bytes per component. Is this a showstopper?

I'll have a look at it in the new year. Not sure the time to do it, as well as the added runtime parsing is worth it, though...

pranav-js commented 2 years ago

didn't get what you meant by As memory serves it adds a single class for tailwind v3. can you please elaborate

Poimen commented 2 years ago

As in, the tailwind class that is added is:

.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

So those bytes are what are included - so 270 bytes extra...

pranav-js commented 2 years ago

gotcha., I guess there is no workaround for this since for shadow dom components this is way to go.

Poimen commented 2 years ago

To some degree, yes. The pattern matching is pretty broad, so even when you use HTML elements (e.g. HTMLDivElement) to get node info, this triggers tailwind, and any purge, to detect "html" and then the component has html selector.

My idea was to pre-parse the tsx and remove the import statements. That way it just reduces the attack surface.