一个 Node.js 的 CSS 后处理器框架：PostCSS
nf456
9年前
PostCSS 是一个 Node.js 的 CSS 后处理器框架，与 Sass/Less 相比，它完全使用 JS 控制逻辑，让 CSS 开发者可以更专注于 CSS 编写，同时还有完整的 source map 支持等特性。可以用来做 CSS 预处理、压缩/美化、编辑器插件、CSS polyfill、命令行工具等。
利用 PostCSS构建：
Tools
- Autoprefixer adds vendor prefixes by Can I Use data.
- BEM linter lints CSS for SUIT CSS methodology.
- CSS MQPacker joins same media queries.
- css2modernizr analyzes your CSS and output only used Modernizr’s settings.
- cssnext is a transpiler (CSS4+ to CSS3) that allow you to use tomorrow’s CSS syntax today.
- CSSWring is a CSS minifier with full source map support.
- data-separator splits data-uri into a separate CSS file.
- pixrem is aremunit polyfill.
- webpcss to duplicate images in CSS to WebP for supported browsers.
- Pleeease is a pack of various postprocessors.
- Pleeease Filters converts WebKit filters to SVG filter for other browsers.
- RTLCSS mirrors styles for right-to-left locales.
- CSS Byebye explicitly removes the CSS rules that you don’t want.
- postcss-epub to prefix ePub3 properties.
- doiuse to lint your CSS on unsupported properties by Can I Use.
- postcss-assets to inline files and insert image width and height.
- ACSS Annotations based CSS processor.
Plugins
- postcss-calc to reducecalc()usage (recommended withpostcss-custom-properties).
- postcss-color-function to transformcolor()function.
- postcss-color-gray to transformgray()function.
- postcss-color-hex-alpha to transform hexadecimal notations with alpha (#rrggbbaaor#rgba).
- postcss-color-hwb to transformhwb()function.
- postcss-color-rebeccapurple to transformrebeccapurplecolor.
- postcss-import to transform@importrules by inlining content.
- postcss-custom-media to add names for Media Queries.
- postcss-custom-properties to transform Custom Properties for cascading variables.
- postcss-url to rebase or inline onurl().
- postcss-font-variant to setfont-feature-settingsby readable properties.
- postcss-nested to unwrap rules in other rules, like you can write in Sass.
- postcss-custom-selector to add custom alias for selectors.
- postcss-media-minmax to use<=or>=in CSS Media Queries.
- postcss-data-packer to move an embedded data into a separate file.
- postcss-color-palette to transform CSS2 color keywords to a custom palette.
- postcss-color-hex to transform rgb() and rgba() to hex.