postcss/postcss

Hello,

I created a css minifier that works off of the commandline using a tutorial at DO last year. It has been brought to my attention that when the css files are combined and ran through using the following command that custom properties completely disappear.

example:

:root {
    /* Site Colors are HSL values */
    --black: 0, 0%, 0%;                        
}

There is no reference to --black inside the output of the following command so we get black not defined errors in chrome css tab

The Command:

postcss --config /var/www/minify.server/html/postcss-config.json --use postcss-cssnext --use cssnano --no-map --output /tmp/AE6ED53C-2303-4260-B4FD463925159A22-output.txt /tmp/AE6ED53C-2303-4260-B4FD463925159A22.txt

Here is postcss.config.js (Which now that I am typing this I do not think it is used via the command unless it is auto-included)

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
        postcssCustomProperties({
            preserve: true
          })
    ],
};

Here is package.json

{
  "devDependencies": {
    "cssnano": "^5.0.15",
    "postcss": "^8.4.5",
    "postcss-cli": "^9.1.0",
    "postcss-cssnext": "^3.1.1",
    "postcss-custom-properties": "^12.1.8",
    "postcss-import": "^14.0.2"
  }
}

Here is postcss.config.json

{
    "use": ["postcss-cssnext", "cssnano"]
  }

I am a bit over my head here and would appreciate some guidance on why the custom properties disappear and what I need to look into to get the custom properties back.

I have seen a few posts mention: postcss-custom-properties and postcss-preset-env but I am not 100% if those would solve the problem I am having.

Thank You.