Disable Critters #849

StirStudios · 2023-09-03T00:19:36Z

Could a feature be added to disable critters?

We've been testing on a website that uses color mode switching, but we're having trouble getting it to recognize the modes and remove non-critical elements.

Currently, we're using Nuxt Purge with the following settings, and color modes are functioning properly:

[
      'nuxt-purgecss',
      {
        enabled: process.env.NODE_ENV === 'production' ? true : false,
        content: [
          'node_modules/bootstrap/**/*.js',
          'node_modules/bootstrap-vue-next/**/*.js',
          'node_modules/aos/**/*.js',
        ],
        safelist: {
          standard: [/^navbar/, /^fixed-top/, /^btn-/, /^row-/],
          deep: [],
          greedy: [],
          keyframes: [],
          variables: [],
        },
      },
    ],

When we include Nuxt Speed Kit, our Lighthouse score improves to 100 in all aspects, which is excellent. However, it disrupts the color mode.

Since your module includes critters, we have attempted to assign importance to the selectors:

  critters: {
    // Options passed directly to critters: https://github.com/GoogleChromeLabs/critters#critters-2
    config: {
      // Default: 'media'
      preload: 'swap',
      includeSelectors: [/^navbar/, /^fixed-top/],
    },
  },

But absolutely no luck.

The text was updated successfully, but these errors were encountered:

ThornWalli · 2023-09-03T09:27:16Z

@StirStudios Critters should be easy to disable via disableNuxtCritters.

https://nuxt-speedkit.grabarzundpartner.dev/v3/guide/options#disablenuxtcritters

StirStudios · 2023-09-03T15:04:19Z

@ThornWalli so sorry I missed that and wasting your time responding! Just tested and it works perfectly and we are still getting 100 lighthouse score. Keep up the great work!

ThornWalli · 2023-09-13T09:27:08Z

Hello @StirStudios ,

I have made another modifications...
Critters is now disabled by default, makes problems when you work with fonts in nuxt-speedkit because the HTML is emptied and you can not simply disable certain things.

But now there is a greater modification.
With Nuxt 3.7.2 the CSS in the Vite-Build can now be extracted, so it was possible to put the start CSS of Vite directly into the markup.
Instead of loading a CSS file or inserting it from critters.

But this also means that with the use of nuxt-speedkit you have to use the latest version of Nuxt... 3.7.2.

Would be happy about a feedback from your side 🙂

#856 856

StirStudios · 2023-09-13T09:52:19Z

Hello @ThornWalli,

Thanks so much for keeping us posted on progress!

We updated to Nuxt 3.7.2 and set disableNuxtCritters: false but we get the following error on generate:


 ERROR  <css input>:1:1: Unknown word                                                                                                                                                                                                                         2:46:09 AM

  at Input.error (node_modules/.pnpm/[email protected]/node_modules/postcss/lib/input.js:106:16)
  at Parser.unknownWord (node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:594:22)
  at Parser.other (node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:436:12)
  at Parser.parse (node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:471:16)
  at parse (node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parse.js:11:12)
  at parseStylesheet (/project/node_modules/.pnpm/[email protected]/node_modules/critters/dist/critters.mjs:776:10)
  at Critters.processStyle (/project/node_modules/.pnpm/[email protected]/node_modules/critters/dist/critters.mjs:1390:17)
  at /project/node_modules/.pnpm/[email protected]/node_modules/critters/dist/critters.mjs:1135:48
  at Array.map (<anonymous>)
  at Critters.process (/project/node_modules/.pnpm/[email protected]/node_modules/critters/dist/critters.mjs:1135:30)

Just in case we deleted node_modules and ran pnpm i

Any ideas?

ThornWalli · 2023-09-13T10:10:22Z

@StirStudios I'll take a look! Now with Critters again? 🙃

ThornWalli · 2023-09-13T11:18:59Z

@StirStudios I have now updated and understood that I have to be careful with critters.

if Critters is activated, the CSS is loaded normally. Here you can choose via vite.build.cssCodeSplit whether one or x files are loaded per component.
Critters then decides which CSS from the files comes into the markup, a disadvantage I see in it, it is unnecessarily CSS reloaded.
if Critters is disabled, I take all CSS files that are initially available and embed them in the HTML files.

StirStudios · 2023-09-13T15:46:24Z

@ThornWalli just wanting to check something is not broken on my end:

"scripts": {
"build": "nuxi build",
"dev": "nuxi dev",
"generate": "nuxi generate",
"preview": "nuxi preview",
"postinstall": "nuxi prepare",
"lint": "eslint --ext .ts,.js,.vue, --ignore-path .gitignore .",
"release": "release-it"
},
"devDependencies": {
"@bootstrap-vue-next/nuxt": "^0.12.3",
"@nuxt/devtools": "^0.8.3",
"@nuxt/image": "rc",
"@types/node": "^20.6.0",
"@typescript-eslint/eslint-plugin": "^6.7.0",
"@typescript-eslint/parser": "^6.7.0",
"@vue/eslint-config-typescript": "^12.0.0",
"bootstrap": "^5.3.1",
"bootstrap-vue-next": "^0.12.3",
"eslint": "^8.49.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.17.0",
"nuxt": "^3.7.2",
"nuxt-font-loader": "^2.3.4",
"nuxt-gtag": "^1.1.0",
"nuxt-icon": "^0.5.0",
"nuxt-purgecss": "^2.0.0",
"nuxt-seo-kit": "^1.3.13",
"prettier": "^3.0.3",
"release-it": "^16.1.5"
},
"dependencies": {
"aos": "^2.3.4",
"nuxt-speedkit": "^3.0.0-next.24",
"playwright": "^1.37.1"
}
}

I am always getting this now:

ERROR Cannot read properties of undefined (reading 'disableNuxtCritters')

Nuxt config:

[
   'nuxt-speedkit',
   {
     disableNuxtCritters: true,
     disableNuxtFontaine: true,
     disableNuxtImage: true,

     detection: {
       performance: true,
       browserSupport: true,
     },

     performanceMetrics: {
       device: {
         hardwareConcurrency: { min: 2, max: 48 },
         deviceMemory: { min: 2 },
       },
       timing: {
         fcp: 800,
         dcl: 1200,
       },
     },

     componentAutoImport: false,
     componentPrefix: undefined,

     lazyOffset: {
       component: '0%',
       asset: '0%',
     },
   },
 ],

Any ideas?

ThornWalli · 2023-09-13T15:53:27Z

@StirStudios Gave another update 🙃 3.0.0-next.25

Had incorrectly retrieved the option.

StirStudios · 2023-09-13T16:10:42Z

mmm still getting the same error even with a node_modules purge.

Nuxt Config:
"nuxt-speedkit": "3.0.0-next.25",

Complete error:

 ERROR  Cannot read properties of undefined (reading 'disableNuxtCritters')                                                                                                                                                                                   9:07:32 AM

  at optimizePreloads (/project/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/nuxt-speedkit/dist/module.mjs:300:31)
  at setup (/project/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/nuxt-speedkit/dist/module.mjs:471:7)
  at async normalizedModule (/project/node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs:2141:17)
  at async installModule (/project/node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs:2426:95)
  at async initNuxt (/project/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/nuxt/dist/index.mjs:3547:7)
  at async loadNuxt (/project/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/nuxt/dist/index.mjs:3632:5)
  at async loadNuxt (/project/node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs:2571:19)
  at async Object.run (/project/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/prepare.mjs:59:18)
  at async runCommand$1 (/project/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.46d00f54.mjs:1647:7)
  at async runCommand$1 (/project/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.46d00f54.mjs:1638:11) 

 ERROR  Cannot read properties of undefined (reading 'disableNuxtCritters')

ThornWalli · 2023-09-13T16:27:35Z

I'm ashamed to say I forgot something else. Not noticeable if property is included in the nuxt.config.

The next release should work. 3.0.0-next.26

https://github.com/GrabarzUndPartner/nuxt-speedkit/actions/runs/6175208685

StirStudios · 2023-09-13T16:47:14Z

No worries, this is a great module and glad I can help test and fix. This time it does work, I now only get a warning:

WARN [nuxt] Could not resolve /project/.nuxt/nuxt-speedkit/plugin.server.js.

ThornWalli · 2023-09-13T17:06:09Z

I get the message too, from time to time even from other plugins... Watch this, came with the latest Nuxt version.

StirStudios · 2023-09-13T17:10:40Z

Good too know, it is only a warning so assume it will get fixed with a Nuxt update! Keep up the great work and always happy to help.

StirStudios closed this as completed Sep 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Disable Critters #849

Disable Critters #849

StirStudios commented Sep 3, 2023 •

edited

Loading

ThornWalli commented Sep 3, 2023

StirStudios commented Sep 3, 2023

ThornWalli commented Sep 13, 2023

StirStudios commented Sep 13, 2023

ThornWalli commented Sep 13, 2023

ThornWalli commented Sep 13, 2023

StirStudios commented Sep 13, 2023

ThornWalli commented Sep 13, 2023 •

edited

Loading

StirStudios commented Sep 13, 2023

ThornWalli commented Sep 13, 2023

StirStudios commented Sep 13, 2023 •

edited

Loading

ThornWalli commented Sep 13, 2023

StirStudios commented Sep 13, 2023

Disable Critters #849

Disable Critters #849

Comments

StirStudios commented Sep 3, 2023 • edited Loading

ThornWalli commented Sep 3, 2023

StirStudios commented Sep 3, 2023

ThornWalli commented Sep 13, 2023

StirStudios commented Sep 13, 2023

ThornWalli commented Sep 13, 2023

ThornWalli commented Sep 13, 2023

StirStudios commented Sep 13, 2023

ThornWalli commented Sep 13, 2023 • edited Loading

StirStudios commented Sep 13, 2023

ThornWalli commented Sep 13, 2023

StirStudios commented Sep 13, 2023 • edited Loading

ThornWalli commented Sep 13, 2023

StirStudios commented Sep 13, 2023

StirStudios commented Sep 3, 2023 •

edited

Loading

ThornWalli commented Sep 13, 2023 •

edited

Loading

StirStudios commented Sep 13, 2023 •

edited

Loading