PostCSS Ketchup

PostCSS plugin for use CSS more happy and more comfortable.

Getting Started

First thing's first, install the module:

yarn add postcss-ketchup --dev

or

npm install postcss-ketchup --save-dev

Usage

config

It's easy to get config.

when use postcss-cli:

var ketchup = require('postcss-ketchup')({
    digits: 2,
    designWidth: 375,
    ignoreDecl: [
        'font-size'
    ]
});
var autoprefixer = require('autoprefixer');
postcss([ autoprefixer, ketchup ]).process(source, { ketchup: ketchup }).then(function (result) {
    // An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
    result.content
});

when use webpack, more info to postcss-loader:

module.exports = {
  plugins: {
    'postcss-ketchup': {}
  }
}

If you happen to use Vue-Cli3, you can edit css.loaderOptions.postcss in vue.config.js file for:

{
    ...,
    postcss: {
        plugins:[
            require('postcss-ketchup')()
        ]
    }
}

process

input

@px2vw(ignoreDecl: margin-top padding, digits: 5);
.hello-ketchup{
    background: red;
    font-size: 100px;
    padding: 50px;
    margin-top: 20px;
    height: 100px;
}

px2vw's params will ignore declaration margin-top and padding prop when convert px to vw, and it will exactly keep five decimals, view more config to Config .(Do not forget semi-colon in the end)

output

.hello-ketchup{
    background: red;
    font-size: 100px;
    padding: 50px;
    margin-top: 20px;
    height: 26.66667vw;
}

Config

These are the available config options for config ketchup. Also visible in the at-rule params.

{
     // the accuracy of floating-point arithmetic during unit conversion 
     digits: 2,
     //  the width of the UI design  
     designWidth: 375,
     //  the declaration should ignore during process css
     ignoreDecl: [
         'font-size'
     ],
     //  the declaration must consider during process css
     forceDecl: []
}