The idea for this plugin is not new; it's loosely based on the postcss-transform-shortcut
plugin by Jonathan Neal, available from https://github.com/jonathantneal/postcss-transform-shortcut. The concept is not necessarily a shorter means to create transition statements, but it makes it easier by allowing authors to specify values independently. These are then automatically inserted into the correct order within the transition declaration.
Note
The source code for this plugin is also available on GitHub, at https://github.com/alexlibby/postcss-transition-shortcut; the NPM package is also available at https://www.npmjs.com/package/postcss-transition-shortcut.
Let's dive in and take a look at how it is put together, in more detail:
We'll start by installing Git—this is required for installing the plugin boilerplate. To do this, browse to https://git-scm.com/book/en/v2/Getting-Started-Installing-Git, and follow the instructions for your platform.