Autoprefixer and Custom Target Browsers with Django Compressor

2 Oct 2018

Autoprefixer uses browserslist to target browsers and you can specify the queries in .browserslistrc or package.json.

package.json

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}

or

.browserslistrc

# Browsers that we support

last 1 version
> 1%
maintained node versions
not dead

Unfortunately, django-compressor ignore them, so we need to use different way.

The solution

First, we can set postcss argument in django settings to use custom configuration.

settings.py

...

COMPRESS_POSTCSS_ARGS = '--config postcss.config.js'

...

and then put the queries in the configuration file.

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: { browsers: [
      "last 2 version",
      "not dead",
      "not Explorer 11",
      "not ExplorerMobile 11",
      "node 6"
      ]
    }
  }
}

That’s it, autoprefixer should now use the target browsers in postcss.config.js.

Let me know if you have a better way to handle this.