Multiple spritesheets will clobber each other's CSS

[Rich-Harris]

Example from the demo directory:

[data-sevenup] { background-image: url('./sprite.png'); background-size: 4032px 3960px }
[data-sevenup="1f004.png"] { width: 72px; height: 72px; background-position: 0px 0px }

If another spritesheet were loaded on the same page, the background-size would be wrong. The width/height/position for individual sprites would also be wrong, if there happened to be conflicts between the two spritesheets.

I guess it could be this instead?

[data-sevenup^="twemoji/"] { background-image: url('./sprite.png'); background-size: 4032px 3960px }
[data-sevenup="twemoji/1f004.png"] { width: 72px; height: 72px; background-position: 0px 0px }