Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

debugId missing for custom identifiers #1228

Open
2 tasks done
ufaubion-oracle opened this issue Nov 13, 2023 · 0 comments · May be fixed by #1229
Open
2 tasks done

debugId missing for custom identifiers #1228

ufaubion-oracle opened this issue Nov 13, 2023 · 0 comments · May be fixed by #1229

Comments

@ufaubion-oracle
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant