From 17a66450bc769f707488399eb4e7d363d1d8c79b Mon Sep 17 00:00:00 2001
From: Vlad Yelahin <v.yelahin@helsi.me>
Date: Tue, 5 Mar 2024 22:57:10 +0200
Subject: [PATCH] Allow processign `container` at-rule, add tests for it

---
 index.js      | 28 +++++++++++++++++++++-------
 index.test.js | 16 ++++++++++++++++
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/index.js b/index.js
index db66cc4..ffc2e9d 100644
--- a/index.js
+++ b/index.js
@@ -166,15 +166,21 @@ const factory = ({
         let preprocessPlugins = [];
         if (preprocessValues) {
           const rootPlugins = rootResult.processor.plugins;
-          const oursPluginIndex = rootPlugins
-            .findIndex((plugin) => plugin.postcssPlugin === PLUGIN);
+          const oursPluginIndex = rootPlugins.findIndex(
+            (plugin) => plugin.postcssPlugin === PLUGIN
+          );
           preprocessPlugins = rootPlugins.slice(0, oursPluginIndex);
         }
 
         const definitionCache = new Map();
         async function walkFile(from, dir, requiredDefinitions) {
           const request = importsAsModuleRequests ? urlToRequest(from) : from;
-          const resolvedFrom = await resolve(concordContext, dir, request, resolveContext);
+          const resolvedFrom = await resolve(
+            concordContext,
+            dir,
+            request,
+            resolveContext
+          );
 
           const cached = definitionCache.get(resolvedFrom);
           if (cached) {
@@ -186,8 +192,9 @@ const factory = ({
             ...preprocessPlugins,
             walkerPlugin(walk, requiredDefinitions, walkFile),
           ];
-          const result = await postcss(plugins)
-            .process(content, { from: resolvedFrom });
+          const result = await postcss(plugins).process(content, {
+            from: resolvedFrom,
+          });
 
           definitionCache.set(resolvedFrom, result.messages[0].value);
 
@@ -197,7 +204,7 @@ const factory = ({
         definitions = await walk(null, walkFile, root, rootResult);
         rootResult.messages.push({
           plugin: PLUGIN,
-          type: 'values',
+          type: "values",
           values: definitions,
         });
       },
@@ -210,6 +217,10 @@ const factory = ({
           // eslint-disable-next-line no-param-reassign
           node.params = replaceValueSymbols(node.params, definitions);
         },
+        container(node) {
+          // eslint-disable-next-line no-param-reassign
+          node.params = replaceValueSymbols(node.params, definitions);
+        },
         value(node) {
           if (noEmitExports) {
             node.remove();
@@ -219,7 +230,10 @@ const factory = ({
       Rule(node) {
         if (replaceInSelectors) {
           // eslint-disable-next-line no-param-reassign
-          node.selector = ICSSUtils.replaceValueSymbols(node.selector, definitions);
+          node.selector = ICSSUtils.replaceValueSymbols(
+            node.selector,
+            definitions
+          );
         }
       },
     };
diff --git a/index.test.js b/index.test.js
index f4c0d9d..15c8df4 100644
--- a/index.test.js
+++ b/index.test.js
@@ -271,6 +271,22 @@ test('should replace inside media queries', async (t) => {
   );
 });
 
+test('should replace inside container queries', async (t) => {
+  await run(
+    t,
+    '@value base: 10px;\n@container (min-width: calc(base * 200)) {}',
+    '@value base: 10px;\n@container (min-width: calc(10px * 200)) {}',
+  );
+});
+
+test('should replace inside named container queries', async (t) => {
+  await run(
+    t,
+    '@value base: 10px;\n@container header (min-width: calc(base * 200)) {}',
+    '@value base: 10px;\n@container header (min-width: calc(10px * 200)) {}',
+  );
+});
+
 test('should allow custom-property-style names', async (t) => {
   await run(
     t,