postcss option doesn't work

[CY Lee]

I want to add a feature "logical-properties-and-values" like:

module.exports = {
    style: {
        postcss: {
            env: {
                stage: 3,
                features: {
                    'nesting-rules': true,
                    'logical-properties-and-values': { "dir": "ltr" }
                }
            }
        },
    }
};

i want to do this,but it doesn't work;

inset:0;
//becomes
top:0;left:0;right:0;bottom:0;

verison

"react-scripts": "5.0.1",
"@craco/craco": "^7.0.0"

[Lars Munkholm]

I've had a similar issue where craco was completely ignoring any configurations I made to postcss.
I tried following the craco documentation and recipes, but nothing worked.

Then I thought, that maybe I could customize the postcss config through webpack using craco's getLoader - but that didn't work either. So I gave up.

But after a good night's sleep I came up with the following:

const { getLoaders, loaderByName } = require("@craco/craco");

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
            const { hasFoundAny: postCssHasFoundAny, matches: postcssMatches } = getLoaders(
                webpackConfig,
                loaderByName("postcss-loader")
            );

            if (postCssHasFoundAny) {
                postcssMatches[postcssMatches.length - 1].loader.options.postcssOptions.config =
                    path.join(__dirname, "./postcss.config.js");
            }

            return webpackConfig;
        },
    },
};

This makes craco use postcss.config.js.

You could probably do something like this, if you don't want to use a config file:

postcssMatches[postcssMatches.length - 1].loader.options.postcssOptions.env = {
    ...postcssMatches[postcssMatches.length - 1].loader.options.postcssOptions.env,
    stage: 3,
    features: {
        'nesting-rules': true,
        'logical-properties-and-values': { "dir": "ltr" }
    }
};

[Vlad Elagin]

@CYLee2020 @larsmunkholm same for me, but CRACO doesn't ignore style.postcss.loaderOptions from craco.config.js. I could add postcss plugins via this API, not sure if it'll work for env tho. Example in #506

[Dilan Nair]

This issue is linked to #513 and will be closed once that's merged but please leave a comment if it isn't resolved.