gatsby-background-image: Some utility class names are not escaped which breaks

Related-ish to https://github.com/timhagn/gatsby-background-image/issues/40

Description

When using some Tailwind classes such as w-1/4, the package reuses them as is instead of escaping them which generates invalid CSS:

// Expected
.main-image.w-1\/4:before,

// Generated
.main-image.w-1/4:before,

Expected result

The generated selectors apply to my element

Actual result

The generated selectors do not apply to my element

---

I linked #40 because when I learned how the package works underneath I was very surprised, and it took me some time to track why things would break as soon as I’d add a class name. I don’t think it was such a good idea to remove unique IDs for the background images, using the classes on them just seems extremely error prone as you trust the consumer of the package to give unique class names to each image which… is the opposite of what a class is for.

Why not simply add an id prop since that’s a unique HTML attribute and make it mandatory? Then you could just target #foobar which would be guaranteed to target this element specifically, would that solve the issue? I don’t believe relying on user class names is very future proof, that or the documentation needs to be much clearer on the constraint around class names being unique. 😕