v12.0.0's env = development and preserve: false is not working.

[demonguyj]

pcss

@import "./_css/__function.pcss"; // :root

@import "./_css/common_content.pcss"; // contents

postcss.config

module.exports = (api) => ({
    plugins: {
        "postcss-import": {},
        "postcss-advanced-variables": {},
        "postcss-custom-properties": {
            preserve: false,
        },
        }
}

v11.0.0 env = development && preserve: false

#wrap_content {
    display: flex;
    font-size: 15px;
    flex-direction: column;
    justify-content: center;
}

#wrap_content,
#wrap_content.mbti1 {
    background-color: #6236ff;
}

but v12.0.0 env = development && preserve: false

:root {
    --purple: #6236ff;
}

#wrap_content {
    display: flex;
    font-size: 15px;
    flex-direction: column;
    justify-content: center;
}

#wrap_content,
#wrap_content.mbti1 {
    background-color: var(--purple);
}

I want to visible before result.

Because it's not working to ie 11.

Please check this please.

Thanks :)

[jonathantneal]

Would you be able to provide a failing test or a reproduction somehow? 🥺

[demonguyj]

Okay. I reproduction my case.

Test and please ask any question.

Thanks :)

pcss

test.pcss
:root {
    --purple: #6236ff;
    --gray: #e9ebf3;
    --white: #fff;
    --black: rgba(0, 0, 0, 0.85);
    --resultBlack: #0f0f22;
    --resultPurple: #414b8f;
    --resultPurpleLight: #a1a9ff;
}

#wrap {
    &_content {
        display: flex;
        background-color: var(--purple);
        font-size: 15px;
        flex-direction: column;
        justify-content: center;
        }
}

config

module.exports = (api) => ({
    // `api.file` - path to the file
    // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/
    // `api.webpackLoaderContext` - loader context for complex use cases

    plugins: {
        "postcss-import": {},
        "postcss-advanced-variables": {},
        "postcss-custom-properties": {
            preserve: false,
        },
        "postcss-custom-selectors": {},
        "postcss-nested": {},
    },
})

setting

NODE_ENV=development

[dweidner]

I have a similar issue but independent from the environment I set. I use postcss-import as well. In postcss-custom-properties@10 everything worked as expected. In postcss-custom-properties@11 and postcss-custom-properties@12 it works only if I specify the corresponding files containing my custom properties via the importFrom option. If I include those files directly via an @import statement all custom properties remain within the document.

I think it is related to the file structure of a project. My main entry point is main.css which includes various files holding custom properties (e.g. settings.typography.css). If I include those custom properties directly in main.css everything is working as expected.

[dweidner]

Just noticed that this issues could be related to #204

[romainmenke]

@demonguyj Can you try with the latest version? This might be fixed.