nuxt-speekit causing modules, plugins, or general CSS to run multiple times

[RobbieTheWagner]

Describe the bug When I use this module, all the weights for my h1-h6 get overridden with inherit. I am assuming this is because the goal of the font loading here is to define $getFont on every element that needs a different font weight, but I want to load all of these initially as preload not have to define each one. Is there a way to turn off this behavior?

[ThornWalli]

Hello @rwwagner90,

can you explain in more detail what sets the inherit in your case? We set a fallback font family when using $getFont (https://nuxt-speedkit.grabarzundpartner.dev/options#font-family).

Do you find the same behaviour on our example page? (https://nuxt-speedkit.grabarzundpartner.dev/example/)

[RobbieTheWagner]

@ThornWalli I assume your demo page does not have styles set on your headings? We have this https://github.com/shipshapecode/website-nuxt/blob/main/assets/css/_base.scss#L60

When I add nuxt-speedkit all my headings no longer have any font size or weight set and when I inspect them, I see inherit set for both. It seems your plugin is adding some resets or default sizes somewhere, and I do not want it to do that.

I would like to just use this like nuxt-font-loader-strategy and globally load fonts with preload, and not have to set $getFont on every element in the entire app.

Here is the PR where I tried to add nuxt-speedkit https://github.com/shipshapecode/website-nuxt/pull/209 unfortunately, I think there are some errors with the build, so you cannot view the preview, but if you pull it down, you can run yarn dev to run the site and see all the headings are styled wrong.

[ThornWalli]

@rwwagner90 Thank you for the links.

nuxt-speedkit only has an adaptive procedure, so it only adds, we only reset the respective element with $getFont.

Your real problem is tailwind, there is the so-called preflight (https://tailwindcss.com/docs/preflight) in the base file.

You should be able to solve the problem here: https://github.com/shipshapecode/website-nuxt/blob/11807b9e90565af3612fc395c91f588a4804ec35/assets/css/_base.scss#L60 🙂

In dev mode it should look like this:

[RobbieTheWagner]

@ThornWalli I'm not sure I understand. Without adding nuxt-speedkit tailwind and all my styles work great, but after adding nuxt-speedkit all my font sizes and weights break, which means nuxt-speedkit is causing this in some way.

I think separately from figuring this out, it would be nice to be able to set fonts: false in the config and instead use nuxt-font-loader-strategy still or allow setting preload:true on each font and not require the use of $getFont on each element.

[StephanGerbeth]

I'm trying to clear up the misunderstanding.

If I understand you correctly, you currently have the problem that in your CSS "inherit" statements appear, which prevents the correct display of the headline? Correct? If we look at your code in the browser "yarn dev" we see these "inherit" entries (see screenshot). However, in nuxt-speedkit we do not generate any such entries. However, in the browser's dev console we can see that these details are generated by Tailwind and included in your app.css (see Thorn's last post).

To address your last post - you don't need to declare fonts in nuxt-speedkit. You can also omit this specification. But then your fonts are not available via getFont. If you want to have only a full preload of all fonts, you can solve this in nuxt.config via the head declaration (https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-head & https://stackoverflow.com/questions/64855375/nuxt-js-preload-fonts-and-other-assets-configured-by-nuxt-config-js).

[RobbieTheWagner]

@StephanGerbeth not exactly, it's not about inherit appearing, it's about styles working. As I mentioned in my previous message styles work flawlessly and all fonts have the correct weights and sizes, until I add nuxt-speedkit and then everything breaks. I don't think it is a tailwind issue, as all styles work until nuxt-speedkit is installed.

What styles does nuxt-speedkit add? Is there a way to tell it to not add any styles at all?

you don't need to declare fonts in nuxt-speedkit

Ah, you are right! I must have only tried fonts: false not totally omitting fonts. Removing it allows the app to run, but I still get the weird issues with font sizes and weights being broken.

[StephanGerbeth]

we only add the following style declarations automatically:

• Font declarations for all fonts stored in the speedkit config, if the declaration is omitted, no CSS is added https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/148e5beba1ebdbefb25ff89e257dc7bc7e125d82/lib/classes/FontConfig.js#L40-L46
• css font attributes for each font added to a vnode via getFont. if the call is omitted, no CSS is added https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/main/lib/classes/Font.js#L36-L47

[RobbieTheWagner]

@StephanGerbeth something is going on because without nuxt-speedkit everything works. It seems like including it causes modules to run multiple times or tailwind styles to be included several times or something.

[StephanGerbeth]

yeah i also recognized that all tailwind declarations are included multiple times. but currently i couldn't explain if and what influence nuxt-speedkit has in your build process. we add css, but very dedicated and only when the features are used. we don't add a reset.css because we know it could have a negative impact to custom projects.

i think a smaller use case would be helpful. At this time, it is not possible for us to fully screen your entire setup and identify your current problem.

[RobbieTheWagner]

@StephanGerbeth I think just adding tailwind and nuxt-speedkit to a new project would cause the same issues. My suspicion is nuxt-speedkit is messing with modules somehow.

[StephanGerbeth]

you have this duplication prob also on your main branch. ;) you will see it in detail on the right side of the screenshots (css debug panel) e.g. app.css:461, app.css:791

Branch: Speedkit

Branch: Main (without speedkit)

i am sure that the problem originates in another place but was not visually noticeable until now.

[StephanGerbeth]

We will set up a small setup with Tailwind tomorrow and try to identify the problem you have more precisely.

[RobbieTheWagner]

@StephanGerbeth I figured it out, definitely my fault, but super weird that it never showed up until nuxt-speedkit was added! Basically I had tailwindcss in both postcss and using the nuxt module. Moving it out of postcss fixes the issue. Sorry for the noise here!