-1

In my React project inside theme.ts I created some aliases to define my FontSizes. I have to use quotes '' for the keys, otherwise Typescript is complaining:

fontSizes: {
    'xs': '12px',
    'sm': '14px',
    'md': '16px',
    'lg': '18px',
    'xl': '20px',
    '2xl': '24px',
    '4xl': '32px',
    '5xl': '48px',
    '6xl': '64px',
  },

This is working fine.

But when I want to use a value 2xl or 3xl like font-size: ${theme.fontSizes.2xl}; I get this message:

An identifier or keyword cannot immediately follow a numeric literal.
meez
  • 3,783
  • 5
  • 37
  • 91
  • It's unclear what you're asking. Your code snippet works fine. https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhjAvDA3gKBpmAzcUDKAlgF4CmEAXKhlrQOQAeEdVdAjAEwAODdANDVqY6EALYsY7ACw9+goXVEATCewBssgUKx0ANgHNVbAByb59BrtUcADGe3COl6zN5aHdKc9YBmbm-MdAFZvSSlTAIdJNVC6NVc5WgBfNCSAbiA Yes you do have to quote properties that don't look like identifiers, and identifiers cannot start with numbers – Ruan Mendes Dec 21 '20 at 12:58
  • @Juan Mendes yes that's working (because I use quotes around xs, sm, md etc). But when I try to use those values e.g. `font-size: ${theme.fontSizes.2xl};` I get this error: `An identifier or keyword cannot immediately follow a numeric literal.` – meez Dec 21 '20 at 13:02

1 Answers1

0

As stated in MDN docs

A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($). They can't start with a digit! Only subsequent characters can be digits (0-9).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Identifier_after_number

your code must adhere to this and it's normally best to avoid it.

Saying that if you REALLY want the object keys to start with a digit then you can make it work by doing.

font-size: ${theme.fontSizes['2xl']};

Josh Stevens
  • 3,943
  • 1
  • 15
  • 22