In lining CSS breaks styles.

[JojokCreator]

Hi, trying to use this amazing tool in a project. It works well for the most part but I have a few pages with embedded videos using https://astro-embed.netlify.app/components/youtube/ when I build and deploy the project the styles on the videos seem to get broken.

https://stackblitz.com/edit/withastro-astro-wsnvzt <-- example here.

To reproduce run npm run dev = styles are okay.

npm run preview (with the inlined css) = styles are broken.

[ebursztein]

Thanks

[NikolaRHristov]

@JojokCreator I tried running it with:

npm install ; npm run build ; npm run preview

and styles are working correctly and they're inlined:

Am I missing something?

[JojokCreator]

Hi, Thanks for looking into this. Open the page in a new tab and press play on the video.

It doesn't fill the container like it should, normally.

[NikolaRHristov]

Managed to reproduce. I think this is due to reduceInlineStyles https://github.com/GoogleChromeLabs/critters#properties

reduceInlineStyles [Boolean]

(https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) 
Option indicates if inline styles should be evaluated for critical CSS.

By default inline style tags will be evaluated and rewritten to only contain critical CSS.

Set it to false to skip processing inline styles. (default: true)

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  integrations: [
    (await import('@playform/inline')).default({
      Critters: {
        reduceInlineStyles: false,
      },
    }),
  ],
});

should be working fine:

Somehow these styles get omitted because there's no active class on the component yet.

reduceInlineStyles

Will be disabled by default in the latest version.

[JojokCreator]

Perfect thank you.

---

From: Nikola Hristov @.> Sent: Wednesday, July 24, 2024 6:03:52 PM To: PlayForm/Inline @.> Cc: J_Klakus @.>; Mention @.> Subject: Re: [PlayForm/Inline] In lining CSS breaks styles. (Issue #295)

Managed to reproduce. I think this is due to reduceInlineStyles https://github.com/GoogleChromeLabs/critters#properties

import { defineConfig } from 'astro/config';

// https://astro.build/config export default defineConfig({ integrations: [ (await @.***/inline')).default({ Critters: { reduceInlineStyles: false, }, }), ], });

should be working fine:

image.png (view on web)https://github.com/user-attachments/assets/a16ccbbb-a328-4fd3-8279-af3e65f4f74d

Somehow these styles get omitted because there's no active class on the component yet.

image.png (view on web)https://github.com/user-attachments/assets/531182ab-f0a2-4ff7-a0ce-564bbbe12560

reduceInlineStyles

Will be disabled by default in the latest version.

— Reply to this email directly, view it on GitHubhttps://github.com/PlayForm/Inline/issues/295#issuecomment-2247617923, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AXPIZCNWZPYBLEWAOJR3CL3ZN6CZRAVCNFSM6AAAAABIVUUQY2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBXGYYTOOJSGM. You are receiving this because you were mentioned.Message ID: @.***>