Wrapped style function does not produce correct debug ids

[Mihkel Eidast]

Describe the bug

I'm attempting to implement a layerStyle utility function, as recommended by @mrm007 in #955: #955 (comment)

However, using the wrapped function seems to lose the debugIds, which nullifiies the point of defining this kind of utility wrapper.

As should be visible in the reproduction, the wrapped layerStyle function output className does not include the variable name it is assigned to. The expected className would be App_wrappedLayer__ybeycr3

Reproduction

https://codesandbox.io/p/sandbox/jovial-sanderson-cx3wxr?file=%2Fsrc%2FApp.tsx%3A35%2C28

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (2) x64 AMD EPYC
    Memory: 727.70 MB / 2.01 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
    Watchman: 20220528.183901.0 - /usr/local/bin/watchman
  npmPackages:
    @vanilla-extract/css: 1.13.0 => 1.13.0 
    @vanilla-extract/sprinkles: ^1.6.1 => 1.6.1 
    @vanilla-extract/webpack-plugin: ^2.3.0 => 2.3.0 
    webpack: ^5.36.1 => 5.82.0

Used Package Manager

npm

Logs

No response

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Adam Skoufis]

This is a limitation of the way we handle debug IDs. A babel plugin is applied to Vanilla APIs that extracts the debug ID, but this won't work for custom functions that pass through their own debug ID.

Potentially this could be configurable, or maybe it's possible to make the babel plugin flexible enough to handle custom wrappers.

[Remus Mate]

Hi Mihkel,

As there's a virtually infinite number of possible ways consumers can create these wrapper functions, it would be pretty hard to cover them all out of the box.

However, you can create a Babel macro that perfectly fits your needs. Here's one I created for your specific example: https://codesandbox.io/p/sandbox/awesome-hodgkin-npzmh2?file=/src/debugIds/macro.js

Config: https://codesandbox.io/p/sandbox/awesome-hodgkin-npzmh2?file=/webpack.config.js:34,15-34,48
Usage: https://codesandbox.io/p/sandbox/awesome-hodgkin-npzmh2?file=/src/App.css.ts:28,1-32,3

Result:

I would encourage you to play around in AST Explorer and figure out the best API that works for you.

[Remus Mate]

If you think Babel macros are too heavy, a simple(r) Babel plugin can also do the trick:

export default function (babel) {
  const { types: t } = babel;

  return {
    name: "layerStyle-debug-ids",
    visitor: {
      CallExpression(path) {
        const fnName = path.node.callee.name;

        if (fnName !== "layerStyle") return;

        const styleName = path.parent.id.name;
        path.node.arguments.push(
          t.stringLiteral(styleName)
        );
      }
    }
  };
}

// input
export const wrappedLayer = layerStyle(defaultLayer, {
  display: "block",
})

// output
export const wrappedLayer = layerStyle(defaultLayer, {
  display: "block"
}, "wrappedLayer");