feat: css in js convert features that actually work

Author: zardoy

package.json

@@ -49,8 +49,16 @@
                 "title": "Next Letter Swap Case"
             },
             {
-                "command": "fixCss",
-                "title": "Fix CSS: Adopt CSS-IN-JS"
+                "command": "fixCssInJs",
+                "title": "Fix CSS: Convert CSS-in-JS..."
+            },
+            {
+                "command": "fixCssToJs",
+                "title": "Fix CSS: CSS to JS"
+            },
+            {
+                "command": "fixJsToCss",
+                "title": "Fix CSS: JS to CSS"
             },
             {
                 "command": "insertAutoCompletions",
@@ -723,7 +731,7 @@
         "@types/minimatch": "^3.0.5",
         "@types/pluralize": "^0.0.29",
         "@zardoy/utils": "^0.0.9",
-        "@zardoy/vscode-utils": "^0.0.50",
+        "@zardoy/vscode-utils": "^0.0.52",
         "ansi-escapes": "^6.2.0",
         "change-case": "^4.1.2",
         "create-index": "^2.6.0",
@@ -740,6 +748,8 @@
         "path-browserify": "^1.0.1",
         "pid-cwd": "^1.2.0",
         "pluralize": "github:plurals/pluralize",
+        "postcss": "^8.4.33",
+        "postcss-js": "^4.0.1",
         "rambda": "^6.9.0",
         "remark": "^14.0.2",
         "string-dedent": "^3.0.1",

pnpm-lock.yaml

@@ -0,0 +1,73 @@
+import * as vscode from 'vscode'
+import { registerTextEditorCommand } from '@zardoy/vscode-utils/build/commands'
+import { noCase } from 'change-case'
+import { getExtensionCommandId, registerExtensionCommand, showQuickPick } from 'vscode-framework'
+import postcssJs from 'postcss-js'
+import postcss from 'postcss'
+
+export default () => {
+    registerTextEditorCommand('fixCssInJs', async (editor, _, mode) => {
+        const commands = ['fixCssToJs', 'fixJsToCss']
+        let command: string | undefined
+        if (mode === 'auto')
+            command =
+                editor.document.languageId === 'css' || editor.document.languageId === 'scss' || editor.document.languageId === 'less'
+                    ? 'fixCssToJs'
+                    : 'fixJsToCss'
+        else
+            command = await showQuickPick(
+                commands.map(command => ({
+                    label: noCase(command),
+                    value: command,
+                })),
+            )
+
+        if (!command) return
+        await vscode.commands.executeCommand(getExtensionCommandId(command as any))
+    })
+
+    registerTextEditorCommand('fixJsToCss', async editor => {
+        let text = editor.document.getText(editor.selection)
+        if (!text.trim()) return
+        const transformJsPropToCss = (prop: string) => {
+            const converted = prop.replace(/([A-Z])/g, '-$1').toLowerCase()
+            return converted
+        }
+
+        text = text.replaceAll(/(\w+)(: )/gi, (_, prop, after) => {
+            const converted = transformJsPropToCss(prop)
+            return `${converted}${after}`
+        })
+        text = text.replaceAll(/: (.*?),?(\r?\n|$)/g, (_, value, ending) => {
+            let converted = Number.isNaN(Number(value)) ? value : `${value}px`
+            if (converted.startsWith("'") || converted.startsWith('"')) converted = converted.slice(1, -1)
+            return `: ${converted};${ending ?? ''}`
+        })
+        await editor.edit(edit => edit.replace(editor.selection, text))
+    })
+    registerTextEditorCommand('fixCssToJs', async editor => {
+        const text = editor.document.getText(editor.selection)
+        if (!text.trim()) return
+        const root = postcss.parse(text)
+
+        const patch = input => {
+            if (typeof input === 'object') {
+                const result = {}
+                for (const key of Object.keys(input)) result[key] = patch(input[key])
+
+                return result
+            }
+
+            if (typeof input === 'string') {
+                const pxMatch = /^(\d+)px$/.exec(input)
+                return pxMatch ? +pxMatch[1]! : input
+            }
+
+            return input
+        }
+
+        const transformed = JSON.stringify(patch(postcssJs.objectify(root)), null, '\t')
+        await editor.edit(edit => edit.replace(editor.selection, transformed.slice(1, -1)))
+    })
+    // todo suggest file imports
+}