Circular reference created when reusing keyword

[jorisw]

When I define the following colors in my theme file:

colors: {
  content: {
    primary: 'primary',
    secondary: 'cobalt.400',
  }
  primary: 'cobalt.600',
},

My Next.js stack crashes with error:

wait  - compiling...
error - ../../shared/design-system/src/config/themes/mytheme/theme.ts
RangeError: ../shared/design-system/src/config/themes/mytheme/theme.ts: Maximum call stack size exceeded

If I skip the indirect reference and refer the color directly:

colors: {
  content: {
    // TODO Refer to this as 'primary' without a circular reference issue occurring
    primary: 'cobalt.600',
    secondary: 'cobalt.400',
  },
  primary: 'cobalt.600',
},

... all is fine.

The reason I have primary defined both directly under color and under content, is because primary color is a required setting in ThemeUI, while we have a collection of colors for different classes of content.

[atanasster]

I see - yes its an infinite loop. Can you try

colors: {
  content: {
    primary: 'colors.primary',
    secondary: 'cobalt.400',
  }
  primary: 'cobalt.600',
},

[jorisw]

Doesn't crash, but doesn't pick up the color either. Browser shows the text as:

color: var(--theme-ui-colors-text, colors.primary);

[atanasster]

Thanks for checking, I will get to it now and will post back asap.

[jorisw]

Changing the primary color to a direct color doesn't work either.

Is it possible this is in fact already a level 3 reference, counting the color itself, and perhaps you went only as far as allowing for 2 steps?

    content: {
      primary: 'colors.primary', // Reference #2
    },

    primary: '#ff0000', // Reference #3
    text: 'content.primary', // Reference #1

[atanasster]

Thanks @jorisw - just released 0.8.1 with a fix for recursive keys. However you would still need to use full reference

export const theme: Theme = {
  colors: {
    content: {
      primary: "colors.primary",
      secondary: "colors.secondary",
    },
    primary: "cobalt.600",
    secondary: "cobalt.800",
    text: "content.primary",
  },
};

Here is the full test as per your example:
https://github.com/atanasster/babel-plugin-theme-ui/blob/master/tests/fixtures/recursive-key/code.ts

[jorisw]

Thanks, your test output looks correct however my h1 that uses it, stilll shows:

color: var(--theme-ui-colors-text, colors.primary);

My theme:

colors: {
    content: {
      primary: 'colors.primary',
    },
    primary: 'cobalt.600',
    text: 'content.primary',
}

[atanasster]

beats me - do you have any ideas? What if you console.log the them at run-time - are the other vales correctly updated by the plugin?

[jorisw]

Doesn't seem like it, so this could be a separate issue entirely.

Not sure if this helps, but if I add the following console logs:

            if (lookup) {
                const { __value, __path, scale } = lookup;
                switch (typeof __value) {
                    case "object":
                        if (!Array.isArray(__value)) {
                            item.__path.node.value = transformValue(spaceFormats, scale, __path.node.value);
                            console.log("object became", item.__path.node.value)
                        }
                        else {
                            item.__path.node.value.elements = item.__path.node.value.elements.map((e, idx) => (Object.assign(Object.assign({}, e), { value: __value[idx] !== undefined
                                    ? transformValue(spaceFormats, scale, __value[idx].__value)
                                    : transformValue(spaceFormats, scale, e.value) })));
                            console.log("array became", item.__path.node.value.elements.map(({value})=>value).join(', '))
                        }
                        break;
                    case "string":
                    case "number":
                        item.__path.node.value.value = transformValue(spaceFormats, scale, __value);
                        console.log("string or number", __value, "became", item.__path.node.value.value)
                        break;
                }
            }

... it logs:

array became 0, 2, 4, 8, 16, 32, 64
array became 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.5rem, 3rem
array became 100%, 125%, 150%, 175%
array became 0, 2, 4, 8, 16, 32, 64
array became 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.5rem, 3rem
array became 100%, 125%, 150%, 175%
string or number white became white
string or number linear-gradient(108.14deg, #292469 -6.21%, #2B3574 48.19%, #C0567D 79.42%, #FFC861 104.88%) became linear-gradient(108.14deg, #292469 -6.21%, #2B3574 48.19%, #C0567D 79.42%, #FFC861 104.88%)
string or number #3E4C95 became #3E4C95
string or number colors.primary became colors.primary
array became 0, 2, 4, 8, 16, 32, 64
array became 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.5rem, 3rem
array became 100%, 125%, 150%, 175%
array became 0, 2, 4, 8, 16, 32, 64
array became 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.5rem, 3rem
array became 100%, 125%, 150%, 175%
string or number white became white
string or number linear-gradient(108.14deg, #292469 -6.21%, #2B3574 48.19%, #C0567D 79.42%, #FFC861 104.88%) became linear-gradient(108.14deg, #292469 -6.21%, #2B3574 48.19%, #C0567D 79.42%, #FFC861 104.88%)
string or number #3E4C95 became #3E4C95
string or number colors.primary became colors.primary

[jorisw]

What I'm seeing now is that when I build my full app, the output is also limited to the above, while my theme is much more extensive. My hunch now is that the transformer is not matching objects and therefore not transforming nested fields such as colors.content.primary. I'm seeing the same with other nested stuff like colors.border.emphasized.

[jorisw]

I'm also noticing that transformValue seems to heavily rely on spaceFormats being filled with a key for which a formatter exists:

const transformValue = (spaceFormats, key, value) => {
    if (spaceFormats[key]) {

For all of my styles that aren't being transformed, this if-statement evaluates falsy.

[atanasster]

thanks, great suggestion, I will take a look again