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("}")