postcss-global-data : set postcss 'from' option

e2e/browserslist/package-json/index.mjs

@@ -2,7 +2,7 @@ import assert from 'assert';
 import plugin from 'postcss-preset-env';
 import postcss from 'postcss';
 
-const result = await postcss([plugin()]).process(':any-link { color: blue; }').css;
+const result = (await postcss([plugin()]).process(':any-link { color: blue; }')).css;
 
 if (process.env.BROWSERSLIST_ENV === 'production') {
 	assert.equal(

e2e/interop/custom-media--design-tokens--global-data/.gitignore

@@ -0,0 +1 @@
+

e2e/interop/custom-media--design-tokens--global-data/.nvmrc

@@ -0,0 +1 @@
+v18.8.0

e2e/interop/custom-media--design-tokens--global-data/expect.css

@@ -0,0 +1,5 @@
+@media (min-width: 768px) {
+	body {
+		color: green;
+	}
+}

e2e/interop/custom-media--design-tokens--global-data/media-queries.css

@@ -0,0 +1,3 @@
+@design-tokens url('./tokens.json') format('style-dictionary3');
+
+@custom-media --tablet (min-width: design-token('viewport-tablet' to px));

e2e/interop/custom-media--design-tokens--global-data/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "@csstools/interop--custom-media--design-tokens--global-data",
+	"version": "0.0.0",
+	"private": true,
+	"description": "Can you use custom-media, design-tokens and global-data together?",
+	"scripts": {
+		"build": "postcss style.css -o ./result.css",
+		"test": "node ./test.mjs"
+	},
+	"devDependencies": {
+		"@csstools/postcss-design-tokens": "file:../../../plugins/postcss-design-tokens",
+		"@csstools/postcss-global-data": "file:../../../plugins/postcss-global-data",
+		"postcss-cli": "^10.1.0",
+		"postcss-custom-media": "file:../../../plugins/postcss-custom-media"
+	},
+	"volta": {
+		"extends": "../../package.json"
+	}
+}

e2e/interop/custom-media--design-tokens--global-data/postcss.config.mjs

@@ -0,0 +1,12 @@
+export default () => ({
+	map: false,
+	plugins: {
+		'@csstools/postcss-global-data': {
+			files: [
+				'./media-queries.css',
+			],
+		},
+		'@csstools/postcss-design-tokens': {},
+		'postcss-custom-media': {},
+	},
+});

e2e/interop/custom-media--design-tokens--global-data/result.css

@@ -0,0 +1,5 @@
+@media (min-width: 768px) {
+	body {
+		color: green;
+	}
+}

e2e/interop/custom-media--design-tokens--global-data/style.css

@@ -0,0 +1,5 @@
+@media (--tablet) {
+	body {
+		color: green;
+	}
+}

e2e/interop/custom-media--design-tokens--global-data/test.mjs

@@ -0,0 +1,7 @@
+import assert from 'assert';
+import fs from 'fs/promises';
+
+const result = await fs.readFile('./result.css');
+const expect = await fs.readFile('./expect.css');
+
+assert.equal(result.toString(), expect.toString());

e2e/interop/custom-media--design-tokens--global-data/tokens.json

@@ -0,0 +1,5 @@
+{
+	"viewport-tablet": {
+		"value": 768
+	}
+}