Unable to customize tokens in a CRA JS app

[tomsdev]

Hi, thanks for building this amazing library! In a Create React App JS application I tried but failed to follow the documentation to customize the tokens here: https://classy-ui.io/customizing-tokens

I created a classy-ui.config.js file at the root folder like in the docs. In my react component I use the normal import (or should I import my own tokens but how?): import { compose, tokens } from 'classy-ui/macro';

When I run npm start it errors that my tokens don't exist, however the default tokens from classy-ui are still there.. Is it a bug or should the documentation be updated to add some more instructions?

[smashercosmo]

Yep, faced similar issue. I created custom classy-ui config like this

module.exports = {
  tokens: {
    space: {
      SPACE_8: '8px',
      SPACE_16: '16px',
      SPACE_24: '24px',
      SPACE_32: '32px',
      SPACE_64: '64px',
      SPACE_96: '96px',
    },
  },
  classnames: {
    pt: {
      tokens: ({ space }) => space,
      css: (name, value) => `${name} {\n  padding-top: ${value};\n}`,
    },
  },
}

After restarting dev server I can see that space tokens has been regenerated, but referring to tokens.pt results in an error. And all classy-ui default tokens and classnames still present.

[CodingDive]

Same issue for me. I tried restarting the TypeScript server in vs code but it didn't help.

[yovanoc]

It should help to have a generate command from classy for the typing I guess

[CodingDive]

Actually, I had my classy-ui.config.js file in the wrong folder. Upon restarting the TypeScript server, it seems to work fine for me.

[CodingDive]

I think I know why this is happening. When using a function to spread the default tokens, I experienced the same error as when I had the config file in the wrong folder.

module.exports = ({ tokens }) => ({
  ...tokens,
  /* Some custom config */
  opacity: {
    OPACITY_HIDE: '0',
  }
})

compose(tokens.opacity.OPACITY_HIDE) throws an error even after restarting the dev + ts server. The solution was to simply copy the default tokens and get rid of the function. When my code looked similar to the snippet of @smashercosmo, the error disappeared.

[tomsdev]

I tried to reproduce it in Codesandbox but I actually can't get classsy-ui to work at all there, I get an error: classy-ui/macro: index_1.processReferences is not a function

See: https://codesandbox.io/s/pedantic-dubinsky-6m9wv?file=/src/App.tsx