search

mayank99 / ecsstatic

the predefinite CSS-in-JS library for vite
https://ecsstatic.dev
Other
273 stars 8 forks source link

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

Closed ivancuric closed 9 months ago

ivancuric commented 1 year ago

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 1 year ago

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 1 year ago

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 1 year ago

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

https://github.com/mayank99/ecsstatic/assets/2827047/ec62b4a9-b940-4a18-b13d-57219e2141e1

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 1 year ago

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

mayank99 commented 1 year ago

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

mayank99 commented 1 year ago

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.

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.