Development mode identifiers should replace . with _

[dbasilio]

Describe the bug

To differentiate our vanilla extract css files to scss, we have to use a prefix to .css.ts so that we can handle the compiled vanilla css files differently than our compiled scss files. We've gone with .vanilla.css.ts but that means our development mode class names now have a . in them, which needs to be escaped in the CSS files. This is a vector for instability that we would rather avoid, so it would be nice if:

• vanilla extract would automatically replace non-word/non-whitespace characters in the file page with _, or
• vanilla extract exposed the classname in the identifiers function so we could do basically the same thing ourselves

Right now the classname is not exposed so all our classnames are the same except for the hash, which is not helpful for understanding which styles are fighting.

Reproduction

No repro

System Info

System:
    OS: macOS 14.7
    CPU: (12) arm64 Apple M2 Pro
    Memory: 57.23 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 4.1.1 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 129.0.6668.101
    Firefox: 131.0.2
    Safari: 17.6
  npmPackages:
    @vanilla-extract/css: ^1.16.0 => 1.16.0 
    @vanilla-extract/css-utils: ^0.1.4 => 0.1.4 
    @vanilla-extract/jest-transform: ^1.1.9 => 1.1.9 
    @vanilla-extract/webpack-plugin: ^2.3.13 => 2.3.13 
    webpack: ^5.91.0 => 5.93.0

Used Package Manager

yarn

Logs

No response

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.