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

作者：佚名时间：2022-09-09

React组件开发过程中往往为了偷懒而使用JSX行内样式进行开发, 后续才进行拆分模块化
但是拆分的时候,复制JSX的行内样式转成CSS就是很恶心🤢的一个问题,要把引号去掉,把逗号改为分号,驼峰改成中划线
源自偷懒的本能, 索性就造个轮子解决一下~
同时也造了个Alfred的插件 https://github.com/WangGuibin/WGBToolsConfigRepository/raw/master/oh-my-workflows/JSX行内样式与CSS样式互转工具.alfredworkflow

JSX => CSS

驼峰 => 中划线

单/双引号转无引号

逗号转分号

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;

分号分割

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

核心代码

 //驼峰转中划线
    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);
        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;
    }