playform / inline Goto Github PK

The generated <link onload='this.media=\' all\''/> throws caught SyntaxError: Invalid or unexpected token (at (index):17:9140) in Chrome.

The temporary fix is to do a string replace:
onload='this.media=\'all\'' -> onload="this.media='all'"

Looks like files-pipe dependency is not available anymore. I guess the lib should now rely on files-pipeline; could you please do the change?

Hi there

I've recently updated to and don't know if this is intended, but critters only started working after defining critters: true on astro config.

"astro": "^2.5.5",
"astro-critters": "^1.1.35",

...
critters({
    critters: true,
    preload: 'body',
  }),
...

also, is it possible to change the preload strategy? i thought we could override any option there.

repo here if you wanna take a look: https://github.com/bronze/carlosbronze-com-br/tree/dev

cheers!

Hi there,

<link rel="stylesheet" href="/_astro/a.e72665bf.css" media="print" onload="this.media=&apos;all&apos;"><noscript><link rel="stylesheet" href="/_astro/a.e72665bf.css">

On my critters output, the CSS file is emitted twice. Once with the media="print" and one without.

How can I fix that?

Astro version: 2.6.4
Astro critters: 1.1.38

Hi, thank you for building this tool. I was wondering how could we remove something like <link href=/_astro/index.66b179d0.css rel=stylesheet> from the built html that's already been inlined?

I haven't changed any of my config files, but critters seems to have added another /blog/ folder while trying to locate css files. here's my astro.config

import { defineConfig } from "astro/config";
import image from "@astrojs/image";
import react from "@astrojs/react";
import critters from "astro-critters";

// https://astro.build/config
import compress from "astro-compress";

// https://astro.build/config
import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
  site: "https://www.getguru.com",
  server: {
    hostname: "localhost",
    port: 3000,
  },
  base: "/blog",
  outDir: "./dist/blog",
  integrations: [
    image({
      serviceEntryPoint: "@astrojs/image/sharp",
      logLevel: "debug",
    }),
    react(),
    critters(),
    sitemap(),
  ],
});

Hello,

I'm trying to fine tune critters process, but it seems options from original Critters don't have any impact at all.

The configuration file looks like below:

  integrations: [
    critters({
      minimumExternalSize: 1000000,
      keyframes: "all",
      pruneSource: true,
      noscriptFallback: false,
    }),
  ],
});

No one option listed above doesn't have any impact on the final build - builds look identically with or without these options.

Any ideas?

Great work!
I really love it, it really was plug and play for my personal portfolio.
But i'm not sure, i don't think that this astro-critters works when you astro is in SSR mode.

I'm unable to tell why from errors, but 1.1.27 breaks the dev and build. Here's a screenshot of the error.

https://npmfs.com/package/astro-critters/2.0.0/
Previous versions does't work because files-pipe dependency was deleted from npm

Hi and thank you for your work.
I'm running the extension on a fairly large project and i get the following behavior on every file. It seems to me that it outputs the same file again and again. The project has multiple routes and thousands of files and everyone of them in the end contain the same css. I have used your extension in other projects and never had this. Using your latest version, same goes for Astro.
Another weird thing is that it ignores all options. For example:

      critters({
        exclude: [
          (file) => console.log('-------', file)
        ],
      }),

The above code does not output (as you can see on the logs bellow) the console.log. On a brand new small project it does, same package.json on both projects.

The output

Time 146.0939
4 rules skipped due to selector errors:
  .prose :where(hr + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h2 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h3 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h4 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
Inlined 17.3 kB (30% of original 56.1 kB) of _astro/about-us.8647140a.css.
Inlined 82 B (3% of original 2.49 kB) of _astro/_...page_.0f08ca28.css.
Time 159.6
4 rules skipped due to selector errors:
  .prose :where(hr + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h2 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h3 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h4 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
Inlined 17.3 kB (30% of original 56.1 kB) of _astro/about-us.8647140a.css.
Inlined 82 B (3% of original 2.49 kB) of _astro/_...page_.0f08ca28.css.

Any ideas?

Hi,

I have this Astro config:

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
import { loadEnv } from "vite";
import compress from "astro-compress";
import critters from "astro-critters";

const env = loadEnv(import.meta.env.MODE, process.cwd(), "");

// https://astro.build/config
export default defineConfig({
  site: env.SITE_URL,
  integrations: [tailwind(), sitemap(), critters(), compress()],
});

The result of this is that my critterial CSS was extracted to my index.html but that extracted CSS is not removed from my CSS file. However according to the crittiers library this CSS is removed from my CSS file.

Thanks for your awesome work!

import image from '@astrojs/image';

import { fileURLToPath } from 'url';
import path, { dirname } from 'path';
import critters from 'astro-critters';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// https://astro.build/config
export default defineConfig({
    base: '/some/subfolder',
    //site: 'https://somedomain.com/some/subfolder',
    integrations: [
        image({
            serviceEntryPoint: '@astrojs/image/sharp',
            logLevel: 'debug',
            cacheDir: './.cache/image',
        }),
        critters(),
    ],
    vite: {
        resolve: {
            alias: {
                '@/': `${path.resolve(__dirname, 'src')}/`,
            },
        },
        css: {
            devSourcemap: true,
            preprocessorOptions: {
                scss: {
                    additionalData(source, fp) {
                        // All scss files ending with globals/_.scss
                        // will not re-import additionalData
                        if (fp.indexOf('/globals/_') >= 0) return source;
                        // Use additionalData from legacy nuxt scss options
                        return `@import "@/styles/globals/globals"; ${source}`;
                    },
                },
            },
        },
    },
});

Gives this error:
Unable to locate stylesheet: [PATH HIDDEN]/dist/some/subfolder/assets/index.36b57366.css

Hi there

I'm trying to pass a :root selector trough astro-critters unsuccessfully (so far).
I have some dark mode settings set with :root[data-theme~='dark'] and I'm trying to get those into the critical css.

:root[data-theme~='dark'] {
  --color-default: 128 0 29;
  --color-primary: 94 129 172;
  ...
}

So far none of these seem to yield the desired result:

 includeSelectors: [/\:root/, /^\:root.*/, /[:]\s*root.*/, /\:root\s*\{([^}]*)\}/, /\:root\[data-theme~=['"][^'"]*['"]\]/, /\:root/, ':root', ':root[data-theme~=\'dark\']'], }

By now I'm just throwing everything and seeing what sticks...

Any ideas?

cheers

This seem good but I have more to look at - as my set might be play weird tricks upon.

GoogleChromeLabs/critters#117

It just errors (same on Netlify build):

Downgrading to v2.0.11 fixes it instantly. Astro 4.4.4.

I have a quick question about astro-critters. (Amazing stuff, BTW.) Is it currently working with the regular options? I have the following within astro.config.mjs:

integrations: [
  sitemap(),
  critters({
    pruneSource: true,
    fonts: true,
  })
]

... but it doesn't seem to respect either of those selections; CSS files aren't being "pruned" and fonts are not being inlined with the critical CSS.

I am using astro-critters 0.0.5 and astro 1.0.0-beta.17. The repo on which I'm doing this is https://github.com/brycewray/astro-site and the resulting website is https://www.brycewray.com. Note: I may take astro-critters offline on the repo and site for a while due to the CLS that's caused by the fonts not being inlined, but I'll do so by only commenting it out so you still can see what I have.

Thanks in advance for any help you might offer.

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.