Sublime Text 3(40多插件+4主题)

# PostCSS <img align="right" width="95" height="95" src="http://ai.github.io/postcss/logo.png" title="Philosopher's stone, logo of PostCSS"> PostCSS is a framework for CSS postprocessors, to modify CSS with JavaScript with full source map support. It takes care of most common CSS tool tasks: 1. parses CSS; 2. gives you usable JS API to edit CSS node tree; 3. dumps modified node tree into CSS string; 4. generates (or modifies existent) source map for your changes; You can use this framework to write you own: * CSS minifier or beautifier. * CSS polyfills. * Grunt plugin to generate sprites, include `data-uri` images or any other works. * Text editor plugin to automate CSS routine. * Command-line CSS tool. Sponsored by [Evil Martians](http://evilmartians.com/). ## Built with PostCSS * [Autoprefixer] adds vendor prefixes by Can I Use data. * [grunt-pixrem], `rem` unit polyfill. * [CSS MQPacker] joins same media queries. * [RTLCSS] mirrors styles for right-to-left locales. * [CSSWring] and [grunt-csswring] CSS minifier with full source map support. * [Pleeease] is a pack of various postprocessors. * [Grunt-webpcss] to duplicate images in CSS to WebP for supported browsers. * [Pleeease Filters] converts WebKit filters to SVG filter for other browsers. * [css2modernizr] analyzes your CSS and output only used Modernizr’s settings. * [data-separator] splits data-uri into a separate CSS file. [Pleeease Filters]: https://github.com/iamvdo/pleeease-filters [grunt-csswring]: https://github.com/princed/grunt-csswring [data-separator]: https://github.com/Sebastian-Fitzner/grunt-data-separator [css2modernizr]: https://github.com/vovanbo/css2modernizr [Grunt-webpcss]: https://github.com/lexich/grunt-webpcss [Autoprefixer]: https://github.com/ai/autoprefixer [grunt-pixrem]: https://github.com/robwierzbowski/grunt-pixrem [CSS MQPacker]: https://github.com/hail2u/node-css-mqpacker [Pleeease]: http://pleeease.io/ [CSSWring]: https://github.com/hail2u/node-csswring [RTLCSS]: https://github.com/MohammadYounes/rtlcss ## Quick Example Let’s fix forgotten `content` property in `::before` and `::after`: ```js var postcss = require('postcss'); var contenter = postcss(function (css) { css.eachRule(function (rule) { if ( rule.selector.match(/::(before|after)/) ) { // In every ::before/::after rule // Did we forget content property? var good = rule.some(function (i) { return i.prop == 'content'; }); if ( !good ) { // Add content: "" if we forget it rule.prepend({ prop: 'content', value: '""' }); } } }); }); ``` And then CSS with forgotten `content`: ```css a::before { width: 10px; height: 10px } ``` will be fixed by our new `contenter`: ```js var fixed = contenter.process(css).css; ``` to: ```css a::before { content: ""; width: 10px; height: 10px } ``` ## Features ### Source Map PostCSS generates source map for its changes: ```js result = processor.process(css, { map: true, from: 'from.css', to: 'to.css' }); result.css // String with processed CSS result.map // Source map ``` And modifies source map from previous step (like Sass preprocessor): ```js var sass = compiler.compile(sass); processor.process(sass.css, { map: { prev: sass.map }, from: 'from.sass.css', to: 'to.css' }); ``` ### Preserves code formatting and indentations PostCSS will not change any byte of a rule if you don’t modify its node: ```js postcss(function (css) { }).process(css).css == css; ``` And when you modify CSS nodes, PostCSS will try to copy coding style: ```js contenter.process("a::before{color:black}") // a::before{content:'';color:black} contenter.process("a::before {\n color: black;\n }") // a::before { // content: ''; // color: black; // } ``` It allows to use PostCSS in text editor plugin and preserve user code style. ## Why PostCSS Better Than … ### Preprocessors Preprocessors (like Sass or Stylus) give us special language with variables, mixins, statements and compile it to CSS. Compass, nib and other mixins libraries use these languages to work with prefixes, sprites and inline images. But Sass and Stylus languages were created to be syntax-sugar for CSS. Writing really complicated programs using preporcessor languages is very difficult. [Autoprefixer] is absolutely impossible to implement on top of Sass. PostCSS gives you comfort and power of JS or CoffeeScript to working with CSS. You can do really magic things with wide range of [npm] libraries. But postprocessors are not enemies for preprocessors. Sass and Stylus are still the best way to improve readability and add some syntax sugar to CSS. You can easily combine preprocessors and postprocessors (and PostCSS will also update source map from Sass or Stylus). [Autoprefixer]: https://github.com/ai/autoprefixer [npm]: https://npmjs.org/ ### RegExp Some Grunt plugins modify CSS with regular expressions but using a CSS parser and a node tree is a much safer way to edit CSS. Also, regexps will break source maps generated by preprocessors. ### CSS Parsers There are a lot of good CSS parsers, like [Gonzales]. But they help you only with first step. Unlike them PostCSS gives you full source map support and useful high level API (for example, safe iterators). [Gonzales]: https://github.com/css/gonzales ### Rework [Rework] and PostCSS are very similar, but they has different targets. Rework was created to build new CSS sublanguage to replace Stylus (like [Myth]). PostCSS was created for CSS tools, which works in chain with legacy CSS code (like Autoprefixer). Because of this background difference, PostCSS: * Better works with source map, because it should update map from previous step (like Sass compiling). * Saves all your spaces and code style, because it can be worked in text editor plugins. * Has safer parser, because it can be used for legacy code. Only PostCSS can parse all hacks from [Browserhacks.com](http://browserhacks.com/). * Has high level API to clean your processor from common tasks. [Myth]: http://www.myth.io/ [Rework]: https://github.com/visionmedia/rework ## Usage You can parse CSS by `postcss.parse()` method, which returns CSS AST: ```js var postcss = require('postcss'); var css = postcss.parse('a { color: black }'); ``` Then you can change this AST. Use `css.list` to get childs. Properties `rule.selector`, `decl.prop`, `decl.value`, `atrule.name` and `atrule.params` contain data. Don’t use underscore properties (like `_selector`, `_params` and `_value`), because they are only for comments save magic (See [Raw Properties](#raw-properties) below). Use getters and setters instead (like `selector`, `selectors`, `params` and `value`). ```js css.list[0].value = 'white'; ``` After changes you can get new CSS and modification’s source map: ```js var result = css.toResult(options); result.css //=> 'a { color: white }' result.map //=> '{"version":3, … }' ``` Methods `postcss.parse()` and `CSS#toResult()` are low level API, for most cases it will be better to create processors with simplier API and chaining. ### Processor The function `postcss(fn)` creates a processor from your function: ```js var postcss = require('postcss'); var processor = postcss(function (css) { // Code to modify CSS }); ``` If you want to combine multiple processors (and parse CSS only once), you can add several functions using the `use(fn)` method: ```js var all = postcss(). use(prefixer). use(minifing); ``` Processor function can change the current CSS node tree: ```js postcss(function (css) { css.append( /* new rule */ ) }); ``` or create a completely new CSS root node and return it instead: ```js postcss(function (css) { var newCSS = postcss.root() // Add rules and declarations return newCSS; }