N
Nuxt•2mo ago
Thimo_o

dynamic CSS not working in Nuxt

Hey all, I made the Nuxt-codemirror module, but I have the weirdest issue I ever encountered and hope someone could help 🥺 CodeMirror can be enhanced with extensions. All work except for the syntaxhighlighting There is a package from codemirror itself which has a basic set of extensions including highlighting. If I import that and use it highlighting works. this makes highlighting work 
<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript'
import { minimalSetup } from 'codemirror'
</script>

<template>
  <NuxtCodeMirror
    ref="codemirror"
    v-model="code"
    :extensions="[minimalSetup, javascript()]"
    style="width: 500px; height: 400px;"
    placeholder="Enter your code here..."
    :auto-focus="true"
    :basic-setup="true"
  />
</template>
<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript'
import { minimalSetup } from 'codemirror'
</script>

<template>
  <NuxtCodeMirror
    ref="codemirror"
    v-model="code"
    :extensions="[minimalSetup, javascript()]"
    style="width: 500px; height: 400px;"
    placeholder="Enter your code here..."
    :auto-focus="true"
    :basic-setup="true"
  />
</template>
the minimalSetup variable does this: 
export const minimalSetup: Extension = (() => [
  highlightSpecialChars(),
  history(),
  drawSelection(),
  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
  keymap.of([
    ...defaultKeymap,
    ...historyKeymap,
  ])
])()
export const minimalSetup: Extension = (() => [
  highlightSpecialChars(),
  history(),
  drawSelection(),
  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
  keymap.of([
    ...defaultKeymap,
    ...historyKeymap,
  ])
])()
However, when I don't use the import { minimalSetup } from "codemirror" but use my exact own function then it doesnt work. I don't know how this can happen
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Thimo_o. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information you've provided, it seems you're experiencing an issue with CSS styling not being properly applied in your Nuxt CodeMirror implementation. This appears to be related to how Nuxt handles CSS and component paths. The issue you're facing might be connected to how Nuxt resolves and processes styles, particularly for components that rely on dynamic CSS like syntax highlighting. Recent changes in Nuxt have modified how component paths and styles are handled. From the knowledge sources, there are a few relevant points that might explain your issue: 1. Nuxt recently changed how it handles component paths. According to a recent fix, Nuxt now "does not resolve non-absolute component paths" which could affect how your custom implementation works compared to the imported one GitHub PR #29036. 2. There have been changes to how Nuxt handles inline styles. In Nuxt 4, "Nuxt will now only inline styles for Vue components, not global CSS" Nuxt Upgrade Guide. This could affect how the syntax highlighting styles are applied. 3. There was also a fix for "handling runtime paths in inlined styles" GitHub PR #27327, which mentioned a regression in support for runtime public assets directories. When you import minimalSetup from the CodeMirror package, it likely includes properly bundled CSS that Nuxt can process correctly. However, when you create your own implementation, the styles might not be properly processed or included in the build. To troubleshoot this issue, you could try: 1. Check if your custom implementation is correctly importing and applying the syntaxHighlighting and defaultHighlightStyle functions. 2. Make sure your custom styles are properly included in the Nuxt build process. 3. If you're using CSS modules or PostCSS, ensure they're properly configured in your Nuxt config. 4. Consider using the inlineStyles configuration option if you need to revert to the previous behavior: 
export default defineNuxtConfig({
  features: {
    inlineStyles: true
  }
})
export default defineNuxtConfig({
  features: {
    inlineStyles: true
  }
})
Without seeing your exact custom implementation, it's difficult to pinpoint the exact cause, but these recent changes to how Nuxt handles styles and component paths are likely contributing factors to the difference in behavior you're observing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@304689805734838272> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Thimo_o
Thimo_oOP•2mo ago
Things I have tried: https://github.com/ThimoDEV/nuxt-codemirror - ssr: false in playground - <ClientOnly> - In latest push in my module I did everything manually in getDefaultExtensions - adapted styles of the codemirror instance - settimeout in onmounted of 1 sec to delay init to see if that works - I placed the import minimalSetup in my composable and in the playground, both places it instantly worked none did work so far What was weird was that at some point it seemed to work but then it was some caching or sao that kept it working, not the code itself
GitHub
GitHub - ThimoDEV/nuxt-codemirror: A nuxt codemirror module to enjo...
A nuxt codemirror module to enjoy all the runtime editor possibilities - ThimoDEV/nuxt-codemirror

Did you find this page helpful?