class name starting with digit is invalid

[forresto]

In development we're using $displayName so this issue is hidden, but once we built for production I noticed that class names starting with digits do not work. I would prefer to have an option to keep $displayName in production. But the underlying issue (hashes can start with digit) might also need to be fixed?

import { create } from "https://esm.run/free-style";

// Create a stylesheet instance.
const sheet = create();

const backgroundStyle = sheet.registerStyle({
  backgroundColor: "red",
});

const textSyles = sheet.getStyles();

console.log(backgroundStyle); // 14svl5e
console.log(textSyles); // .14svl5e{background-color:red}

– demo: https://www.val.town/x/forresto/free-style-bug/code/main.ts

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make 14svl5e a valid class, CSS2 requires the first digit to be escaped: .\31 4svl5e [14svl5e]

– via https://jigsaw.w3.org/css-validator/#validate_by_input

A simple fix would be prefix generated names with an underscore, so _14svl5e and ._14svl5e{background-color:red}

[forresto]

typestyle depends on free-style 3.1.0 which does not have the issue.

console.log(backgroundStyle); // f14svl5e
console.log(textSyles); // .f14svl5e{background-color:red}

Same hash with "f" prepended.

---

Now I see that at some point the "f" prefix was replaced with a constructor argument to Sheet, so to get a working version I can do this:

import { create } from "https://esm.run/free-style@5.0.1";

// Create a stylesheet instance.
const sheet = create(undefined, "_");

const backgroundStyle = sheet.registerStyle({
  backgroundColor: "red",
});

const textSyles = sheet.getStyles();

console.log(backgroundStyle); // _14svl5e
console.log(textSyles); // ._14svl5e{background-color:red}

But this isn't clear in the readme. The default prefix is "".