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 GitHub<#295 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AXPIZCNWZPYBLEWAOJR3CL3ZN6CZRAVCNFSM6AAAAABIVUUQY2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBXGYYTOOJSGM>. You are receiving this because you were mentioned.Message ID: ***@***.***>