diff --git a/frontend/encore/postcss.rst b/frontend/encore/postcss.rst index 12b66fd3078..34ceb0b798d 100644 --- a/frontend/encore/postcss.rst +++ b/frontend/encore/postcss.rst @@ -18,6 +18,8 @@ Next, create a ``postcss.config.js`` file at the root of your project: plugins: { // include whatever plugins you want // but make sure you install these via yarn or npm! + + // add browserslist config to package.json (see below) autoprefixer: {} } } @@ -35,6 +37,29 @@ Then, Enable the loader in Encore! That's it! The ``postcss-loader`` will now be used for all CSS, Sass, etc files. +Adding browserslist to package.json +----------------------------------- + +The ``autoprefixer`` (and many other tools) need to know what browsers you want to +support. The best-practice is to configure this directly in your ``package.json`` +(so that all the tools can read this): + +.. code-block:: diff + + { + + "browserslist": [ "last 2 versions", "ios >= 8" ] + } + +See `browserslist`_ for more details on the syntax. + +.. note:: + + Encore uses `babel-preset-env`_, which *also* needs to know which browsers you + want to support. But this does *not* read the ``browserslist`` config key. You + must configure the browsers separately via :doc:`configureBabel() `. + .. _`PostCSS`: http://postcss.org/ .. _`autoprefixing`: https://github.com/postcss/autoprefixer .. _`linting`: https://stylelint.io/ +.. _`browserslist`: https://github.com/ai/browserslist +.. _`babel-preset-env`: https://github.com/babel/babel-preset-env \ No newline at end of file