@lneedy/postcss-salad

Postcss-salad

[![Build Status][travis-img]][travis] ![Version][version]

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

[Documents]

Demo

input:

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

output:

.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
• PostCSS
• Gulp
• webpack

Add [Postcss salad] to your build tool:

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

Node

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

PostCSS

Add [PostCSS] to your build tool:

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

Load [Postcss salad] as a PostCSS plugin:

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

Gulp

Add [Gulp PostCSS]: to your build tool:

npm install gulp-postcss --save-dev

Enable [Postcss salad] within your Gulpfile:

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

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

options

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

example:

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.