How do I begin to make this plugin/transformer?

[minotavrr]

I'm trying to make a plugin that performs the following process before build. Note I initially want to get this working with SFCs using the Options API.

1. Looks for a specific attribute within every element in every component .
2. Takes the value of the attribute, and effectively injects it into the <style> with a random class name.
3. Appends the random class name to the class attribute of the element.

So, for example if I have this SFC:

<template>
  <div x-style="color:red;">hello world</div>
</template>

<style>
</style>

After processing we have this:

<template>
  <div class="abc123">hello world</div>
</template>

<style>
  .abc123 { color:red; }
</style>

Yes -- I want to take inline CSS and move it to the stylesheet (just for the build, not permanently). I'm aware this is a bad idea. I do not know whether this is something I could do within the application with a directive, or if I need to go deeper.

[liulinboyi]

My suggest is you can learn from these projects: unplugin-vue-macros or vite-plugin-vue-inspector or unplugin-vue-reuse-template and compiler-sfc 😉.