Remove hash from the default identifier

[olivierpascal]

Hello,

TL;DR I cannot remove the hash from the default identifier --vars_container_color__9trayx0

Given the following code:

const vars = {
  container: {
    color: createVar(),
  },
};

const rootClassNames = style({
  vars: {
    [vars.container.color]: 'blue',
  },

  borderColor: vars.container.color,
});

The generated CSS var will be: --vars_container_color__9trayx0

I want to customize this identifier to remove the trailing hash, resulting to --vars_container_color.

But the params in the formatting function are: hash, debugId (undefined), filePath and packageName.

How can I get the original var name vars_container_color?

[6mint]

You could remove the hash by using a regex like vars.container.color.replace(/_+[^_]+$/, "") or maybe you would rather like to use a global variable? Then you could just go with createGlobalVar("container-color") instead of createVar()

[olivierpascal]

Let me clarify my point: my point is to have meaningful and predictible var names after compilation, so that css vars can be documented and used in vanilla css.

I want vars.container.color to be compiled to --vars_container_color.

[askoufis]

This is sort of related to #1228. I haven't had time to think about a proper solution to that issue just yet.

However, it seems like you simply want stable, meaningful variable names, rather than just debug IDs. Debug IDs also contain part of the file name, so they aren't exactly stable. Is createGlobalThemeContract what you're after?

[olivierpascal]

Is it possible to expose the generated prefix that VE actually use (vars_container_color) along with existing hash, debugId, filePath and packageName, in the identifiers object param?

At least, we should be able to make an 'identity' function with something like:

vanillaExtractPlugin({
  identifiers: ({ humanReadablePrefix, hash }) => `humanReadablePrefix__${hash}`
});

[olivierpascal]

createGlobalThemeContract() is fine but I also would like predictable var names on a component basis.

Predictability is the key word versus stability ; I understand that debug IDs containing part of the file name are not exactly stable, but that should be the developer responsibility.

[askoufis]

Also, what do you mean by "on a component basis"? If you want to have predictable variable names for each component, then you can do that with createGlobalThemeContract. All it returns is an object mapping keys to variable names, so there's nothing stopping you from using it in a separate .css.ts file for each component.

For example:

// Button.css.ts
export const buttonVars = createGlobalThemeContract(
  {
    container: {
      // --button_vars_container_color
      color: null
    },
    hover: {
      // --button_vars_hover_color
      color: null
    }.
  },
  (_value, path) => `button_vars_${path.join('_')}`
);

You can customize this to your liking, adding in any prefixes/suffixes/formatting you want.

I don't think identifiers is the right way to solve this problem. It would increase the complexity of the debug id babel plugin, and likely wouldn't be able to handle all uses cases (static analysis of all possible ways createVar could be called is quite a hard problem). Additionally, I don't think there would be consensus on what humanReadablePrefix should look like.

[olivierpascal]

You are correct, createGlobalThemeContract() is the way, I don't know how I missed that. Thank you!