add square-bracket-support

packages/next-yak/loaders/__tests__/cssloader.test.ts

@@ -289,6 +289,40 @@ const headline = css\`
     `);
   });
 
+  it("should replace breakpoint references with actual media queries when using square brackets", async () => {
+    expect(
+      await cssloader.call(
+        loaderContext,
+        `
+import { css } from "next-yak";
+import { queries } from '@/theme.yak';
+
+const headline = css\`
+  color: blue;
+  \${queries["sm"]} {
+    color: red;
+  }
+  transition: color \${duration} \${easing};
+  display: block;
+  \${css\`color: orange\`}
+  \`;
+`
+      )
+    ).toMatchInlineSnapshot(`
+      ".headline_0 {
+        color: blue;
+        @media (min-width: 640px) {
+          color: red;
+        }
+        transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+        display: block;
+          &:where(.headline_1) {
+      color: orange
+          }
+      }"
+    `);
+  });
+
   it("should prevent double escaped chars", async () => {
     // in styled-components \\ is replaced with \
     // this test verifies that yak provides the same behavior

packages/next-yak/loaders/lib/replaceQuasiExpressionTokens.cjs

@@ -27,41 +27,19 @@
 module.exports = function replaceTokensInQuasiExpressions(quasi, replacer, t) {
   for (let i = 0; i < quasi.expressions.length; i++) {
     const expression = quasi.expressions[i];
-    // replace direct identifiers e.g. ${query}
-    if (t.isIdentifier(expression)) {
-      const replacement = replacer(expression.name);
-      if (replacement === false) {
-        continue;
-      }
-      replaceExpressionAndMergeQuasis(quasi, i, replacement);
-      i--;
-    }
-    // replace member expressions e.g. ${query.xs}
-    // replace deeply nested member expressions e.g. ${query.xs.min}
-    else if (
-      t.isMemberExpression(expression) &&
-      t.isIdentifier(expression.object)
-    ) {
-      /** @type {any} */
-      let replacement = replacer(expression.object.name);
-      if (replacement === false) {
-        continue;
-      }
-      /** @type {import("@babel/types").Expression} */
-      let object = expression;
-      while (t.isMemberExpression(object)) {
-        if (!t.isIdentifier(object.property)) {
-          break;
-        }
-        if (typeof replacement !== "object" || replacement === null) {
-          break;
-        }
-        replacement = replacement[object.property.name];
-        object = object.object;
-      }
-      replaceExpressionAndMergeQuasis(quasi, i, replacement);
+    // find the value to replace the expression with
+    const replacement = getReplacement(expression, replacer, t);
+    // if it is a nested value, find the value of the expression
+    // e.g. x.y.z -> find the value of z
+    const replacementValue = replacement && getReplacementValueForExpression(
+      expression,
+      replacement,
+      t
+    );
+    if (replacementValue !== false) {
+      replaceExpressionAndMergeQuasis(quasi, i, replacementValue);
       i--;
-    }
+    } 
   }
 };
 
@@ -85,3 +63,98 @@ function replaceExpressionAndMergeQuasis(quasi, expressionIndex, replacement) {
     stringReplacement + quasi.quasis[expressionIndex + 1].value.cooked;
   quasi.quasis.splice(expressionIndex + 1, 1);
 }
+
+/**
+ * Find the replacement for the expression
+ *
+ * searches for:
+ *   - `x` -> x
+ *   - `x.y` -> x
+ *   - `x[0]` -> x
+ *   - `x()` -> x
+ *   - `x.y()` -> x
+ *
+ * @param {import("@babel/types").Expression | import("@babel/types").TSType} expression
+ * @param {(name: string) => unknown} replacer
+ * @param {import("@babel/types")} t
+ */
+function getReplacement(expression, replacer, t) {
+  if (t.isIdentifier(expression)) {
+    return replacer(expression.name);
+  }
+  if (t.isMemberExpression(expression) && t.isIdentifier(expression.object)) {
+    return replacer(expression.object.name);
+  }
+  if (t.isCallExpression(expression) && t.isIdentifier(expression.callee)) {
+    return replacer(expression.callee.name);
+  }
+  if (
+    t.isCallExpression(expression) &&
+    t.isMemberExpression(expression.callee) &&
+    t.isIdentifier(expression.callee.object)
+  ) {
+    return replacer(expression.callee.object.name);
+  }
+  return false;
+}
+
+/**
+ * The value for an expression can be a simple identifier e.g.
+ * import { x } from "demo.yak";
+ * console.log(x);
+ *
+ * However it could also be a nested value e.g.
+ * import { x } from "demo.yak";
+ * console.log(x.persons[0].hobbies["art"].name);
+ *
+ * This function recursively searches for the value of the expression
+ * or returns false if the value is not found
+ *
+ * @param {import("@babel/types").Expression | import("@babel/types").TSType} expression
+ * @param {any} value
+ * @param {import("@babel/types")} t
+ */
+function getReplacementValueForExpression(expression, value, t) {
+  if (value === null || value === undefined || typeof value === "boolean") {
+    return false;
+  }
+  if (t.isIdentifier(expression)) {
+    if (typeof value === "string" || typeof value === "number") {
+      return value;
+    }
+  }
+
+  if (typeof value === "object" && t.isMemberExpression(expression)) {
+    if (expression.computed) {
+      // e.g. x[0]
+      if (t.isNumericLiteral(expression.property)) {
+        return getReplacementValueForExpression(
+          expression.object,
+          value[expression.property.value],
+          t
+        );
+      }
+      // e.g. x["0"]
+      else if (t.isStringLiteral(expression.property)) {
+        return getReplacementValueForExpression(
+          expression.object,
+          value[expression.property.value],
+          t
+        );
+      } else {
+        // right now we don't support dynamic property names
+        // e.g. x[y]
+        return false;
+      }
+    }
+    // e.g. x.y
+    else if (t.isIdentifier(expression.property)) {
+      return getReplacementValueForExpression(
+        expression.object,
+        value[expression.property.name],
+        t
+      );
+    }
+  }
+  return false;
+}

packages/next-yak/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "types": "./dist/",
   "exports": {