Custom PostCSS Plugins

Run Any PostCSS Plugin

3:33

Watch The Screencast »

PostCSS has lots of plugins. The most popular ones are built into CodeKit, but you can run any plugin with any configuration you want.

Here's how:

Install Your Plugin

First, open the Packages area, then search for and install the plugin you want:

This places the plugin and its dependencies in the node_modules folder within your project so that CodeKit can run it.

For projects that already have a package.json file, you might choose to simply install from that file. You can do that in CodeKit's UI as well.

Create a Config File

Create a file named postcss.config.js in your project's root folder. (It MUST be named exactly that and it MUST be in the root project folder.)

Add the custom plugin you want to run to the list in the config file, like this:

// postcss.config.js

module.exports = {
    plugins: [
        require('postcss-short'),
        require('postcss-calc')
    ]    
}

Paths

As long as the plugin is installed in your project, you don't need to supply a path. You can just list the plugin's name.

Passing Options To Plugins

If you need to pass options to plugins, restructure your config file. Make "plugins" an object with key-value pairs of plugin names matched with an object of options to use when running that plugin:

// postcss.config.js
    
module.exports = {
    plugins: {
        'postcss-short': {
            option1: "value",
            option2: true
        },
        'postcss-calc': {}
    }    
}

If there are no options for a particular plugin, pass an empty object.

Plugin Order

CodeKit will run your custom plugins exactly as you configure them, in the exact order you specify.

Integrating With Built-In Plugins

CodeKit has several PostCSS plugins built-in:

• Autoprefixer
• CSS-Import
• PurgeCSS
• CSSO
• TailwindCSS

Yours Go First

CodeKit runs your custom plugins before all of the plugins in the list above.

Changing The Order

You have complete control over the final order of ALL plugins, both custom and built-in. Simply add the name of the built-in plugin to the list in your postcss.config.js file where it should run, like this:

// postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer'),
        require('postcss-short')
    ]    
}

(You do NOT need to install the built-in plugins; CodeKit will automatically use its copy.)

No Options For Built-In Plugins

If you're using the second config file format to pass options to plugins, you can still control plugin order by adding built-in plugins to the list, but pass an empty object for the options, like this:

// postcss.config.js
    
module.exports = {
    plugins: {
        'autoprefixer': {},
        'postcss-short': {
            option1: "value",
            option2: true
        }
    }    
}

Any options you pass to a built-in plugin in the config file will be overwritten with the values from CodeKit's UI. You can specify the order of plugins, but to change options for the built-in plugins you must use the UI.

Automatic Compiling

Anytime you save the postcss.config.js file, CodeKit will automatically recompile all CSS, Sass, Less, and Stylus files in your project to capture the changes.