breakpoints is not being converted to Array createBreakpoints

[jitenderchand1]

🐛 Bug report

I am using chakra UI with styled-system and I recently upgrade chakra to 1.5.0. After upgrading it one of the node modules' files of style system starts throwing error.

The style system was expecting breakpoints to be an Array as it was before chakra version 1.1.5. But after upgrading it to 1.5.0 we are getting object instead of an array. Please refer to the below screenshot.

Screenshot after upgrading to 1.5.0

Screenshot with chakra version 1.1.5

Here is the screenshot of error.

As per the documentation, the breakpoints should an Array https://chakra-ui.com/docs/features/responsive-styles

import { createBreakpoints } from "@chakra-ui/theme-tools"

// This is the default breakpoint
const breakpoints = createBreakpoints({
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
  "2xl": "96em",
})

// Internally, we transform to this
const breakpoints = ["0em", "30em", "48em", "62em", "80em", "96em"]

💥 Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

💻 Link to reproduction

CodeSandbox reproduction: https://your-codesandbox-link-goes-here.io

🧐 Expected behavior

🧭 Possible Solution

🌍 System information

Software	Version(s)
Chakra UI	1.50
styled-system/css	5.1.5
styled-system	5.1.5
framer-motion	4.1.4
Browser	chrome 89
Operating System	macos HS

📝 Additional information

[segunadebayo]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Send over a codesandbox repro of this issue.

From what I can see, consider updating your breakpoint to use createBreakpoints as specified in the docs.

[jitenderchand1]

@segunadebayo I am using createBreakpoints the way it is mentioned in the docs

import { createBreakpoints } from '@chakra-ui/theme-tools';
const breakpoints = createBreakpoints({
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px'
});

[jitenderchand1]

@segunadebayo I see you have upgraded your breakpoint.js file.

Here is code from it before 1.5.0 version where you are using fromEntries

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { fromEntries } from "@chakra-ui/utils";
export var createBreakpoints = config => {
  var sorted = fromEntries(Object.entries(_extends({
    base: "0em"
  }, config)).sort((a, b) => parseInt(a[1], 10) > parseInt(b[1], 10) ? 1 : -1));
  return Object.assign(Object.values(sorted), sorted);
};
//# sourceMappingURL=breakpoints.js.map

After upgrading it to 1.5.0, I can see following code which does create Array

function _extends() {
    _extends = Object.assign || function(target) {
        for (var i = 1; i < arguments.length; i++) {
            var source = arguments[i];
            for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                    target[key] = source[key];
                }
            }
        }
        return target;
    };
    return _extends.apply(this, arguments);
}
import {
    warn
} from "@chakra-ui/utils";
export var createBreakpoints = config => {
    warn({
        condition: true,
        message: ["[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon", "simply pass the breakpoints as an object. Remove the createBreakpoint(..) call"].join("")
    });

    return _extends({
        base: "0em"
    }, config);
};
//# sourceMappingURL=create-breakpoints.js.map