Implement StyleX transform scaffold with stylis parsing

package.json

@@ -41,14 +41,16 @@
     "lint": "oxlint --ignore-pattern 'test-cases/**' --ignore-pattern 'storybook-static/**'",
     "lint:fix": "oxfmt && oxlint --fix",
     "typecheck": "tsc --noEmit",
-    "ci": "pnpm run lint && pnpm run typecheck && pnpm run test:run",
+    "ci": "pnpm install --frozen-lockfile && pnpm run lint && pnpm run typecheck && pnpm run test:run",
     "prepublishOnly": "pnpm run build",
     "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
-    "jscodeshift": "^17.3.0"
+    "jscodeshift": "^17.3.0",
+    "stylis": "^4.3.6"
   },
   "devDependencies": {
+    "@types/stylis": "4.2.5",
     "@emotion/is-prop-valid": "^1.4.0",
     "@playwright/test": "^1.57.0",
     "@storybook/react": "^10.1.10",
@@ -58,6 +60,7 @@
     "@stylexjs/unplugin": "^0.17.4",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^25.0.3",
+    "@types/estree": "^1.0.6",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",

src/transform.test.ts

@@ -389,3 +389,40 @@ export const App = () => <Button>Click</Button>;
     expect(result.warnings).toHaveLength(0);
   });
 });
+
+describe("stylis parsing", () => {
+  const source = `
+import styled from 'styled-components';
+
+const Button = styled.button\`
+  color: blue;
+  &:hover { color: red; }
+  @media (min-width: 500px) { color: green; }
+  outline: \${({ theme }) => theme.outline};
+\`;
+
+export const App = () => <Button/>;
+`;
+
+  it("should map pseudo-classes and media queries into nested properties", () => {
+    const result = transformWithWarnings(
+      { source, path: "test.tsx" },
+      { jscodeshift, j: jscodeshift, stats: () => {}, report: () => {} },
+      { adapter: defaultAdapter },
+    );
+
+    expect(result.warnings.map((w) => w.feature)).not.toContain("selector-interpolation");
+    expect(result.code).toContain("\":hover\"");
+    expect(result.code).toContain("@media (min-width: 500px)");
+  });
+
+  it("should pass theme references through the adapter", () => {
+    const result = transformWithWarnings(
+      { source, path: "test.tsx" },
+      { jscodeshift, j: jscodeshift, stats: () => {}, report: () => {} },
+      { adapter: defaultAdapter },
+    );
+
+    expect(result.code).toContain("var(--outline)");
+  });
+});