PostCSS and autoprefixing (postcss-loader)
==========================================

`PostCSS`_ is a CSS post-processing tool that can transform your CSS in a lot
of cool ways, like `autoprefixing`_, `linting`_ and more!

First, download ``postcss-loader`` and any plugins you want, like ``autoprefixer``:

.. code-block:: terminal

    $ yarn add postcss-loader autoprefixer --dev

Next, create a ``postcss.config.js`` file at the root of your project:

.. code-block:: javascript

    module.exports = {
        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: {}
        }
    }

Then, enable the loader in Encore!

.. code-block:: diff

    // webpack.config.js

    Encore
        // ...
    +     .enablePostCssLoader()
    ;

Because you just modified ``webpack.config.js``, stop and restart Encore.

That's it! The ``postcss-loader`` will now be used for all CSS, Sass, etc files.
You can also pass options to the `postcss-loader`_ by passing a callback:

.. code-block:: diff

    // webpack.config.js

    Encore
        // ...
    +     .enablePostCssLoader((options) => {
    +         options.config = {
    +             // the directory where the postcss.config.js file is stored
    +             path: 'path/to/config'
    +         };
    +     })
    ;

.. _browserslist_package_config:

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": [
    +    "> 0.5%",
    +    "last 2 versions",
    +    "Firefox ESR",
    +    "not dead"
    +  ]
    }

See `browserslist`_ for more details on the syntax.

.. _`PostCSS`: https://postcss.org/
.. _`autoprefixing`: https://github.com/postcss/autoprefixer
.. _`linting`: https://stylelint.io/
.. _`browserslist`: https://github.com/browserslist/browserslist
.. _`postcss-loader`: https://github.com/postcss/postcss-loader