feat(new tool): CSS <> XPath converter

Convert CSS Selectors from/to XPath expressions

src/tools/css-xpath-converter/css-xpath-converter.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import xPathToCss from 'xpath-to-css';
+import cssToXpath from 'csstoxpath';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const cssInput = ref('');
+const xpathOutput = computed(
+  () => {
+    try {
+      return cssToXpath(cssInput.value);
+    }
+    catch (e: any) {
+      return e.toString();
+    }
+  },
+);
+
+const xpathInput = ref('');
+const cssOutput = computed(
+  () => {
+    try {
+      return xPathToCss(xpathInput.value);
+    }
+    catch (e: any) {
+      return e.toString();
+    }
+  },
+);
+</script>
+
+<template>
+  <div max-w-600>
+    <c-card title="CSS to XPath">
+      <c-input-text
+        v-model:value="cssInput"
+        placeholder="Put your CSS selector here..."
+        label="CSS selector to convert"
+        raw-text
+        mb-5
+      />
+
+      <n-divider />
+
+      <TextareaCopyable
+        label="XPath expression"
+        :value="xpathOutput"
+        readonly
+        mb-5
+      />
+    </c-card>
+
+    <c-card title="XPath to CSS" mt-5>
+      <c-input-text
+        v-model:value="xpathInput"
+        placeholder="Put your XPath expression here..."
+        label="XPath expression to convert"
+        raw-text
+        mb-5
+      />
+
+      <n-divider />
+
+      <TextareaCopyable
+        label="CSS Selector"
+        :value="cssOutput"
+        readonly
+        mb-5
+      />
+    </c-card>
+  </div>
+</template>

src/tools/css-xpath-converter/csstoxpath.d.ts

@@ -0,0 +1,3 @@
+declare module "csstoxpath" {
+    export default function cssToXPath(xpath: string): string;
+}

src/tools/css-xpath-converter/index.ts

@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'CSS XPath Converter',
+  path: '/css-xpath-converter',
+  description: 'Convert CSS selector to/from XPath expression',
+  keywords: ['css', 'xpath', 'converter'],
+  component: () => import('./css-xpath-converter.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/css-xpath-converter/xpath-to-css.d.ts

@@ -0,0 +1,3 @@
+declare module "xpath-to-css" {
+    export default function xpathToCSS(xpath: string): string;
+}

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as cssXpathConverter } from './css-xpath-converter';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -154,6 +155,7 @@ export const toolsByCategory: ToolCategory[] = [
       xmlFormatter,
       yamlViewer,
       emailNormalizer,
+      cssXpathConverter,
     ],
   },
   {