Synchronous run of postcss-custom-properties leads to unexpected results

[Antonio-Laguna]

Bug description

Introduced here: postcss/postcss-custom-properties#181

Most of the time canReturnSyncFunction is true and this leads to vars in other places not being properly transformed, this is especially dangerous when combined with postcss-import.

Source CSS

/* util/an-import.css */
:root {
    --foo: red;
}

/* Another file */
@import './util/an-import.css';

.foo {
    color: var(--foo);
}

Expected CSS

:root {
    --foo: red;
}

.foo {
    color: red;
    color: var(--foo);
}

Actual CSS

:root {
    --foo: red;
}

.foo {
    color: var(--foo);
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

No response

Extra config

This needs to happen on external files

What plugin are you experiencing this issue on?

PostCSS Custom Properties

Plugin version

12.0.2

What OS are you experiencing this on?

macOS

Node Version

14.17.3

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR