How to use rollup-plugin-postcss - 10 common examples

}
};


// Config
// =============================================================================
// Base
const config = {
    input : entryFile,
    output: {
        file     : outputFile,
        banner   : `/*!\n * ${ bannerData.join('\n * ') }\n */`,
        sourcemap: true
    },
    plugins: [
        postcss(pluginSettings.postcss),
        resolve(),
        commonjs(),
        json(),
        eslint(pluginSettings.eslint),
        babel(pluginSettings.babel)
    ],
    watch: {
        clearScreen: false
    }
};

// Formats
// -----------------------------------------------------------------------------
// IIFE
const iife = merge({}, config, {
    output: {

external: ["react"]
  },
  // CommonJS (for Node) and ES module (for bundlers) build.
  // (We could have three entries in the configuration array
  // instead of two, but it's quicker to generate multiple
  // builds from a single configuration where possible, using
  // an array for the `output` option, where we can specify
  // `file` and `format` for each target)
  {
    input: "src/index.js",
    output: [
      { file: pkg.main, format: "cjs" },
      { file: pkg.module, format: "es" }
    ],
    plugins: [
      postcss(postcssOptions),
      babel(babelOptions),
      resolve(),
      commonjs()
    ],
    external: ["react"]
  }
];

},
    plugins: [
      resolve({
        // module: true,
        // browser: true,
        // jsnext: true,
        // preferBuiltins: false,
        extensions: ['.js', '.json', '.vue']
      }),
      commonjs({
        namedExports: {
          '@coreui/coreui/dist/js/coreui-utilities.js': ['deepObjectsMerge', 'getStyle'],
          // '@coreui/icons/vue': ['CIcon']
        }
      }),
      postcss(),
      vue({
        compileTemplate: true,
        css: false,
        style: {
          preprocessOptions: {
            scss: {
              importer: magicImporter(),
            },
          },
        }
      }),
      json(),
      babel({
        exclude: 'node_modules/**',
        runtimeHelpers: true,
        presets: [

input: entry,
			external: id => {
				if (id === 'babel-plugin-transform-async-to-promises/helpers') {
					return false;
				}
				if (options.multipleEntries && id === '.') {
					return true;
				}
				return externalTest(id);
			},
			treeshake: {
				propertyReadSideEffects: false,
			},
			plugins: []
				.concat(
					postcss({
						plugins: [
							autoprefixer(),
							options.compress !== false &&
								cssnano({
									preset: 'default',
								}),
						].filter(Boolean),
						// only write out CSS for the first bundle (avoids pointless extra files):
						inject: false,
						extract: !!writeMeta,
					}),
					moduleAliases.length > 0 &&
						alias({
							resolve: EXTENSIONS,
							entries: moduleAliases,
						}),

const extensions = ['.js', '.ts', '.tsx', '.json'];
const plugins = [
  resolve({ extensions }),
  commonjs({
    namedExports: {
      react: Object.keys(React),
      'react-dom': Object.keys(ReactDOM)
    }
  }),
  babel({ exclude: 'node_modules/**', extensions }),
  replace({
    'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production')
  }),
  !isLib && url(),
  !isLib && postcss({ extract: true, sourceMap: isDev, minimize: !isDev }),
  !isLib && html({ template }),
  !isLib &&
    copy({
      targets: [
        { src: 'src/static/example_assets', dest: 'src/.dev', rename: 'assets' }
      ]
    }),
  isDev && serve('src/.dev'),
  isDev && livereload(),
  !isDev && terser(),
  !isDev && filesize(),
  isExample &&
    copy({
      targets: [{ src: 'src/.dev', dest: '.', rename: 'example' }],
      hook: 'writeBundle'
    }),

private pluinPostcss(options: IBundleOptions) {
    const { extraPostCSSPlugins = [] } = options;
    let cssModules = options.cssModules;
    if (cssModules !== false) {
      cssModules = {
        ...(typeof cssModules === 'object' && cssModules),
        globalModulePaths: [/global\.less$/, /global\.css$/, /node_modules/],
      };
    }

    return postcss({
      modules: cssModules,
      use: [
        [
          'less',
          {
            plugins: [new NpmImport({ prefix: '~' })],
            javascriptEnabled: true,
          },
        ],
      ],
      plugins: [autoprefixer, ...extraPostCSSPlugins],
    });
  }

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss';
import uglify from 'rollup-plugin-uglify';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import pkg from './package.json';

const transformStyles = postcss({
  extract: 'dist/aos.css',
  plugins: [autoprefixer, cssnano]
});

const input = 'src/js/aos.js';

export default [
  {
    input,
    output: {
      file: pkg.browser,
      name: 'AOS',
      format: 'umd',
      sourcemap: process.env.NODE_ENV === 'dev'
    },
    plugins: [

],

    external: ['react', 'react-dom', 'prop-types', 'styled-components'].concat(dependencies),

    plugins: [
      cleaner({
        targets: ['./dist/'],
      }),
      nodeResolve({
        extensions: ['.js', '.jsx'],
      }),
      commonjs({
        include: '../../node_modules/**',
      }),
      options.css &&
        postcss({
          extract: './dist/index.css',
          sourceMap: false,
          plugins: [autoprefixer()],
          modules: {
            generateScopedName: 'TDS_[name]__[local]___[hash:base64:5]',
          },
        }),
      babel({
        runtimeHelpers: true,
        exclude: '../../node_modules/**',
        configFile: '../../babel.config.js',
      }),
      ...(options.plugins ? options.plugins : []),
    ],
  }
}

import { SOURCE_ROOT } from '../constants';
import { lodash } from '../utils';

import RESHAPE_CONFIG from './reshape';
import POSTCSS_CONFIG from './postcss';
import { BABEL_CONFIG_APP } from './babel';

export const APP_CONFIG = {
  input: join(SOURCE_ROOT, 'app.js'),
  format: 'iife',
  context: 'window',
  sourcemap: !env.prod,
  plugins: [
    reshape(RESHAPE_CONFIG),
    postcss(POSTCSS_CONFIG),
    url({ limit: 32 * 1024 }),
    json(),
    lodash(),
    babel(BABEL_CONFIG_APP),
    resolve({ jsnext: true, browser: true }),
    commonjs({ include: 'node_modules/**' }),
    replace(envify(_env)),
    (env.prod ? uglify() : noop()),
  ],
};

export const PREROLLUP_CONFIG = {
  format: 'es',
  context: 'window',
  plugins: [
    postcss({ plugins: [cssnano()] }),

output: {
      dir: "dist",
      format: "amd",
      sourcemap: !prerender,
      entryFileNames: "[name].js",
      chunkFileNames: "[name]-[hash].js"
    },
    watch: { clearScreen: false },
    plugins: [
      {
        resolveFileUrl({ fileName }) {
          return JSON.stringify("/" + fileName);
        }
      },
      !prerender && cssModuleTypes("src"),
      postcss({
        minimize: true,
        modules: {
          generateScopedName: "[hash:base64:5]"
        },
        namedExports(name) {
          return name.replace(/-\w/g, val => val.slice(1).toUpperCase());
        },
        plugins: [
          postCSSUrl({
            url: "inline"
          })
        ]
      }),
      constsPlugin({
        version: pkg.version,
        nebulaSafeDark: nebulaColor,