Vue concise syntax (maybe with .vux extension)

[alphaelf]

hi everyone, a few days ago i check around markojs framework and it's concise syntax bring this idea to my head that it would be great to have a concise and modern tools compatible syntax for vue, i know right now we can use pug but it's back-end template language and many of it's features are useless with vue like loops or conditions, and some new css tools like tailwindcss or unocss gives us powerful class names that in concise syntax of pug they get compile error like .sm:w-2/3 or .bg-[var(--primary-4)] and so on.
now consider we have a single file component as .vux like this:

:lang="js" setup
import { ref } from 'vue'
const greeting = ref('Hello World!')
---

p.greeting | {{ greeting }}

:lang="css"
.greeting {
  color: red;
  font-weight: bold;
}
---

any language block e.g. typescript, javascript, css and css preprocess sass less stylus can be start with :lang="" and ends with three dashes.
block attributes divided by spaces and like pug id defines with # and class-names starts with . but unlike pug class-name can include all characters except space, dot and hashtag.
all other content that are not in language blocks would be as main template and like pug they are indented-base syntax.
tags content separate with pipe | (surrounded by two spaces) and if content is variable use vue syntax

button.w-60.sm:w-full | Add todo

custom-component attr-1="value" :attr-2="_var2" bool-attr-1
  | Some static or {{ dynamic }} content

i know this idea is challenging and cues a lot of works but it bring new changes, less-coding and clarity.
thank you for take your time on this idea.