Skip to content

debugId missing for custom identifiers #1228

@ufaubion-oracle

Description

@ufaubion-oracle

Describe the bug

I originally raised this issue on the Vanilla-Extract Discord server here. - https://discord.com/channels/885877446098964512/885877446891667529/1171464190200922152

TL;DR The debugId is undefined for custom identifiers.

For context, I ran into this issue when authoring a component library using Vanilla-Extract. To repo this issue, I created a very simple Next.js app to illustrate the issue.

Here is the Vanilla-Extract styling for the app.

// src/app/page.css.ts
import { style } from '@vanilla-extract/css';

export const main = style({
  fontWeight: 'bold'
});

With the above styling I would expect the debugId passed into the custom identifier to be 'main' however it is undefined.

// next.config.js
const hash = require('@emotion/hash').default;
const [major] = (process.env.npm_package_version ?? '1.0.0').split('.');

const {
  createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin({
  identifiers: ({ debugId, hash: fileHash}) => `${debugId}__${hash(fileHash + major)}`
});

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = withVanillaExtract(nextConfig);

This results in the CSS class name undefined__b6xo1n instead of the expected main__b6xo1n.

Reproduction

https://github.com/ufaubion-oracle/my-vanilla-app

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 632.83 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 8.10.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 119.1.60.114
    Chrome: 119.0.6045.123
    Edge: 116.0.1938.69
    Safari: 16.4
  npmPackages:
    @vanilla-extract/css: 1.14.0 => 1.14.0 
    @vanilla-extract/next-plugin: 2.3.2 => 2.3.2

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions