Merge pull request #51 from vlad-elagin/feature/container-at-rule-processing

Allow processing of `@container` at-rule, add tests for it

Author: princed

README.md

@@ -121,6 +121,28 @@ If your code is written with pre-2.0 import syntax, and utilises [postcss-module
 
 When enabled, value usage within rule selectors will also be replaced by this plugin.
 
+#### atRules `Array<string>`
+
+You can pass a list of at-rules in which `@value`'s should be replaced. Only `@media` rules will be processed by default.
+Note that passed array isn't merged with default `['media']` but overwrites it, so you'll need to include all the rules you want to be processed.
+
+```js
+postcss([
+  require('postcss-modules-values-replace')({ atRules: ['media', 'container']  })
+]);
+```
+**Input:**
+```css
+@value $tables from './breakpoints.css';
+
+@container (width >= $tablet) {}
+```
+
+**Output:**
+```css
+@container (width >= 768px) {}
+```
+
 ### calc() and @value
 
 To enable calculations *inside* **@value**, enable media queries support in [postcss-calc]:

index.js

@@ -149,6 +149,7 @@ const factory = ({
   preprocessValues = false,
   importsAsModuleRequests = false,
   replaceInSelectors = false,
+  atRules = ['media']
 } = {}) => ({
   postcssPlugin: PLUGIN,
   prepare(rootResult) {
@@ -206,10 +207,13 @@ const factory = ({
         node.value = replaceValueSymbols(node.value, definitions);
       },
       AtRule: {
-        media(node) {
-          // eslint-disable-next-line no-param-reassign
-          node.params = replaceValueSymbols(node.params, definitions);
-        },
+        ...atRules.reduce((acc, atRule) => ({
+          ...acc,
+          [atRule]: (node) => {
+            // eslint-disable-next-line no-param-reassign
+            node.params = replaceValueSymbols(node.params, definitions);
+          },
+        }), {}),
         value(node) {
           if (noEmitExports) {
             node.remove();

index.test.js

@@ -263,14 +263,32 @@ test('should replace inside custom properties', async (t) => {
   );
 });
 
-test('should replace inside media queries', async (t) => {
+test('should replace inside media queries by default, without specifying custom at-rules', async (t) => {
   await run(
     t,
     '@value base: 10px;\n@media (min-width: calc(base * 200)) {}',
     '@value base: 10px;\n@media (min-width: calc(10px * 200)) {}',
   );
 });
 
+test('should replace inside media queries when it is specified as a custom at-rule', async (t) => {
+  await run(
+    t,
+    '@value base: 10px;\n@media (min-width: calc(base * 200)) {}',
+    '@value base: 10px;\n@media (min-width: calc(10px * 200)) {}',
+    { atRules: ['media'] }
+  );
+});
+
+test('should replace inside media and container queries when they are specified as a custom at-rules', async (t) => {
+  await run(
+    t,
+    '@value base: 10px;\n@media (min-width: calc(base * 200)) {}\n@container (min-width: calc(base * 200)) {}',
+    '@value base: 10px;\n@media (min-width: calc(10px * 200)) {}\n@container (min-width: calc(10px * 200)) {}',
+    { atRules: ['media', 'container'] }
+  );
+});
+
 test('should allow custom-property-style names', async (t) => {
   await run(
     t,