css-loader: css-loader Does not honor/inherit postcss-loader syntax

Bug report

Actual Behavior

I built a postcss syntax (parser, tokenizer, stringifier, the whole works) so that I can get postcss to recognize hubl syntax (hubspot) in css.

Hubl is basically Jinja and on hubspot is allowed to be used in CSS files.

If I use my postcss syntax with pure postCSS (no webpack) everything works as expected. However, when I wrap it all in webpack and use the postcss loader it appears to run postcss twice.

The first pass is the postcss-loader(which works as expected) the second pass is the css-laoder(which doesnt inherit the postcss-syntax specified) and fails.

Expected Behavior

styles.css (pre-run)

{% if x %}
.test{
  text-align: center;
}
{% endif %}

styles.css (post-run)

{% if x %}
.test{
  text-align: center;
}
{% endif %}

Actual Result

/*{% if hubl statement %}*/.test{
  text-align: center;
}
/*{% endif %}*/

Console Log of flow:

----------- Post CSS Loader Running -------------
Running new parser ==========================+
HUBL FIRE -------------------
HUBL FIRE -------------------
Hubl Stringify Running (from @spingroup/postcss-hubl/lib/stringifier.js)
Hubl Stringify Running
HUBL FIRE STRING start _-_---------------
HUBL FIRE STRING END _-_---------------
Hubl Stringify Running
Hubl Stringify Running
Hubl Stringify Running
HUBL FIRE STRING start _-_---------------
HUBL FIRE STRING END _-_---------------
----------- CSS Loader Running -------------
OG STRINGIFY (from node/postcss/stringifier.js)
OG STRINGIFY (from node/postcss/stringifier.js)
og-comment (from node/postcss/stringifier.js)
OG STRINGIFY (from node/postcss/stringifier.js)
OG STRINGIFY (from node/postcss/stringifier.js)
OG STRINGIFY (from node/postcss/stringifier.js)
og-comment (from node/postcss/stringifier.js)

How Do We Reproduce?

postcss.config.js

const HublSyntax = require('@spingroup/postcss-hubl/lib/hubl-syntax');

module.exports = {
  syntax: HublSyntax,
  mode: "production",
  to: "./dist/main.css",
  plugins: []
};

webpack.config.js

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

const path = require('path');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
  entry: {
    'index': './src/index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
  module: {
    rules: [
      // Relevant config for MiniCssExtractPlugin:
      // (the order of `use` is important)
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

Please paste the results of npx webpack-cli info here, and mention other relevant information

 System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 196.41 MB / 16.00 GB
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.22.1/bin/yarn
    npm: 7.16.0 - ~/.nvm/versions/node/v12.22.1/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 88.0.1
    Safari: 14.1.2
    Safari Technology Preview: 15.0
  Packages:
    css-loader: ^6.5.0 => 6.5.0 
    postcss-loader: ^6.2.0 => 6.2.0 
    style-loader: ^3.3.1 => 3.3.1 
    webpack: ^5.61.0 => 5.61.0 
    webpack-cli: ^4.9.1 => 4.9.1