postcss/postcss-custom-properties

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

demonguyj opened this issue · 5 comments

demonguyj commented

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 commented

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

demonguyj commented

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 commented

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.

  • 👍1
dweidner commented

Just noticed that this issues could be related to #204

romainmenke commented

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

  • 👍1