minor symfony#8054 Adding note about browserslist config (weaverryan)

xabbuh · xabbuh · commit 0070ea82cadf · 2017-06-22T21:19:35.000+02:00
This PR was merged into the 3.3 branch. Discussion ---------- Adding note about browserslist config Fixes symfony#8038 Commits ------- 1176fad Adding note about browserslist config
diff --git 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() </frontend/encore/babel>`.
+
 .. _`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
