Why do I need importMap?

[with-key]

Hi! 👋
I'm using pnpm workspaces, and the structure of the project is as follows.

apps
|__ biskit-user

packages
|__ mold/user

styled-system

And the package.json and panda.config.ts of the biskit-user(just my service name) service are shown below.

/apps/user/package.json

{
  "name": "biskit-user",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "@biskit/styled-system": "workspace:*",
    "@mold/user": "workspace:*"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@pandacss/dev": "^0.51.1",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "typescript-eslint": "^8.18.2",
    "vite": "^6.0.5"
  }
}

/apps/user/panda.config.ts

import { defineConfig } from "@pandacss/dev";
import { corePresets } from "@mold/user/presets";

export default defineConfig({
  presets: [corePresets],
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@mold/user/src/**/*.{js,jsx,ts,tsx}",
  ],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {},

  // The output directory for your css system
  // importMap: "@biskit/styled-system",
  outdir: "../../styled-system",

  jsxFramework: "react",
});

And I've been playing around with pandacss to test out different features. I was expecting some issues here due to the missing importMap setting, but it's working fine without any issues.

What does importMap do, and am I right that this setting is unnecessary in my current project structure?

import { css } from "@biskit/styled-system/css";
import { styled } from "@biskit/styled-system/jsx";
import { button } from "@biskit/styled-system/recipes";
import { Button } from "@mold/user";

export default function App() {
  return (
    <>
      <div className={button({})}>hello world!</div>
      <div className={button({})}>hello world!</div>
      <div className={css({ color: "red.400" })}>hello world!</div>
      <MyButton variant="funky">hello world!</MyButton>
      <styled.span bg="yellow">hello world!</styled.span>
      <styled.span bg="yellow">hello world!</styled.span>
      <Button></Button>
    </>
  );
}


const MyButton = styled("button", {
  base: {
    display: "flex",
    border: "3px solid token(colors.red.400)",
  },
  variants: {
    variant: {
      funky: { bg: "red.400", color: "white" },
      edgy: { border: "3px solid token(colors.red.400)" },
    },
  },
});

[cgatian]

I believe importMap provides a hint to Panda to know which imports are specific to Panda to avoid conflicts with other libraries. I was testing this out locally as well and it seems to extract the styles without it, which is unexpected.

Might be related to: #3089