How to exclude style generation for tags that share the same name?

[mwisner]

Hi,

I am working on migrating from chakra-ui v2 to panda-css.

Because chakra-ui and panda/ark share a lot of the same tag names (Box, Flex, Heading, etc) the chakra-v2 components end up getting styles extracted for them.

Code:

// This is a private npm package that basically re-exports chakra-v2 components, adds custom ones, and provides a theme.
import { Heading, Box } from '@acme/ui';

export const StableContent = () => {
  return (
    <>
      <Heading mt={2} size="xl">
        Stable Components
      </Heading>
      <Box bg="brand-secondary" p={4} color="text-inverse">
        Old Box
      </Box>
    </>
  );
};

Here is the debug AST for the specific file:

{
  "css": [],
  "cva": [],
  "sva": [],
  "token": [],
  "jsx": [],
  "recipe": {
    "heading": [
      {
        "type": "jsx-recipe",
        "name": "Heading",
        "box": {
          "type": "map",
          "value": {},
          "node": "JsxOpeningElement",
          "line": 8,
          "column": 7,
          "endLineNumber": 8,
          "endColumn": 33
        },
        "data": [
          {
            "mt": 2,
            "size": "xl"
          }
        ]
      }
    ]
  },
  "pattern": {
    "Box": [
      {
        "type": "jsx-pattern",
        "name": "Box",
        "box": {
          "type": "map",
          "value": {},
          "node": "JsxOpeningElement",
          "line": 11,
          "column": 7,
          "endLineNumber": 11,
          "endColumn": 60
        },
        "data": [
          {
            "bg": "brand-secondary",
            "p": 4,
            "color": "text-inverse"
          }
        ]
      }
    ]
  }
}

Looking at the docs I see https://panda-css.com/docs/concepts/hooks#configuring-jsx-extraction, but the arguments to write a custom rule don't seem to include additional details about which package the tag came from.

Is there anyway to avoid extracting styles for tags that share the same name? I think in our case at least if we had access to the import package during the parser:before hook we should in theory be able to exclude the chakra-v2 code.

[mwisner]

it looks like I can do this by file:

  hooks: {
    "parser:before": (args) => {
      if (
        !args.content.includes("@acme/styled-system") || !args.content.includes("@acme/ui-beta")
      ) {
        args.configure({
          matchTagProp: (tag, prop) => {
            return false;
          },
          matchTag: (tag) => {
            return false;
          },
        });
      }
    },
  },

This seems to avoid generating the bulk of it. it will still pick up additional css if the file contains a mixture of both old and new.