# @lneedy/postcss-salad

> webpack 4.0 沙拉是一个能够帮助你更加写出更加简洁、优雅的CSS的样式解决方案。

Latest version **1.2.7** (published 2019-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lneedy/postcss-salad
pnpm add @lneedy/postcss-salad
yarn add @lneedy/postcss-salad
bun add @lneedy/postcss-salad
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.7 |
| Published | 2019-10-12 |
| First published | 2019-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 21 |
| Unpacked size | 79.3 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| Author | lneedy |
| Maintainers | lneedy |

## Links

- npm: https://www.npmjs.com/package/@lneedy/postcss-salad
- npm.io page: https://npm.io/package/@lneedy/postcss-salad

## Dependencies (21)

- [chalk](https://npm.io/package/chalk.md) ^1.1.1
- [pixrem](https://npm.io/package/pixrem.md) ^3.0.0
- [precss](https://npm.io/package/precss.md) ^4.0.0
- [postcss](https://npm.io/package/postcss.md) ^7.0.0
- [caniuse-api](https://npm.io/package/caniuse-api.md) ^1.3.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.0.0
- [postcss-calc](https://npm.io/package/postcss-calc.md) ^7.0.1
- [postcss-neat](https://npm.io/package/postcss-neat.md) ^2.5.2
- [postcss-scss](https://npm.io/package/postcss-scss.md) ^2.0.0
- [postcss-shape](https://npm.io/package/postcss-shape.md) ^0.0.1
- [postcss-short](https://npm.io/package/postcss-short.md) ^5.0.0
- [postcss-utils](https://npm.io/package/postcss-utils.md) ^1.0.1
- [postcss-mixins](https://npm.io/package/postcss-mixins.md) ^6.2.2
- [postcss-initial](https://npm.io/package/postcss-initial.md) ^3.0.1
- [postcss-inline-svg](https://npm.io/package/postcss-inline-svg.md) ^4.0.0
- [@lneedy/saladcss-bem](https://npm.io/package/@lneedy/saladcss-bem.md) 0.0.3
- [postcss-color-function](https://npm.io/package/postcss-color-function.md) ^4.1.0
- [postcss-partial-import](https://npm.io/package/postcss-partial-import.md) ^4.1.0
- [postcss-custom-properties](https://npm.io/package/postcss-custom-properties.md) ^9.0.2
- [postcss-sass-color-functions](https://npm.io/package/postcss-sass-color-functions.md) ^1.1.0
- [postcss-pseudo-class-any-link](https://npm.io/package/postcss-pseudo-class-any-link.md) ^1.0.0

## Recent versions

- 1.2.7 (latest) — 2019-10-12
- 1.2.6 — 2019-10-09
- 1.2.5 — 2019-10-09
- 1.2.4 — 2019-10-09
- 1.2.3 — 2019-10-09
- 1.2.1 — 2019-09-29
- 1.2.0 — 2019-09-29
- 1.1.1 — 2019-09-29
- 1.1.0 — 2019-09-29
- 1.0.17 — 2019-09-29
- 1.0.16 — 2019-09-27
- 1.0.15 — 2019-09-24
- 1.0.14 — 2019-09-24
- 1.0.13 — 2019-09-24
- 1.0.12 — 2019-09-24
- … 6 more at https://npm.io/package/@lneedy/postcss-salad/versions

## README

# Postcss-salad <img align="right" width="96" height="96" src="http://elemefe.github.io/postcss-salad/svg/logo.svg" title="salad logo" style="margin: -60px 30px 0 0;">

[![Build Status][travis-img]][travis]
[![Version][version]](https://github.com/lneedy/postcss-salad/blob/master/CHANGELOG.md)

> Postcss-salad 是一个基于 <a href="http://postcss.org/">PostCSS</a> 的 CSS 解决方案，它提供了一系列快捷的 at-rule 和默认语法声明来帮助你快速地搭建项目样式与类库，它只在调用时才输出代码，而不是直接提供 CSS 类库。<br>
> 沙拉不仅提供了下一代 css 语法支持，还提供了基础的 sass 的语法、属性顺时针简写、rem 填充、基础图形绘制、可定制样式的 inline-svg 以及 bem 类名自动转化等实用的功能。

### [Documents]

## Demo

**input:**

```css
/* short property */
.box {
  position: fixed 0 0 *;
}
/* utils */
.ellipsis2 {
  @utils-ellipsis 3;
}
/* shape */
.circle-a {
  circle: 50px #ff0;
}
```

**output:**

```css
.box {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.circle-a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff0;
}
```

## Usage

- [Node](#node)
- [PostCSS](#postcss)
- [Gulp](#gulp)
- [webpack](#webpack)

Add [Postcss salad] to your build tool:

```bash
npm install @lneedy/postcss-salad --save-dev
```

#### [Node](id:Node)

```js
require('@lneedy/postcss-salad').process(YOUR_CSS, {
  /* options */
})
```

#### [PostCSS](id:a-PostCSS)

Add [PostCSS] to your build tool:

```bash
# postcss >=^7.0.0
npm install postcss --save-dev
```

Load [Postcss salad] as a PostCSS plugin:

```js
postcss([
  require('@lneedy/postcss-salad')({
    /* options */
  })
]).process(YOUR_CSS /* options */)
```

#### [Gulp](id:Gulp)

Add [Gulp PostCSS]: to your build tool:

```bash
npm install gulp-postcss --save-dev
```

Enable [Postcss salad] within your Gulpfile:

```js
var gulp = require('gulp')
var postcss = require('gulp-postcss')

gulp.task('css', function() {
  return gulp
    .src('./src/*.css')
    .pipe(
      postcss([
        require('@lneedy/postcss-salad')({
          /* options */
        })
      ])
    )
    .pipe(gulp.dest('.'))
})
```

#### [webpack](id:webpack)

```js
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader'
      }
    ]
  },
  postcss: function() {
    return [require('@lneedy/postcss-salad')]
  }
}
```

## options

沙拉里每一个特性都是依赖于对应的插件的，因此他们都有自己的配置。 你可以通过 features 属性类为每一个插件传入它的配置，假设某个特性传入的值为 false，则该特性会被关闭:

_example:_

```js
var options = {
  browser: ['ie > 8', 'last 2 version'],
  features: {
    bem: false, //pass boolean false can disable the plugin
    inlineSvg: {
      path: 'src/svgs'
    },
    customProperties: {
      preserve: false
    }
  }
}
```

### Plugins

Postcss-salad powered by the following plugins (in this order):

- [postcss-partial-import]: lets you use sugary @import statements in CSS, including glob-like and Sass-like behavior. It even lets you generates imports as a scaffolding tool.
- [postcss-custom-properties]: lets you use Custom Properties in CSS, following the CSS Custom Properties specification.
- [@lneedy/saladcss-bem]: postcss 7.0 implementing BEM as at-rules
- [precss]: a tool that allows you to use Sass-like markup in your CSS files
- [postcss-color-function]: plugin to transform CSS color function from editor draft of 'Color Module Level 4' specification to more compatible CSS.
- [postcss-utils]: help you create functional fragments quickly via at-rules.
- [postcss-calc]: plugin to reduce calc()
- [postcss-initial]: fallback initial keyword
- [postcss-inline-svg]: reference an SVG file and control its attributes with CSS syntax.
- [postcss-short]: lets you write styles more logically by extending shorthand properties in CSS.
- [postcss-shape]: draw basic shape with specified syntax in css rule
- [pixrem]: generates pixel fallbacks for rem units.
- [autoprefixer]: parse CSS and add vendor prefixes to CSS rules using values from Can I Use
- [postcss-neat]: a fluid grid framework built with the aim of being easy enough to use out of the box and flexible enough to customize down the road.

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