update open props recipe (#1105)

Author: romainmenke

postcss-recipes/open-props/README.md

@@ -13,19 +13,19 @@ See : https://open-props.style/
 ## Moving parts
 
 - run PostCSS with `postcss-cli`
-- bundle with `postcss-import`
-- inject `@custom-media` with `postcss-global-data`
+- bundle with `@csstools/postcss-bundler`
+- inject `@custom-media` with `@csstools/postcss-global-data`
 - inject CSS variables with `postcss-jit-props`
 - nesting and other modern features with `postcss-preset-env`
-- minify with `cssnano`
+- minify with `@csstools/postcss-minify`
 
 See `package.json` for the full list of dependencies and the scripts.
 
-## Reading 
+## Reading
 
-- [cssnano](https://cssnano.co)
-- [open props](https://open-props.style/)
-- [postcss-cli](https://github.com/postcss/postcss-cli)
-- [postcss-global-data](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data)
-- [postcss-import](https://www.npmjs.com/package/postcss-import)
-- [postcss-jit-props](https://github.com/GoogleChromeLabs/postcss-jit-props)
+- [`open props`](https://open-props.style/)
+- [`@csstools/postcss-bundler`](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-bundler)
+- [`@csstools/postcss-global-data`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-global-data)
+- [`@csstools/postcss-minify`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-minify)
+- [`postcss-cli`](https://github.com/postcss/postcss-cli)
+- [`postcss-jit-props`](https://github.com/GoogleChromeLabs/postcss-jit-props)

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

@@ -8,12 +8,12 @@
 		"node": "^14 || ^16 || >=18"
 	},
 	"devDependencies": {
+		"@csstools/postcss-bundler": "^1.0.2",
 		"@csstools/postcss-global-data": "^2.0.1",
-		"cssnano": "^6.0.1",
+		"@csstools/postcss-minify": "^1.0.0",
 		"open-props": "^1.5.10",
 		"postcss-cli": "^10.1.0",
 		"postcss-custom-media": "^10.0.0",
-		"postcss-import": "^15.1.0",
 		"postcss-jit-props": "^1.0.13",
 		"postcss-preset-env": "^9.1.0"
 	},

postcss-recipes/open-props/package.json

@@ -1,14 +1,14 @@
-const cssnano = require('cssnano');
 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 postcssImport = require('postcss-import');
 const postcssJitProps = require('postcss-jit-props');
+const postcssMinify = require('@csstools/postcss-minify');
 const postcssPresetEnv = require('postcss-preset-env');
 
 module.exports = {
 	plugins: [
-		postcssImport(),
+		postcssBundler(),
 		postcssGlobalData({
 			files: [
 				'node_modules://open-props/media.min.css',
@@ -24,6 +24,6 @@ module.exports = {
 				'custom-media-queries': false,
 			},
 		}),
-		cssnano(),
+		postcssMinify(),
 	],
 };