postcss-jingoal

PostCSS plugin for jingoal

Usage no npm install needed!

<script type="module">
  import postcssJingoal from 'https://cdn.skypack.dev/postcss-jingoal';
</script>

README

NPM

用途

自动解决

  • 渐变
  • 透明
  • css背景透明
  • css3值前缀
  • css3属性前缀
  • inline-block 兼容

设计由来

  • 自己开发一套css后处理规则，可根据每个公司自己的兼容方案，灵活调整
  • 一次性处理完所有的规则，如果引入第三方插件的话，需要多次循环遍历

示例代码

参考example里面的文件

/* 
演示兼容ie的解决方案
.main_content .layout_left .left_panel .ielte10{}
转化后
.ielte10 .main_content .layout_left .left_panel{}
*/
.main_content {
    .layout_left {
        .left_panel {
            .ielte10 {
                margin-top:12px;
            }
        }
    }
}
/* 
演示自动添加css3值前缀以及属性前缀
*/
.animate {
    display:flex;
    transition:all .2s ease-out;
}

/*
演示自动兼容inline-block代码
*/
.animate-inline-block {
    display:inline-block;
}

/*
演示兼容ie的透明度
*/

.animate-opacity{
    opacity:.5;
}

/*
演示兼容ie的背景透明度
*/
.animate-rgba{
    background:rgba(112,112,112,.5);
}


/*
演示兼容ie的 线性渐变
*/
.animate-rgba{
    background:linear-gradient(#fff, #000);
}