/**
 * 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');

// This is needed after @doodle/components 3.16.0 moved breakpoints from measures.css to a standalone breakpoints.css file
const customMediaPaths = [
  '@doodle/components/src/core/variables/measures.css',
  '@doodle/components/src/core/variables/breakpoints.css',
];
const customMediaImports = customMediaPaths.reduce((paths, filePath) => {
  try {
    paths.push(require.resolve(filePath));
  } catch (e) {
    console.warn(
      `DEPRECATED: Please upgrade to @doodle/components >= 4.0.1 as @doodle/frontend-config >= 4.0.0 may stop supporting media queries in measures.css ${
        e.message
      }`
    );
  }
  return paths;
}, []);

module.exports = {
  plugins: [
    postcssCustomMedia({
      importFrom: customMediaImports,
    }),
    postcssImport({
      addModulesDirectories: ['../node_modules'], // only for yarn workspaces setup
    }),
    postcssMixins(),
    postcssPresetEnv({
      stage: 0,
      autoprefixer: {
        grid: 'autoplace',
      },
    }),
    cssnano({
      preset: 'default',
    }),
  ],
};