Use PostCSS Global Data (#183)

this should unblock #149

package.json

@@ -39,6 +39,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@csstools/postcss-global-data": "^1.0.3",
     "@wordpress/babel-plugin-import-jsx-pragma": "^4.12.0",
     "@wordpress/babel-preset-default": "^7.8.0",
     "@wordpress/dependency-extraction-webpack-plugin": "^4.12.0",

postcss.config.js

@@ -1,20 +1,19 @@
 module.exports = {
 	plugins: [
 		['postcss-import'],
+		[
+			'@csstools/postcss-global-data',
+			{
+				files: [
+					'./theme/src/css/vars.css',
+					'./theme/src/css/vars/_media-queries.css',
+				],
+			},
+		],
 		[
 			'postcss-preset-env',
 			{
 				stage: 1,
-				features: {
-					'custom-media-queries': {
-						preserve: false,
-						importFrom: './theme/src/css/vars/_media-queries.css',
-					},
-					'custom-properties': {
-						preserve: true,
-						importFrom: './theme/src/css/vars.css',
-					},
-				},
 			},
 		],
 		['cssnano'],

theme/src/css/vars/_media-queries.css

@@ -5,7 +5,7 @@
  * at the moment.
  *
  * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq
- * @link: https://github.com/postcss/postcss-custom-media
+ * @link: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media
  **/
 @custom-media --xs-query screen and (max-width: 47.9999999em); /** < 768px **/
 @custom-media --sm-query screen and (min-width: 48em); /** >= 768px **/