Richtext renderer doesn't parse inline css

[m-shum]

Describe the issue you're facing

The reproduction provided below works. The production codebase I'm working in doesn't. They have the same versions of this module. The production codebase renders class attributes of inline richtext css as blank style attributes – it does not apply the classes. So instead of <p class="storyblok-class">....</p>, I get <p style>...</p>.

Classes only get applied correctly when using the defunct v-html="renderRichText(...) method, which is not applicable for my use case as this project requires custom resolvers for links.

Since the reproduction works, it's most likely an issue on my end, but I cannot for the life of me figure out what it could be since having tested with plain, non-nested richtext fields I still encountered the same problem in this particular build. I tried cloning the space and ran into the same issue. The only thing I can think of is potential package conflicts, so I've included the list of modules used in the prod codebase below. I selfishly hope I'm not the only one who's run into this.

prod codebase dependencies below:

  "dependencies": {
    "@nuxt/eslint": "^0.3.13",
    "@nuxt/ui": "^2.16.0",
    "@nuxtjs/algolia": "^1.10.2",
    "@nuxtjs/tailwindcss": "^6.11.3",
    "@pinia/nuxt": "^0.5.1",
    "@storyblok/nuxt": "^6.2.0",
    "@storyblok/vue": "^8.1.4", // locking to this version to avoid invalid watch source warn
    "@vimeo/player": "^2.23.0",
    "@vueuse/core": "^11.1.0",
    "@vueuse/nuxt": "^11.1.0",
    "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
    "axios": "^1.6.7",
    "dateformat": "^5.0.3",
    "howler": "^2.2.4",
    "lodash.clonedeep": "^4.5.0",
    "lodash.debounce": "^4.0.8",
    "lodash.merge": "^4.6.2",
    "lodash.pickby": "^4.6.0",
    "lodash.sortby": "^4.7.0",
    "marked": "^12.0.1",
    "ncp": "^2.0.0",
    "nuxt": "^3.14.1592",
    "pinia": "^2.1.7",
    "sass": "^1.70.0",
    "sitemap": "^7.1.1",
    "storyblok-markdown-richtext": "^1.0.3",
    "vue": "^3.5.13",
    "vue-router": "^4.2.5",
    "vue-scrollto": "^2.20.0",
    "vue3-carousel-nuxt": "^1.1.1",
    "vue3-smooth-scroll": "^0.8.1",
    "vue3-treeselect": "^0.1.10"
  },
  "devDependencies": {
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-recommended": "^4.1.0",
    "husky": "^8.0.0",
    "lint-staged": "^15.2.2"
  },

Reproduction

https://stackblitz.com/edit/github-ugbuh1-mtyebacy?file=app.vue

Steps to reproduce

N/A

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 147.33 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 17.6

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct