vue styling in view does not apply to html

I have set up a new project with vue3. I started working with some package implementations but then I realized my CSS written in component is not applied in HTML. Here is a very simple view example

<template>
  <div>
    <p class="asd">Hello</p>
  </div>
</template>

<style>
.asd {
  color: purple;
}
</style>

In the result, the text is not purple.
I have checked if it is overridden by some other css but no, it does not event show up in the styles screen of dev tools:

What I have tried and checked:

• I have tried writing style as "p.asd {..." and adding an !important in the end. No change.
• I have checked if I am working on the correct page by changing the text from "Hello" to "Hello World" and it changes, so I am working on the correct page.
• I got a production build if it is a dev env issue, but no, got the same result from the built html.
• I have tried moving CSS to App.vue instead, and surprisingly styling written there works but not in the views.
• I have tried on a new browser for caching issues, no change.
• I have tried adding scoped, no change.
• I have tried adding script tags, no change. Script tags work fine, console.log script works, but still no styling update.
• I have tried inline CSS and it works.

Here is my package.json:

  "name": "new-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "express": "^4.18.2",
    "firebase": "^9.22.1",
    "pinia": "^2.0.36",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0",
    "vue-tel-input": "^8.1.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "prettier": "^2.8.8",
    "vite": "^4.3.5",
    "vite-plugin-webfont-dl": "^3.7.4"
  }
}

codesandbox example: https://codesandbox.io/p/sandbox/github/ihsanser/vue-vite-style-bug/tree/master

I don't know if I am missing something very simple, but I could not figure out the reason for hours now.

The space character used in .asd { is not an actual space. It is a NBSP ¹.

Replace it with an actual space and everything will work as expected. This is not related to Vue, the behavior would be the same in React, Angular, Svelte or vanilla.

See it working.

As a side-note, this shows how important a runnable mcve is. In your question, you posted the code with a space. Not sure if this is due to the NBSP > Space conversion made by the browser when rendering the current page's HTML or if you simply didn't copy/paste the code in question.
I suspect it's the first.

¹ - encoding NBSP outputs %C2%A0, whereas encoding a normal space outputs %20