To achieve the parallel processing of PostCSS files and load them as a separate CSS bundle in your Webpack setup with React, TypeScript, and CSS/LESS, you can follow these steps:

1. Install Necessary Dependencies

First, make sure you have the necessary PostCSS and Webpack loaders installed:

npm install postcss-loader postcss-preset-env css-loader style-loader mini-css-extract-plugin --save-dev

2. Configure PostCSS

Create a postcss.config.js file in the root of your project to configure PostCSS with popular plugins. Here’s an example configuration:

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 1,
      features: {
        'nesting-rules': true,
      },
    }),
    // Add more PostCSS plugins as needed
  ],
};

3. Webpack Configuration

Next, update your Webpack configuration to handle both your regular CSS/LESS files and the PostCSS files separately.

Here’s an example webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    main: './src/index.tsx',
    styles: './src/styles/main.postcss'  // Entry point for PostCSS
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      // Rule for regular CSS/LESS
      {
        test: /\.(css|less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
      // Rule for PostCSS files
      {
        test: /\.postcss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
      // Rule for TypeScript
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',  // This will generate separate CSS files for each entry point
    }),
  ],
};

4. Create PostCSS Files

Now, create a .postcss file in your source directory:

/* src/styles/main.postcss */
:root {
  --main-color: #3498db;
}

body {
  font-family: 'Arial', sans-serif;
  color: var(--main-color);
}

/* More PostCSS code */

5. Import CSS/LESS and PostCSS in Your React Components

In your React components, you can import the regular CSS/LESS files as usual. The PostCSS files will be bundled separately and loaded via the entry point you defined.

Example:

import React from 'react';
import './styles/app.less';  // Regular CSS/LESS

const App = () => {
  return <div>Hello, World!</div>;
};

export default App;

6. Build Your Project

Run your Webpack build to generate the separate CSS bundles:

npm run build

This setup will generate two CSS files in the dist directory:

• main.css for your standard CSS/LESS styles.
• styles.css for the PostCSS processed styles.

These will be loaded separately when you include them in your HTML or within your React application.

7. Include the Bundles in HTML (if necessary)

If you're manually including the CSS bundles in your HTML, it would look something like this:

<link rel="stylesheet" href="dist/main.css">
<link rel="stylesheet" href="dist/styles.css">

This configuration ensures that your PostCSS files are processed separately with the desired plugins and are output as a separate CSS bundle.