Custom identifier doesn't allow hyphens inside a css class

[Yevhen Noskov]

Describe the bug

Custom identifier function throws an error, when trying to use css class with hyphens inside.

const withVanillaExtract = createVanillaExtractPlugin({
    identifiers: ({ hash }) => `prefix-${hash}` //will throw an Error
});

It seems the regex detects the false negative result.

// packages\css\src\identifier.ts
if (!identifier.match(/^[A-Z_][0-9A-Z_]+$/i)) {
  throw new Error(
    `Identifier function returned invalid indentifier: "${identifier}"`,
  );
}

Reproduction

https://github.com/EvgenNoskov/vanilla-css-issue

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Memory: 7.59 GB / 31.94 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 120.0.6099.71
    Edge: Spartan (44.19041.3636.0), Chromium (120.0.2210.61)
    Internet Explorer: 11.0.19041.3636
  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

Error: Identifier function returned invalid indentifier: "prefix-1gezp2d0"
Import trace for requested module:
./src/components/MyComponent.css.ts
./src/components/MyComponent.tsx
./src/app/page.tsx

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.