Gilang Chandrasa Thoughts, stories, and ideas

Autoprefixer and Custom Target Browsers with Django Compressor

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.