feat(new tool): CSS <> XPath converter

Convert CSS Selectors from/to XPath expressions

Author: sharevb

components.d.ts

@@ -58,6 +58,7 @@ declare module '@vue/runtime-core' {
     CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
     CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
     'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
+    CssXpathConverter: typeof import('./src/tools/css-xpath-converter/css-xpath-converter.vue')['default']
     CTable: typeof import('./src/ui/c-table/c-table.vue')['default']
     'CTable.demo': typeof import('./src/ui/c-table/c-table.demo.vue')['default']
     CTextCopyable: typeof import('./src/ui/c-text-copyable/c-text-copyable.vue')['default']
@@ -132,6 +133,7 @@ declare module '@vue/runtime-core' {
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']

package.json

@@ -55,6 +55,7 @@
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",
+    "csstoxpath": "^2.0.0",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.6",
     "email-normalizer": "^1.0.0",
@@ -94,6 +95,7 @@
     "vue-tsc": "^1.8.1",
     "xml-formatter": "^3.3.2",
     "xml-js": "^1.6.11",
+    "xpath-to-css": "^1.2.0",
     "yaml": "^2.2.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -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/css-xpath-converter.vue

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

src/tools/css-xpath-converter/csstoxpath.d.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/index.ts

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

src/tools/css-xpath-converter/xpath-to-css.d.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,
     ],
   },
   {