Error with css`` inside object with numerical keys

[steadicat]

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

The following code:

const FONT_SIZE_STYLES = {
  '11': css`font-size: 11px;`,
  '12': css`font-size: 12px;`,
  '13': css`font-size: 13px;`,
  '14': css`font-size: 14px;`,
  '15': css`font-size: 15px;`,
  '16': css`font-size: 16px;`,
  '17': css`font-size: 17px;`,
  '18': css`font-size: 18px;`,
  '20': css`font-size: 20px;`,
  '22': css`font-size: 22px;`,
  '24': css`font-size: 24px;`,
  '26': css`font-size: 26px;`,
  '28': css`font-size: 28px;`,
  '32': css`font-size: 32px;`,
};

gives the following error:

Error in ./src/ui/components/core/Text.js
Syntax error: Couldn't determine the class name for CSS template literal. Ensure that it's either:
- Assigned to a variable
- Is an object property
- Is a prop in a JSX element


  12 | 
  13 | const FONT_SIZE_STYLES = {
> 14 |   '11': css`font-size: 11px;`,
     |         ^
  15 |   '12': css`font-size: 12px;`,
  16 |   '13': css`font-size: 13px;`,
  17 |   '14': css`font-size: 14px;`,

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

What is the expected behavior?

It should work fine. If a class name can't be inferred, Linaria should just use a hash.

BTW, is there any way to disable inferring class names and just using hashes? I would like this in production. I couldn't find a mention of it in the docs.

[zamotany]

BTW, is there any way to disable inferring class names and just using hashes? I would like this in production. I couldn't find a mention of it in the docs.

Not really. And we will probably never allow this, since we are debating internally to switch to hash generation based on absolute filename instead o creating a hash based on the style content.

[steadicat]

we are debating internally to switch to hash generation based on absolute filename

What I mean is hiding the variable name from the production class names, no matter how the hash is generated. Why isn’t this allowed? Would save bytes as well as prevent leaking of internal names to production HTML and CSS.