├── .editorconfig ├── .gitignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── ci_script.sh ├── media └── awesome_postcss.svg └── topics ├── articles.md ├── community.md ├── guides.md ├── official-resources.md ├── plugins.md ├── podcast.md ├── presentations.md └── task-runner.md /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | .AppleDouble 3 | .LSOverride 4 | *.gem 5 | *.rbc 6 | /.config 7 | /coverage/ 8 | /InstalledFiles 9 | /pkg/ 10 | /spec/reports/ 11 | /spec/examples.txt 12 | /test/tmp/ 13 | /test/version_tmp/ 14 | /tmp/ 15 | 16 | # Used by dotenv library to load environment variables. 17 | # .env 18 | 19 | ## Specific to RubyMotion: 20 | .dat* 21 | .repl_history 22 | build/ 23 | *.bridgesupport 24 | build-iPhoneOS/ 25 | build-iPhoneSimulator/ 26 | 27 | ## Specific to RubyMotion (use of CocoaPods): 28 | # 29 | # We recommend against adding the Pods directory to your .gitignore. However 30 | # you should judge for yourself, the pros and cons are mentioned at: 31 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control 32 | # 33 | # vendor/Pods/ 34 | 35 | ## Documentation cache and generated files: 36 | /.yardoc/ 37 | /_yardoc/ 38 | /doc/ 39 | /rdoc/ 40 | *.json 41 | 42 | ## Environment normalization: 43 | /.bundle/ 44 | /vendor/bundle 45 | /lib/bundler/man/ 46 | 47 | # for a library or gem, you might want to ignore these files since the code is 48 | # intended to run in multiple environments; otherwise, check them in: 49 | # Gemfile.lock 50 | # .ruby-version 51 | # .ruby-gemset 52 | 53 | # unless supporting rvm < 1.11.0 or doing something fancy, ignore this: 54 | .rvmrc -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 2.2 3 | before_script: gem install awesome_bot 4 | script: awesome_bot README.md -w github.com/ai 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Guidelines to contribute 2 | 3 | - Add section if needed. 4 | - If you create a new section, add a item in summary. 5 | - Add section description. 6 | - Add section title to Table of contents. 7 | - Add subsection using header of third level 8 | - Put in alphabetical order the new items 9 | - Search previous suggestions before making a new one, as yours may be a duplicate. 10 | - Check your spelling and grammar. 11 | - Make sure your text editor is set to remove trailing whitespace. 12 | - Send a Pull Request. 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Jader 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Awesome PostCSS 3 |

4 | 5 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 6 | [![Build Status](https://api.travis-ci.org/jdrgomes/awesome-postcss.svg?branch=master)](https://travis-ci.org/jdrgomes/awesome-postcss) 7 | 8 | > A selective list of PostCSS resources and other related things. 9 | 10 | **PostCSS** simply provides a css parser and a framework for creating plugins that can analyse, lint, handle assets, optimise, create fallbacks, and otherwise transform parsed css. PostCSS parses css into an abstract syntax tree [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree), passes it through a series of plugins, and then concatenates back into a string. 11 | 12 | ### Table of Contents 13 | 14 | - [Awesome PostCSS](#awesome-postcss) 15 | - [Articles](topics/articles.md) 16 | - [Community](topics/community.md) 17 | - [Guides](topics/guides.md) 18 | - [Official Resources](topics/official-resources.md) 19 | - [Podcast](topics/podcast.md) 20 | - [Plugins](topics/plugins.md) 21 | - [Presentations](topics/presentations.md) 22 | - [Task Runner](topics/task-runner.md) 23 | 24 | ### Contributing 25 | 26 | Your contributions are always welcome. But, please take a quick gander at the [CONTRIBUTION guidelines](https://github.com/jdrgomes/awesome-postcss/blob/master/CONTRIBUTING.md) first. 27 | 28 | ### Who to follow 29 | 30 | - [Azat S.](https://twitter.com/azat_io) 31 | - [Andrey Sitnik](https://twitter.com/andreysitnik) 32 | - [Evil Martians](https://twitter.com/evilmartians) 33 | - [Max Stoiber](https://twitter.com/mxstbr) 34 | - [Maxime Thirouin](https://twitter.com/MoOx) 35 | - [Ray Villalobos](https://twitter.com/planetoftheweb) 36 | - [Sean King](https://twitter.com/seaneking) 37 | 38 | ### License 39 | [![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/) 40 | 41 | This project is licensed under the MIT license - see the [LICENSE](https://github.com/jdrgomes/awesome-postcss/blob/master/LICENSE) for details. 42 | -------------------------------------------------------------------------------- /ci_script.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -e # halt script on error 3 | bundle exec awesome_bot Readme.md --allow-redirect --set-timeout 10 --white-list https://github.com/sindresorhus/awesome 4 | -------------------------------------------------------------------------------- /media/awesome_postcss.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | awesome 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /topics/articles.md: -------------------------------------------------------------------------------- 1 | ## Articles 2 | 3 | - [7 Postcss Plugins to Ease You Into Postcss](https://www.sitepoint.com/7-postcss-plugins-to-ease-you-into-postcss/) 4 | - [A look into writing future css with PostCSS and cssnext](https://bigbitecreative.com/a-look-into-writing-future-css-with-postcss-cssnext/) 5 | - [Breaking up with Sass - PostCSS](https://benfrain.com/breaking-up-with-sass-postcss/) 6 | - [Extending Sass with PostCSS](https://ashleynolan.co.uk/blog/extend-sass-with-postcss) 7 | - [How to Build Your Own CSS Preprocessor With PostCSS](https://www.sitepoint.com/build-css-preprocessor-postcss/) 8 | - [It's Time for Everyone to Learn About PostCSS](https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/) 9 | - [I'm Excited About PostCSS](https://davidtheclark.com/excited-about-postcss/) 10 | - [Introduction to Postcss](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/) 11 | - [Improving the Quality of Your CSS with PostCSS](https://www.sitepoint.com/improving-the-quality-of-your-css-with-postcss/) 12 | - [Meet PostCSS - Future of CSS after preprocessors](http://www.meetpostcss.com/) 13 | - [Musings from Someone Discovering PostCSS](https://taupecat.com/blog/2016/04/28/musings-from-someone-discovering-postcss/) 14 | - [Nem Sass, nem LESS, nem Stylus: PostCSS!](https://blog.taller.net.br/nem-sass-nem-less-nem-stylus-postcss/) - *Brazilian Portuguese* 15 | - [PostCSS – Sass Killer or Preprocessing Pretender?](https://ashleynolan.co.uk/blog/postcss-a-review) 16 | - [So you want to make a PostCSS plugin](https://css-tricks.com/want-make-postcss-plugin/) 17 | - [Some thinks you may think about postcss](http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/) 18 | - [That postcss. Its so hot right now](https://cantina.co/that-postcss-its-so-hot-right-now/) 19 | 20 | --- 21 | [Back to Home](https://github.com/jdrgomes/awesome-postcss) 22 | -------------------------------------------------------------------------------- /topics/community.md: -------------------------------------------------------------------------------- 1 | ## Community 2 | 3 | - [Gitter](https://gitter.im/postcss/postcss) 4 | - [Stack Overflow](https://stackoverflow.com/questions/tagged/postcss) 5 | - [Twitter](https://twitter.com/PostCSS) 6 | - [Vkontakte](https://vk.com/postcss) 7 | 8 | --- 9 | [Back to Home](https://github.com/jdrgomes/awesome-postcss) -------------------------------------------------------------------------------- /topics/guides.md: -------------------------------------------------------------------------------- 1 | ## Guides 2 | 3 | - PostCSS Deep Dive: 4 | - [Create your own plugin](https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-create-your-own-plugin--cms-24605) 5 | - [Miscellaneous goodies](https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-miscellaneous-goodies--cms-24603) 6 | - [Preprocessing with “PreCSS”](https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-preprocessing-with-precss--cms-24583) 7 | - [Roll your own preprocessor](https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-roll-your-own-preprocessor--cms-24584) 8 | - [Shortcuts and shorthand](https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-shortcuts-and-shorthand--cms-24602) 9 | - [What you need to know](https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535) 10 | 11 | - PostCSS Quickstart Guide: 12 | - [Exploring plugins](https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-exploring-plugins--cms-24566) 13 | - [Gulp setup](https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-gulp-setup--cms-24543) 14 | - [Grunt setup](https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-grunt-setup--cms-24545) 15 | - [Instant setup options](https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-instant-setup-options--cms-24536) 16 | 17 | - Using PostCSS: 18 | - [for minification and optimization](https://webdesign.tutsplus.com/tutorials/using-postcss-for-minification-and-optimization--cms-24568) 19 | - [for cross browser compatibility](https://webdesign.tutsplus.com/tutorials/using-postcss-for-cross-browser-compatibility--cms-24567) 20 | - [Together with sass, stylus, or less](https://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591) 21 | - [with BEM and SUIT methodologies](https://webdesign.tutsplus.com/tutorials/using-postcss-with-bem-and-suit-methodologies--cms-24592) 22 | 23 | --- 24 | [Back to Home](https://github.com/jdrgomes/awesome-postcss) -------------------------------------------------------------------------------- /topics/official-resources.md: -------------------------------------------------------------------------------- 1 | ## Official Resources 2 | 3 | - [API Reference](https://api.postcss.org/) 4 | - [GitHub Repository **★ 18, 364**](https://github.com/postcss/postcss) 5 | 6 | --- 7 | [Back to Home](https://github.com/jdrgomes/awesome-postcss) -------------------------------------------------------------------------------- /topics/plugins.md: -------------------------------------------------------------------------------- 1 | ## Plugins 2 | 3 | - [atom-language-postcss](https://github.com/azat-io/atom-language-postcss) - Atom language support for postcss. 4 | - [postcss parts](https://www.postcss.parts) - A searchable catalog of postcss plugins. 5 | - [poststylus](https://github.com/seaneking/poststylus) - Postcss adapter for stylus. 6 | - [postcss-instagram](https://github.com/azat-io/postcss-instagram) - This is a postcss plugin for adding instagram filters to your photos. 7 | - [postcss-normalize](https://github.com/jonathantneal/postcss-normalize) - Simple normalize.css wrapper for postcss. 8 | - [postcss-font-magician](https://github.com/jonathantneal/postcss-font-magician) - Magically generate all the @font-face rules. 9 | - [postcss-loader](https://github.com/postcss/postcss-loader) - Postcss loader for webpack. 10 | - [css-declaration-sorter](https://github.com/Siilwyn/css-declaration-sorter) - Sort css declarations fast and automatically in a certain order. 11 | - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) - Convert pixel units to rem (root em) units using postcss. 12 | - [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser) - Selector parser with built in methods for working with selector strings. 13 | - [postcss-html](https://github.com/gucong3000/postcss-html) - Postcss Syntax for parsing HTML / Markdown / Vue component. 14 | - [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) - Generates viewport units (vw, vh, vmin, vmax) from pixel units. 15 | - [postcss-viewport-height-correction](https://github.com/Faisal-Manzer/postcss-viewport-height-correction) - PostCSS plugin to solve the popular problem when 100vh doesn’t fit the mobile browser screen. 16 | - [postcss-at-rules-variables](https://github.com/Scrum/postcss-at-rules-variables) - Transform [W3C CSS Custom Properties](http://www.w3.org/TR/css-variables/) for at-rule’s parameters. 17 | 18 | --- 19 | [Back to Home](https://github.com/jdrgomes/awesome-postcss) 20 | -------------------------------------------------------------------------------- /topics/podcast.md: -------------------------------------------------------------------------------- 1 | ## Podcast 2 | 3 | - [206 JavaScript Jabber | PostCSS with Ben Briggs](https://devchat.tv/js-jabber/206-jsj-postcss-with-ben-briggs) 4 | - [Issue 24 radiojs | The most stylish minifier](https://radiojs.ru/2015/06/radiojs-24/) - *Russian* 5 | - [Podfanatic | Sam Richard — Sass, Front-end Development](https://podfanatic.com/podcast/non-breaking-space-show/episode/sam-richard-sass-and-postcss) 6 | 7 | --- 8 | [Back to Home](https://github.com/jdrgomes/awesome-postcss) -------------------------------------------------------------------------------- /topics/presentations.md: -------------------------------------------------------------------------------- 1 | ## Presentations 2 | 3 | #### Videos 4 | 5 | - [Fix global CSS with PostCSS](https://www.dotconferences.com/2015/12/andrey-sitnik-fix-global-css-with-postcss) - Andrey explains how to use the power of postcss to make isolated components without a global reset and avoid conflicts between them. 6 | - [Kick your CSS up a notch with PostCSS](https://www.youtube.com/watch?v=-_gIKdHYP3E) - Learn how to bring your CSS to the next level with PostCSS. Explore the endless possibilities and master writing a CSS transformation plugin. 7 | - [PostCSS - First Look](https://www.lynda.com/CSS-tutorials/PostCSS-First-Look/442850-2.html) - A quick first look at postcss, an engine for processing css with javascript. 8 | - [PostCSS the Future after Sass and Less](https://www.youtube.com/watch?v=73dl5dk9z4Q) - Andrey will talk about ideas behind the postcss. 9 | - [PostCSS, cssnext and the future of CSS](https://vimeo.com/159185299) - Maxime explains how the postcss and its ecosystem will help you to avoid to write some legacy code, to lint you code or to write and enjoy today tomorrow’s CSS syntax, today, using cssnext. 10 | 11 | --- 12 | [Back to Home](https://github.com/jdrgomes/awesome-postcss) -------------------------------------------------------------------------------- /topics/task-runner.md: -------------------------------------------------------------------------------- 1 | ## Task Runner 2 | 3 | #### Grunt 4 | 5 | - [grunt-australian-stylesheets](https://github.com/stevemao/grunt-australian-stylesheets) - Compile Australian css with postcss-australian-stylesheets. 6 | 7 | #### Gulp 8 | 9 | - [gulp-autoprefixer](https://github.com/sindresorhus/gulp-autoprefixer) - Prefix css with Autoprefixer. 10 | - [gulp-postcss](https://github.com/postcss/gulp-postcss) - Pipe css through postcss processors with a single parse. 11 | - [gulp-australian-stylesheets](https://github.com/stevemao/gulp-australian-stylesheets) - Compile Australian css with postcss-australian-stylesheets. 12 | - [gulp-rucksack](https://github.com/seaneking/gulp-rucksack) - Plugin for rucksack: a little bag of css superpowers. 13 | - [gulp-pxtorem](https://github.com/cuth/gulp-pxtorem) - Plugin for postcss-pxtorem. 14 | - [gulp-html-postcss](https://github.com/StartPolymer/gulp-html-postcss) - Process inline css in HTML using postcss gulp plugin. 15 | 16 | --- 17 | [Back to Home](https://github.com/jdrgomes/awesome-postcss) --------------------------------------------------------------------------------