repro 1519

postcss-recipes/open-props/dist/style.css

@@ -1,8 +1 @@
-:root{--radius-2:5px;--size-fluid-3:max(1.5rem, min(3vw, 2rem));--shadow-2:
-    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
-    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));--shadow-3:
-    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
-    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
-    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
-    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
-    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));--shadow-color:220 3% 15%;--shadow-strength:1%;--animation-fade-in:fade-in .5s var(--ease-3);--ease-3:cubic-bezier(.25, 0, .3, 1)}.card{border-radius:var(--radius-2);padding:var(--size-fluid-3);box-shadow:var(--shadow-2)}.card:hover{box-shadow:var(--shadow-3)}@media (prefers-reduced-motion: no-preference){.card{animation:var(--animation-fade-in)}}@media (prefers-color-scheme: dark){:root{--shadow-color:220 40% 2%;--shadow-strength:25%}}@keyframes fade-in{to{opacity:1}}
+.some-class{.nested{flex-direction:column;@media (min-width:0px) and (max-width:239px){flex-direction:row}}}

postcss-recipes/open-props/package.json

@@ -11,6 +11,7 @@
 		"@csstools/postcss-bundler": "^2.0.1",
 		"@csstools/postcss-global-data": "^3.0.0",
 		"@csstools/postcss-minify": "^2.0.1",
+		"cssnano": "^7.0.6",
 		"open-props": "^1.7.6",
 		"postcss-cli": "^11.0.0",
 		"postcss-custom-media": "^11.0.1",

postcss-recipes/open-props/postcss.config.js

@@ -1,29 +1,33 @@
-const openProps = require('open-props');
-const postcssBundler = require('@csstools/postcss-bundler');
-const postcssCustomMedia = require('postcss-custom-media');
-const postcssGlobalData = require('@csstools/postcss-global-data');
-const postcssJitProps = require('postcss-jit-props');
-const postcssMinify = require('@csstools/postcss-minify');
-const postcssPresetEnv = require('postcss-preset-env');
+const isDevelopment = process.env.NODE_ENV === 'development';
 
-module.exports = {
+const postcssConfig = {
 	plugins: [
-		postcssBundler(),
-		postcssGlobalData({
+
+		require('@csstools/postcss-global-data')({
 			files: [
-				'node_modules://open-props/media.min.css',
+				'./node_modules/open-props/media.min.css',
 			],
 		}),
-		postcssCustomMedia({
-			preserve: false,
+
+		require('postcss-jit-props')({
+			...require('open-props'),
+			custom_selector: ':where(html)',
 		}),
-		postcssJitProps(openProps),
-		postcssPresetEnv({
-			features: {
-				'nesting-rules': true,
-				'custom-media-queries': false,
-			},
+
+		require('autoprefixer'),
+
+		require('postcss-custom-media')({
+			preserve: isDevelopment,
 		}),
-		postcssMinify(),
+
 	],
 };
+
+if (process.env.NODE_ENV === 'production') {
+	postcssConfig.plugins.push(
+		require('cssnano')({
+			preset: 'default',
+		}),
+	);
+}
+module.exports = postcssConfig;

postcss-recipes/open-props/src/style.css

@@ -1 +1,10 @@
-@import url("./components/card.css");
+.some-class {
+
+	.nested {
+		flex-direction: column;
+
+		@media (--xxs-only) {
+			flex-direction: row;
+		}
+	}
+}