css modules: use a terser selector format that requires less escaping (vercel/turborepo#3437)

Fixes WEB-447.

Previously, generated classnames would include literal `/` characters,
which need escaping when generating selectors. While users should still
escape selectors, this avoids it for this case and makes generated code
easier to read. This format is also more aligned with what webpack-based
css modules generates.

This also removes the square character as a separator, since it breaks
words and makes double-clicking for selection more difficult.

Author: wbinnssmith

crates/next-dev-tests/tests/integration/next/font-google/basic/pages/index.js

@@ -18,8 +18,7 @@ export default function Home() {
 function runTests() {
   it("returns structured data about the font styles from the font function", () => {
     expect(interNoArgs).toEqual({
-      className:
-        "className◽[project-with-next]/crates/next-dev-tests/tests/integration/next/font-google/basic/[embedded_modules]/@vercel/turbopack-next/internal/font/google/inter_34ab8b4d.module.css",
+      className: "className__inter_34ab8b4d__77c0d301",
       style: {
         fontFamily: "'__Inter_34ab8b4d'",
         fontStyle: "normal",