/**
 * This is the default PostCSS configuration for Doodle frontends.
 * Note: changes to this file affect all projects that depend on it.
 *
 * How to use:
 * Create a postcss.config.js file in your project and extend this configuration as
 * shown in the following example.
 *
 * @example
 * // File: web-my-frontend/postcss.config.js
 * const defaultPostCSSConfig = require('@doodle/frontend-config/postcss');
 * // extend or change the configuration object as needed
 * module.exports = defaultPostCSSConfig;
 */

const cssnano = require('cssnano');
const postcssCustomMedia = require('postcss-custom-media');
const postcssImport = require('postcss-import');
const postcssMixins = require('postcss-mixins');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssCustomMedia({
      importFrom: require.resolve('@doodle/components/src/core/variables/measures.css'),
    }),
    postcssImport({
      addModulesDirectories: ['../node_modules'], // only for yarn workspaces setup
    }),
    postcssMixins(),
    postcssPresetEnv({
      stage: 0,
      autoprefixer: {
        grid: 'autoplace',
      },
    }),
    cssnano({
      preset: 'default',
    }),
  ],
};