Add container queries support

Author: rtivital

src/postcss-rem-em.ts

@@ -22,6 +22,13 @@ module.exports = () => {
           )
           .replace(emRegExp, (value) => converters.em(value.replace(/em\((.*?)\)/g, '$1')));
       },
+      container: (atRule: AtRule) => {
+        atRule.params = atRule.params
+          .replace(remRegExp, (value) =>
+            converters.remNoScale(value.replace(/rem\((.*?)\)/g, '$1'))
+          )
+          .replace(emRegExp, (value) => converters.em(value.replace(/em\((.*?)\)/g, '$1')));
+      },
     },
   };
 };

src/tests/__snapshots__/containers.test.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@container transforms em 1`] = `
+"
+@container (min-width: 2em) {
+.card {
+    background: red
+}
+  }
+"
+`;
+
+exports[`@container transforms rem 1`] = `
+"
+@container (min-width: 2rem) {
+.card {
+    background: red
+}
+  }
+"
+`;

src/tests/containers.test.ts

@@ -0,0 +1,29 @@
+import { testTransform } from './utils';
+
+const rem = `
+.card {
+  @container (min-width: rem(32px)) {
+    background: red;
+  }
+}
+`;
+
+const em = `
+.card {
+  @container (min-width: em(32px)) {
+    background: red;
+  }
+}
+`;
+
+describe('@container', () => {
+  it('transforms rem', async () => {
+    const res = await testTransform(rem);
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('transforms em', async () => {
+    const res = await testTransform(em);
+    expect(res.css).toMatchSnapshot();
+  });
+});