Fix Interop Issue with Import and Custom Properties

plugins/postcss-custom-properties/.tape.js

@@ -1,3 +1,5 @@
+const importWithProps = require('./test/import');
+
 module.exports = {
 	'basic': {
 		message: 'supports basic usage'
@@ -311,5 +313,13 @@ module.exports = {
 		options: {
 			importFrom: {}
 		}
+	},
+	'import': {
+		message: 'supports "postcss-import"',
+		options: {
+			expect: 'import.expect.css',
+			result: 'import.result.css'
+		},
+		plugin: importWithProps
 	}
 };

plugins/postcss-custom-properties/package.json

@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "postcss": "^8.3.6",
+    "postcss-import": "^14.0.2",
     "postcss-tape": "^6.0.1"
   },
   "peerDependencies": {

plugins/postcss-custom-properties/src/index.js

@@ -23,11 +23,12 @@ const creator = opts => {
 
 	return {
 		postcssPlugin: 'postcss-custom-properties',
-		prepare ({ root }) {
+		prepare () {
 			if (canReturnSyncFunction) {
-				customProperties = getCustomPropertiesFromRoot(root, { preserve });
-
 				return {
+					Once: (root) => {
+						customProperties = getCustomPropertiesFromRoot(root, { preserve });
+					},
 					Declaration: (decl) => transformProperties(decl, customProperties, { preserve }),
 				};
 			} else {

plugins/postcss-custom-properties/test/import.css

@@ -0,0 +1,5 @@
+@import "./imported-file.css";
+
+a {
+	color: var(--color);
+}

plugins/postcss-custom-properties/test/import.expect.css

@@ -0,0 +1,8 @@
+:root {
+	--color: blue;
+}
+
+a {
+	color: blue;
+	color: var(--color);
+}

plugins/postcss-custom-properties/test/import.js

@@ -0,0 +1,12 @@
+const postcssImport = require('postcss-import');
+
+const importWithProps = () => {
+	return {
+		postcssPlugin: 'postcss-custom-properties (with postcss-import)',
+		plugins: [postcssImport(), require('../dist/index.cjs')()],
+	};
+};
+
+importWithProps.postcss = true;
+
+module.exports = importWithProps;

plugins/postcss-custom-properties/test/imported-file.css

@@ -0,0 +1,3 @@
+:root {
+	--color: blue;
+}