feat(new tool): CSS Prettier

CSS Prettier

src/tools/css-prettifier/css-prettifier.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import beautify from 'js-beautify';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputCSS = ref('');
+const outputCSS = computed(() => {
+  return beautify.css(inputCSS.value, {
+    indent_char: ' ',
+    indent_size: 2,
+    sep: '\n',
+  });
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputCSS"
+      multiline raw-text
+      placeholder="Your CSS content..."
+      rows="8"
+      autofocus
+      label="Your CSS to format (can paste from clipboard):"
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output prettified CSS:">
+      <TextareaCopyable
+        :value="outputCSS"
+        multiline
+        language="css"
+        word-wrap
+      />
+    </n-form-item>
+  </div>
+</template>