mayank99/ecsstatic

Styles not being extracted, but class is present in SolidJS render

Closed this issue · 6 comments

ivancuric commented

Not something I was able to reproduce on a smaller sample, but at one point some components simply stopped having their styles generated. I will have a hash, like ez5lpn, but the generated CSS is empty.

Extracting to smaller components doesn't help.

I'm using SolidJS. Is there anything I can do to give you more context, as I am currently unable to share the project itself?

What I've noticed is that ordering seems to matter. If I move one component lower in the tree or higher, this will have an impact on which components will stop having their styles generated.

Extracting the css from an inline class={css``} to a declaration outside the component helps.

mayank99 commented

could you share your component file and your config if possible?

and yes, css`` is mainly meant to be assigned to declarations, especially when interpolating values.

ivancuric commented

Will try to make a repro!

Having inline css`` was actually the main selling point as I was looking for a Tailwind alternative.

ivancuric commented

Here's an extremely weird thing: Deleting a piece of commented out code impacts the extraction

Screen.Recording.2023-07-18.at.19.52.04.mov

The component:

      <div
        class={css`
          position: absolute;
          bottom: 10%;
          left: 0;
          width: 100%;
          pointer-events: none;
        `}
      >
        <Logo
          class={css`
            width: 115px;
            height: 53px;
            margin: auto;
            filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1))
              drop-shadow(0px 0px 15px rgba(0, 0, 0, 1));
          `}
        />
      </div>

Even if I extract these styles out, their declarations need to be in the right order:

const captureScreenRootStyles = css`
  background-color: var(--mb-gray-overlay-bg);
  color: var(--mb-color-white);
`;

const captureScreenPortalStyles = css`
  height: 100vh;
  width: 100vw;
  height: 100dvh;
  width: 100dvw;
  position: fixed;
  top: 0;
  left: 0;
  &:focus-visible {
    outline: none;
  }
`;

const logoStyles = css`
  width: 115px;
  height: 53px;
  margin: auto;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1))
    drop-shadow(0px 0px 15px rgba(0, 0, 0, 1));
`;

const logoPositionerStyles = css`
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  pointer-events: none;
`;

const videoStyles = css`
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: contain;
`;
mayank99 commented

thanks for the info, i'll investigate this. the commented out code might be affecting output due to a string escaping issue.

mayank99 commented

as for the order thing, i would recommend using cascade layers if you have conflicting styles applied on the same element.

mayank99 commented

unfortunately, i have not been able to reproduce this.

the commented out code thing might just be an HMR issue. if you refresh the page, it should remove any styles for commented out code.

other than that, i would need more info to really be able to help you out.

  • package versions
  • config
  • any other relevant packages/plugins you may be using together

a potential guess: are you by any chance using the exact same set of declarations across different components? or maybe same file names? these would get the same hash, so it's possible that vite thinks the styles are already included.

you can try inspecting the <style> tags that get injected into the <head> to get a closer look at what's happening.