JSX行内样式与CSS样式互转工具

React组件开发过程中 往往为了偷懒而使用JSX行内样式进行开发, 后续才进行拆分模块化
但是拆分的时候,复制JSX的行内样式转成CSS就是很恶心🤢的一个问题,要把引号去掉,把逗号改为分号,驼峰改成中划线
源自偷懒的本能, 索性就造个轮子解决一下~
同时也造了个Alfred的插件 插件直链🔗
既然是写代码 当然是vscode啦 插件地址 或者搜jsx2css

JSX => CSS

1. 驼峰 => 中划线
2. 单/双引号转无引号
3. 逗号转分号

jsx

display:'flex',
justifyContent:'flex-start’,
flexDirection:’row’,
alignItems:’center’,
flexFlow:’wrap',

CSS => JSX

css

display:flex;
justify-content:flex-start;
flex-direction:row;
align-items:center;
flex-flow:wrap;

1. 分号分割
2. 遍历 分割冒号
   a. 第一部分 中划线 => 驼峰
   b. 第二部分 加上单引号
   c. 拼接第一第二部分 用逗号连接

核心代码

 //驼峰转中划线
    function toKebabCase(text) {
        return text.replace(/([A-Z])/g, "-$1").toLowerCase();
    }

    //中划线转驼峰
    function toCamelCase(name) {
        return name.replace(/\-(\w)/g, function(all, letter) {
            return letter.toUpperCase();
        });
    }
    //jsx => css
    function jsx2css(text) {
        text = toKebabCase(text);
        text = text.replace(/\"/g, "");
        text = text.replace(/\'/g, "")
        text = text.replace(/,/g, ";")
        return text;
    }
    //css => jsx
    function css2jsx(text) {
        var rowArr = text.split(';');
        rowArr.pop();
        var result = '';
        for (let i = 0; i < rowArr.length; i++) {
            var ele = rowArr[i].split(":");
            var firstEle = ele[0].trim();
            var prefix = toCamelCase(firstEle) + ':'
            var lastEle = ele[1].trim();
            result += prefix + "'" + lastEle + "',";
            result += '\n';
        }
        return result;
    }

<!-- run -->
  <style>
        @import url(https://files.cnblogs.com/files/wgb1234/monoFont.css);
        .btn {
            display: inline-block;
            box-shadow: 2px 2px 3px #999;
            margin-top: 200px;
            margin-left: 20px;
            background: linear-gradient(90deg, #ff5511, #ff0000);
            color: white;
            font-family: 'mono-font';
            font-size: 12px;
            font-weight: bold;
            border-radius: 20px;
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            user-select: none;
        }


        .text-bg {
            margin-top: 30px;
            margin-left: 0px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }

        .input-text {
            margin-left: 20px;
            resize: none;
            padding: 10px;
            font-family: 'mono-font';
            font-size: 15px;
            font-weight: bold;
        }

        .bg {
            margin: 20px;
            position: relative;
            max-width: 326px;
            max-height: 522px;
        }

        .copyBtn {
            font-family: 'mono-font';
            text-align: center;
            top: 5px;
            right: -10px;
            position: absolute;
            background-color: #000;
            color: #fff;
            font-size: 12px;
            width: 64px;
            height: 25px;
            line-height: 25px;
            border-radius: 10px;
        }
    </style>
  <div class="text-bg">
        <div class="bg">
            <span class="copyBtn" id="copy-jsx">复制代码</span>
            <textarea class="input-text" name="jsx-text" id="input" cols="32" rows="25" placeholder="输入JSX行内样式"></textarea>
        </div>
        <div class="btn" id="jsx2css">JSX <==> CSS</div>
        <div class="bg">
            <span class="copyBtn" id="copy-css">复制代码</span>
            <textarea class="input-text" name="css-text" id="output" cols="32" rows="25" placeholder="输入CSS样式"></textarea>
        </div>
    </div>

    <script>

        //驼峰转中划线
        function toMidLine(text) {
            return text.replace(/([A-Z])/g, "-$1").toLowerCase();
        }

        //中划线转驼峰
        function toHump(name) {
            return name.replace(/\-(\w)/g, function (all, letter) {
                return letter.toUpperCase();
            });
        }
        //jsx => css
        function jsx2css(text) {
            text = toMidLine(text).trim();
            text = text.replace(/\"/g, "");
            text = text.replace(/\'/g, "")
            text = text.replace(/,/g, ";")
            return text;
        }
        //css => jsx
        function css2jsx(text) {
            var rowArr = text.split(';');
            rowArr.pop();
            var result = '';
            for (let i = 0; i < rowArr.length; i++) {
                var ele = rowArr[i].split(":");
                var firstEle = ele[0].trim();
                var prefix = toHump(firstEle) + ':'
                var lastEle = ele[1].trim();
                result += prefix + "'" + lastEle + "',";
                result += '\n';
            }
            return result;
        }
        function setClipboardText(value) {
            const text = document.createElement("textarea");
            text.value = value;
            document.body.appendChild(text);
            text.select();
            document.execCommand("Copy");
            text.remove();
        }
        function copyToClipboard(content) {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(content).then(() => {
                    window.ele.$notify({
                        title: '温馨提示',
                        message: '复制成功',
                        type: 'success',
                        position: 'top-right'
                    });
                });
            } else {
                setClipboardText(content)
                window.ele.$notify({
                    title: '温馨提示',
                    message: '复制成功',
                    type: 'success',
                    position: 'top-right'
                });
            }
        }

        var jsx2cssBtn = document.getElementById("jsx2css");
        var copyCssBtn = document.getElementById("copy-css");
        var copyJsxBtn = document.getElementById("copy-jsx");
        var jsxDom = document.getElementById("input");
        var cssDom = document.getElementById("output");

        copyCssBtn.onclick = function () {
            copyToClipboard(cssDom.value);
        }

        copyJsxBtn.onclick = function () {
            copyToClipboard(jsxDom.value);
        }

        jsx2cssBtn.onclick = function () {
            if (jsxDom.value.includes('\'') ||
                jsxDom.value.includes('\"') ||
                jsxDom.value.match(/[A-Z]/g)) {
                var css = jsx2css(jsxDom.value)
                cssDom.value = css;
            } else {
                if (cssDom.value.length) {
                    var jsx = css2jsx(cssDom.value)
                    jsxDom.value = jsx;
                }
            }
        };
    </script>