rich-1e

RT，这个算不算是😧，Vibe Coding？🤔

上午在coding页面的时候遇到一个挺烦人😡的事情：css 转內联样式。

在 Marketplace 找了一圈也没特别心仪的插件。

不是没有，而是没遇到心仪的。

主要问题是：

功能杂七杂八，不够纯粹
很久没人维护
名字取的不感冒😷，蹭热度

我就喜欢那种能将一个事情做到极致，又很纯粹的东西。

可惜，nothing。

突然想到，自己非常喜欢的工具🔧，PopClip。

它挺适合解决这个问题：选中一段css，然后转换成内联样式。

说干就干，立马派 ChatGPT 干活。

一开始，先询问“popclip 有类似的插件吗？”

ChatGPT 提示我，可以自己做一个PopClip扩展。

想了想，觉得可以，当作一个实验。

经过数轮验证和提示词修改，终于完成成品，效果还蛮理想。

Look Here👀👇

代码如下：

新建 CSS2JS.popclipext 文件夹。
创建 Config.yaml

name: CSS to JS Object
identifier: com.richie.css2js
description: Convert CSS to JavaScript style object
icon: code

actions:
  - title: CSS→JS
    icon: code
    requirements: [text]

    # PopClip 2025 官方 Shell Script Action 写法
    shell script file: css2js.py
    interpreter: python3
    stdin: text
    after: paste-result

再创建 css2js.py

#!/usr/bin/env python3
import sys

text = sys.stdin.read()

lines = [l.strip() for l in text.splitlines() if ':' in l]

entries = []

for line in lines:
    line = line.rstrip(';')
    if ':' not in line:
        continue

    prop, val = line.split(':', 1)
    prop = prop.strip()
    val = val.strip()

    parts = prop.split('-')
    camel = parts[0] + ''.join(p.capitalize() for p in parts[1:])

    entries.append(f"  {camel}: '{val}'")

print("{")
print(",\n".join(entries))
print("}")

赋予脚本可执行权限

chmod +x css2js.py

双击即可完成安装。

PopClip 插件支持2种扩展类型：

Package(当前是这种方式)
Snippet 脚本，选中一段代码，然后出现安装提示🔔。如下：

刚开始是使用第一种方式开发，看起来很简单，但始终报错运行不起来。

后面改成第二种方式，一次就跑起来了。

使用 ChatGPT 开发这个插件，也遇到一些比较头疼🤕的问题：

“ChatGPT 提供的代码始终无法运行。”

后来，我意识到问题所在：“它的训练数据可能过时了”。

因此，我改变了提示词，结果一目了然✌️。

Ref