Breakpoint aliases does not seem to work with "@chakra-ui/nuxt"

[everchanger]

Describe the bug When using "@chakra-ui/nuxt": "^0.1.0", I cannot get "aliased" breakpoints to work. Using the array syntax to specify the different properties works as expected. This might be an misconfiguration but I've been debugging for a while and I cannot find a solution.

To Reproduce Steps to reproduce the behavior: Setup an nuxt app with @chakra-ui/nuxt and @nuxtjjs/emotion. Add the following snippet to the generated index.vue component in the pages folder: <c-heading :bg={base: 'red.500, md: 'blue.500'}>Chakra UI</c-heading>. The background color of the heading will always be blue.

See example below in "Additional context"

Expected behavior I expect the background color to be red until the md breakpoint is hit, at that point the background should turn blue.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version: 86.0.4240.75

Additional context Attaching an example of the error in an codesandbox.io container where I used the example and changed it to use the "@chakra-ui/nuxt" package. The "Hello chakra-ui/vue" heading has a background that should be red at base resolution and turn blue when the md breakpoint is hit.

https://codesandbox.io/s/chakra-ui-nuxt-demo-forked-ed87w

When I tried to do the same thing using another fork of the chakra-ui-nuxt-demo without installing "@chakra-ui/nuxt" package the breakpoint works as expected:

https://codesandbox.io/s/chakra-ui-nuxt-demo-forked-zuh9h

[philwolstenholme]

I've just run into this issue too.

[IHIutch]

Same for the align and justify aliases

EDIT: I stand corrected, ignore this comment!

[codebender828]

Thanks for capturing this issue @everchanger . Gonna take a look at this.

[codebender828]

@IHIutch How did you try to use the align and justify aliases? Because they're only available on the CFlex component. ✌️

https://github.com/chakra-ui/chakra-ui-vue/blob/71512a4dc20d4f080034d27bcee4c36db290c987/packages/chakra-ui-core/src/CFlex/utils/flex.props.js#L3-L13

[IHIutch]

@codebender828 Ah, I think that's the issue. I think I was trying to do something like

<CBox d="flex" align="center">...</CBox> 

[philwolstenholme]

I think the issue is that the breakpoint alias information isn't being copied to the theme object in .nuxt-storybook/chakra.js successfully.

If I manually add these lines to my .nuxt-storybook/chakra.js then the alias and object syntax for classes starts working:

theme.breakpoints.sm = theme.breakpoints[0];
theme.breakpoints.md = theme.breakpoints[1];
theme.breakpoints.lg = theme.breakpoints[2];
theme.breakpoints.xl = theme.breakpoints[3];
theme.breakpoints['2xl'] = theme.breakpoints[4];
theme.breakpoints['3xl'] = theme.breakpoints[5];
theme.breakpoints['4xl'] = theme.breakpoints[6];

(We have overridden the breakpoints to add a few extras)

[philwolstenholme]

For now, I've added this to node_modules/@chakra-ui/nuxt/lib/plugin.js using https://www.npmjs.com/package/patch-package

--- a/node_modules/@chakra-ui/nuxt/lib/plugin.js
+++ b/node_modules/@chakra-ui/nuxt/lib/plugin.js
 
 const theme = <%= JSON.stringify(options.theme, null, 2) %>
 
+const tshirtSizes = ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'];
+
+theme.breakpoints.forEach((breakpoint, index) => {
+  theme.breakpoints[tshirtSizes[index]] = breakpoint;
+});
+
 Vue.prototype.$chakra = {
   theme,
   icons: <%= JSON.stringify(options.icons, null, 2) %>