feat(new tool): CSS <> XPath converter

Convert CSS Selectors from/to XPath expressions

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

@@ -65,6 +65,9 @@ dependencies:
   crypto-js:
     specifier: ^4.1.1
     version: 4.1.1
+  csstoxpath:
+    specifier: ^2.0.0
+    version: 2.0.0
   date-fns:
     specifier: ^2.29.3
     version: 2.29.3
@@ -182,6 +185,9 @@ dependencies:
   xml-js:
     specifier: ^1.6.11
     version: 1.6.11
+  xpath-to-css:
+    specifier: ^1.2.0
+    version: 1.2.0
   yaml:
     specifier: ^2.2.1
     version: 2.2.1
@@ -3360,7 +3366,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.11.1(vue@3.3.4)
+      '@vueuse/shared': 11.0.3(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,19 +3999,19 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.11.1(vue@3.3.4):
+  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
-      vue-demi: 0.14.10(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@10.3.0(vue@3.3.4):
+  /@vueuse/shared@11.0.3(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+    resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4692,7 +4698,6 @@ packages:
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -4714,6 +4719,13 @@ packages:
       rrweb-cssom: 0.6.0
     dev: true
 
+  /csstoxpath@2.0.0:
+    resolution: {integrity: sha512-tSEk+82vIIcjvLA6WHu1YiCuZ49Rtpv+3bmmiCu2NyGyvlzZUTzQbTGvKdojiyJmYlVfpA2l41HhPpmurxRqSA==}
+    engines: {node: '>=18'}
+    dependencies:
+      css-what: 6.1.0
+    dev: false
+
   /csstype@3.0.11:
     resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
     dev: false
@@ -9587,6 +9599,11 @@ packages:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
     dev: true
 
+  /xpath-to-css@1.2.0:
+    resolution: {integrity: sha512-jOSBw4iYbm9inNP0DbQB7cO0tPBfogG3oLA739eTO3WgJXAelLyZcFlCe2W/gBaYXT0pglXN6tJ7svFVaewBmA==}
+    engines: {node: '>=4.0.0'}
+    dev: false
+
   /y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
     dev: false

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,
     ],
   },
   {