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
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.