nuxt-modules / critters Goto Github PK

For example with vuetify nuxt critters adds 1sec render time to request, which isnt really usable for production.
With purged everything from css, i can get 300-400ms, whcih still a lot if we consider that its added on each request

i Inlined 1.15 kB (28% of original 3.98 kB) of inline CSS. 16:39:54
i Inlined 28.4 kB (17% of original 161 kB) of _nuxt/css/140be2a.css. 16:39:55
i Inlined 5.77 kB (22% of original 25.1 kB) of _nuxt/css/65cedc7.css. 16:39:55
i Inlined 1.98 kB (73% of original 2.71 kB) of _nuxt/css/396103a.css. 16:39:55
i Inlined 561 B (36% of original 1.52 kB) of _nuxt/css/8f8f4bf.css. 16:39:55
i Inlined 1.81 kB (95% of original 1.89 kB) of _nuxt/css/bb08894.css. 16:39:55
i Time 389.4243

So any ideas how to avoid adding this overhead on each request?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update devdependency @nuxt/eslint-config to v0.3.13
• chore(deps): update devdependency bumpp to v9.4.1
• chore(deps): update devdependency @nuxt/test-utils to v3.13.0
• chore(deps): update devdependency eslint to v9.3.0
• chore(deps): update pnpm to v9.1.1
• chore(deps): update test packages to v1.6.0 (@vitest/coverage-v8, vitest)
• chore(deps): lock file maintenance

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Is your feature request related to a problem? Please describe.

I noticed this plugin uses an outdated dependency that is currently XSS vulnerable, see GHSA-cx3j-qqxj-9597

Describe the solution you'd like to see

Hopefully the critters dependency is updated to version 0.0.20

Version

module: 0.5.1
nuxt: 2.17.1

Nuxt configuration

mode:

• universal

Nuxt configuration

 critters: {
    config: {
      path: './.nuxt/dist/client',
      external: true,
      compress: true,
      logLevel: 'debug'
    }
  },

Reproduction

It happens only in prod mode.
Issue happens when using redirect at asyncData hook, it brokes whole app.

It happens whenever i use redirect inside asyncData and accessing direct page(direct by url, or reload page), not after client navigation

I can't share code, because it is quite complex application, you will not be able to run it by yourself.

I debuged by myself, and discover issue hapens because there is almost empty markup passed here

and it get there from

What is expected?

The app doesn't crash

What is actually happening?

App crash

Steps to reproduce

1. Use asyncData with redirect inside it
2. Run app in prod mode
3. Access page directly(not after client-navigation)

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Thanks.
Feel free to ping me, I can share more details if needed.

We should extend cspScriptSrcHashes in render:route hook

Version

module: 0.5.2
nuxt: 3.8.2

Nuxt configuration

mode:

• universal
• spa

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Steps to reproduce

1. Create a new Nuxt 3.8.2 app.
2. Install @nuxtjs/critters and add it is a module to the nuxt.config.ts
3. Run npm run generate and observe the logs
4. Find the warnings like the following:

WARN Unable to locate stylesheet: /home/projects/github-ewfyox/.output/public/_nuxt/entry.34c992d7.css

I believe this should link to a reproduction where you just need to run npm run generate:
https://stackblitz.com/edit/github-ewfyox?file=nuxt.config.ts

What is expected?

Critters should be able to successfully locate the stylesheets to process.

What is actually happening?

Critters is unable to do so and issues a warning.

Additional information

I believe this issue is due to change in behavior between Nuxt 3.7.4 and Nuxt 3.8.2 where the _nuxt directory is not copied to the .output/public directory (i.e., nitro.options.output.publicDir) until after the nitro prerender hooks are run (such as the one this module uses). I was able create a monkey-patched version of this module by using path.resolve(nuxt.options.buildDir, 'dist/client') instead of nitro.options.output.publicDir, but hopefully there is a more principled solution.

Hey there,

I realized that the Google font I'm using isn't included in the static sites generated with nuxt generate

assets/css/main.scss

/* rubik-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rubik-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
  },
  css: ['~/assets/css/main.scss'],
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/critters'],
  critters: {
    // https://github.com/GoogleChromeLabs/critters#critters-2
    config: {
      preload: 'swap',
      fonts: false,
    },
  },
});

Everything is working fine in dev (npm run dev) but not for the static pages. The font is just not loading.

As soon as I remove the critters module, it's there. I played around with fonts: true - didn't help.

Any idea?

Thanks!

Version

module: 0.1.1
nuxt: 2.15.7

Nuxt configuration

mode:

• universal
• spa

What is expected?

preloading external CSS shouldn't re-rendering the page

What is actually happening?

preloading external CSS forced the browser to rerender!

Steps to reproduce

just use the module (and nothing else)

Additional information

I think this is because of ordering (styles get overridden)
First of all, we have the inlined CSS in the head section.
After that, multiple external CSS files inserted with media preloading strategy.
When each file gets loaded, the browser re-render the page because other files not loaded yet, and the inlined CSS rules get overridden by the loaded external file.
this cycle gets happening until the last external CSS loaded.

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Version

module: 0.1.1
nuxt: 2.15.7

Nuxt configuration

mode:

• universal
• spa

What is expected?

External CSS styles preloaded with media strategy

What is actually happening?

External CSS styles preloaded with the default strategy

Steps to reproduce

just use the module (and nothing else)

Additional information

When I hardcoded this line with the media, this worked as expected (maybe there is a problem with the option parameter?)

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Is your feature request related to a problem? Please describe.

Adding options to module doesn't seems to do anything atm.

Describe the solution you'd like to see

I would love to see this module support all the options of the critters package

I'm not sure how you guys go about changes like this, but I could add a PR with options support - unless you prefer to handle things like this on your own.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (:automergeEarlyMondays). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.