add support for as casts

packages/cross-file-tests/__tests__/fixtures/selector/icon.tsx

@@ -0,0 +1,4 @@
+import { styled } from 'next-yak'
+
+export const Icon = styled.svg``
+export const AnyIcon = styled.svg`` as any;

packages/cross-file-tests/__tests__/fixtures/selector/index.tsx

@@ -0,0 +1,10 @@
+import { styled } from "next-yak";
+import { AnyIcon, Icon } from "./icon";
+export const Button = styled.button`
+ ${Icon} {
+  margin-right: 10px;
+ }
+ ${ AnyIcon} {
+  margin-right: 15px;
+ }
+`;

packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx

@@ -0,0 +1,4 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./icon.yak.module.css!=!./icon?./icon.yak.module.css";
+export var Icon = /*#__PURE__*/ styled.svg();
+export var AnyIcon = /*#__PURE__*/ styled.svg();

packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx

@@ -0,0 +1,13 @@
+import { styled } from "next-yak/internal";
+import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css";
+import { AnyIcon, Icon } from "./icon";
+export var Button = /*YAK Extracted CSS:
+.Button {
+  --yak-css-import: url("./icon:Icon",selector) {
+    margin-right: 10px;
+  }
+  --yak-css-import: url("./icon:AnyIcon",selector) {
+    margin-right: 15px;
+  }
+}
+*/ /*#__PURE__*/ styled.button(__styleYak.Button);

packages/cross-file-tests/__tests__/fixtures/selector/output/index.yak.module.css

@@ -0,0 +1,8 @@
+.Button {
+  :global(.icon_Icon___yEni) {
+    margin-right: 10px;
+  }
+  :global(.icon_AnyIcon__xEcaO) {
+    margin-right: 15px;
+  }
+}

packages/next-yak/loaders/lib/resolveCrossFileSelectors.ts

@@ -367,20 +367,34 @@ function parseMixins(
   return mixins;
 }
 
+/**
+ * Unpacks a TSAsExpression to its expression value
+ */
+function unpackTSAsExpression(
+  node: babel.types.TSAsExpression | babel.types.Expression,
+): babel.types.Expression {
+  if (node.type === "TSAsExpression") {
+    return unpackTSAsExpression(node.expression);
+  }
+  return node;
+}
+
 function parseExportValueExpression(
   node: babel.types.Expression,
 ): ParsedExport {
+  // ignores `as` casts so it doesn't interfere with the ast node type detection
+  const expression = unpackTSAsExpression(node);
   if (
-    node.type === "CallExpression" ||
-    node.type === "TaggedTemplateExpression"
+    expression.type === "CallExpression" ||
+    expression.type === "TaggedTemplateExpression"
   ) {
     return { type: "styled-component" };
-  } else if (node.type === "StringLiteral" || node.type === "NumericLiteral") {
-    return { type: "constant", value: node.value };
-  } else if (node.type === "TemplateLiteral" && node.quasis.length === 1) {
-    return { type: "constant", value: node.quasis[0].value.raw };
-  } else if (node.type === "ObjectExpression") {
-    return { type: "record", value: parseObjectExpression(node) };
+  } else if (expression.type === "StringLiteral" || expression.type === "NumericLiteral") {
+    return { type: "constant", value: expression.value };
+  } else if (expression.type === "TemplateLiteral" && expression.quasis.length === 1) {
+    return { type: "constant", value: expression.quasis[0].value.raw };
+  } else if (expression.type === "ObjectExpression") {
+    return { type: "record", value: parseObjectExpression(expression) };
   }
   return { type: "unsupported" };
 }