vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript

Home Page:https://vanilla-extract.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

debugId missing for custom identifiers

ufaubion-oracle opened this issue · comments

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