How to use postcss-load-config - 10 common examples

// Merge user provided options into default context
  const context = merge(
    {
      from: filename,
      map: {
        annotation: false,
        inline: false,
      },
      syntax,
      to: filename,
    },
    opts,
  );

  try {
    const { plugins, options } = await postcssrc(context, filename);
    const result = await postcss(plugins).process(content, options);

    for (const err of result.warnings()) {
      // eslint-disable-next-line no-console
      console.warn(err.toString());
    }

    const dependencies: string[] = [];

    // Register dependencies for Rollup to detect changes
    for (const msg of result.messages) {
      if (msg.type === 'dependency') {
        dependencies.push(msg.file);
      }
    }

async prepare({ dev }) {
    console.log('> Building from source')
    // Load user config
    const { data, path: configPath } = await config.load(
      [
        'peco.config.yml',
        'peco.config.toml',
        'peco.config.js',
        'peco.config.json'
      ],
      this.options.baseDir
    )
    this.configPath = configPath
    await this.normalizeConfig(data)

    const postcssConfig = await require('postcss-load-config')({
      cwd: this.options.baseDir,
      argv: false
    }).catch(err => {
      if (err.message.includes('No PostCSS Config found')) {
        // Return empty options for PostCSS
        return {}
      }
      throw err
    })

    if (postcssConfig.file) {
      this.postcss = {
        config: {
          path: postcssConfig.file
        }
      }

loadPostcssConfig = Meteor.wrapAsync(function (cb) {
  let error = null
  if (!loaded) {
    loaded = load({'vue-meteor': true}).catch(err => {
      // postcss-load-config throws error when no config file is found,
      // but for us it's optional. only emit other errors
      if (err.message.indexOf('No PostCSS Config found') < 0) {
        error = err
        error.message = 'PostCSS config Error: '.red + error.message
      }
    })
  }

  loaded.then(config => {
    let plugins = []
    let options = {}

    // merge postcss config file
    if (config && config.plugins) {
      plugins = plugins.concat(config.plugins)

}
    // Return empty options for PostCSS
    return {}
  }

  configPath = configPath ? path.resolve(configPath) : path.dirname(id)
  const ctx = {
    file: {
      extname: path.extname(id),
      dirname: path.dirname(id),
      basename: path.basename(id)
    },
    options: configOptions || {}
  }

  return findPostcssConfig(ctx, configPath).catch(handleError)
}

if (err.code !== 'ENOENT') {
            throw err;
          }
        }

        if (cache && cache.hash === hash) {
          connection.end(JSON.stringify(cache.tokens));

          return;
        }

        const extractModules = (_, resultTokens: any) => {
          tokens = resultTokens;
        };
        const { plugins, options: postcssOpts } =
          await loadConfig({ extractModules }, path.dirname(cssFile));

        const runner = postcss(plugins);

        await runner.process(source, Object.assign({
          from: cssFile,
          to: cssFile, // eslint-disable-line id-length
        }, postcssOpts));

        cache = {
          hash,
          tokens,
        };

        // eslint-disable-next-line no-sync
        fs.writeFileSync(cachePath, JSON.stringify(cache));

async function processCss({
  banner = '',
  from,
  optimize = process.env.NODE_ENV === 'production',
  sourcemap,
  to = from,
}: ProcessCssOpts): Promise {
  const src = await readFile(from, 'utf8');

  const ctx = { from, map: sourcemap && { inline: false }, to };
  const source = banner + src;

  const { options, plugins } = await postcssrc(ctx, from);
  const result = await postcss(plugins).process(source, options);

  warn('PostCSS', 'WARN', result.warnings());

  let code = result.css;
  // eslint-disable-next-line prefer-destructuring
  let map: string | { toString(): string } | undefined = result.map;
  const hasMap = sourcemap && !!map;

  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const filePath = options.to!;
  const dirPath = dirname(filePath);

  if (optimize) {
    // Minify resulting CSS
    const min = new CleanCSS({

requireRelative.resolve('preact/compat', cwd);
		compat = 'preact/compat';
	} catch (e) {}

	let babelConfig = Object.assign(
		{ babelrc: false },
		createBabelConfig(env, { browsers }),
		babelrc // intentionally overwrite our settings
	);

	let tsconfig = resolveTsconfig(cwd, isProd);

	let postcssPlugins;

	try {
		postcssPlugins = loadPostcssConfig.sync(cwd).plugins;
	} catch (error) {
		postcssPlugins = [autoprefixer({ overrideBrowserslist: browsers })];
	}

	return {
		context: src,

		resolve: {
			modules: [...nodeModules, 'node_modules'],
			extensions: [
				'.mjs',
				'.js',
				'.jsx',
				'.ts',
				'.tsx',
				'.json',

test("Autoprefixer", () => {
  let input = ":fullscreen a { display: flex }"

  return loadConfig({ map: "inline" }).then(({ plugins, options }) => {
    return postcss(plugins)
      .process(input, options)
      .then((result) => expect(result.css).toMatchSnapshot())
  })
})

export default async function (postcssOpt) {
    let options = {}
    let plugins = []

    if (typeof postcssOpt === 'function') {
        plugins = postcssOpt.call(this)
    } else if (Array.isArray(postcssOpt)) {
        plugins = postcssOpt
    } else if (typeof postcssOpt === 'object') {
        plugins = (typeof postcssOpt.plugins === 'function') ? postcssOpt.plugins.call(this) : postcssOpt.plugins || []
        options = postcssOpt.options || {}
    }

    return postcssrc().then((config) => {
        if (config.plugins) {
            plugins = plugins.concat(config.plugins)
        }

        if (config.options) {
            options = Object.assign(options, config.options)
        }
        return {plugins, options}
    }).catch(() => { return {plugins, options} })
}

const postcssrcSync = deasync(cb => {
  postcssrc()
    .then(res => cb(null, res))
    .catch(err => cb(err))
})