# postcss-ketchup

> PostCSS plugin 🍅

Latest version **0.0.1** (published 2018-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-ketchup
pnpm add postcss-ketchup
yarn add postcss-ketchup
bun add postcss-ketchup
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2018-11-14 |
| First published | 2018-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 94.8 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Author | cuppi |
| Maintainers | cuppi |
| Keywords | postcss, css, postcss-plugin, ketchup |

## Links

- npm: https://www.npmjs.com/package/postcss-ketchup
- Repository: https://github.com/cuppi/postcss-ketchup
- Issues: https://github.com/cuppi/postcss-ketchup/issues
- npm.io page: https://npm.io/package/postcss-ketchup

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [postcss](https://npm.io/package/postcss.md) ^6.0.16
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^3.3.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2018-11-14

## README

[PostCSS]: https://github.com/postcss/postcss
[ci-img]:  https://travis-ci.org/cuppi/postcss-ketchup.svg
[ci]:      https://travis-ci.org/cuppi/postcss-ketchup
[CSS]:     https://developer.mozilla.org/zh-CN/docs/Web/CSS
[Icon]:    http://i-film-beta.oss-cn-shanghai.aliyuncs.com/framework/postcss-ketchup/ketch-icon.png
[postcss-loader]: https://github.com/postcss/postcss-loader
# PostCSS Ketchup [![Build Status][ci-img]][ci]
[PostCSS] plugin for use [CSS] more happy and more comfortable.

<img align="right" width="95" height="95"
	title="Philosopher’s stone, logo of PostCSS"
	src="http://i-film-beta.oss-cn-shanghai.aliyuncs.com/framework/postcss-ketchup/ketch-icon.png">

## Getting Started
First thing's first, install the module:
```bash
yarn add postcss-ketchup --dev
```
or
```bash
npm install postcss-ketchup --save-dev
```


## Usage

### config
It's easy to get config.

when use postcss-cli:
```javascript
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 <a href=https://webpack.docschina.org/concepts/loaders/>webpack</a>, more info to [postcss-loader]:
```javascript
module.exports = {
  plugins: {
    'postcss-ketchup': {}
  }
}
```

If you happen to use Vue-Cli3, you can edit css.loaderOptions.postcss in vue.config.js file
for:
```javascript
{
    ...,
    postcss: {
        plugins:[
            require('postcss-ketchup')()
        ]
    }
}
```

### process

input
```css
@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](#config) 
.(Do not forget semi-colon in the end)

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

## <span id="config">Config</span>
These are the available config options for config ketchup. Also visible in the at-rule params.

```javascript
{
     // 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: []
}
```

---
_Source: https://npm.io/package/postcss-ketchup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._