Responsive font size with breakpoints aliases generates media queries in incorrect order

Bug report

Describe the bug

If I use: <Heading fontSize={["30px", "45px", "60px", "90px", "180px"]}> The css generated is in the correct order:

@media screen and (min-width: 80em)
<style>
.css-1yf13mp {
    font-size: 180px;
}
@media screen and (min-width: 62em)
<style>
.css-1yf13mp {
    font-size: 90px;
}
@media screen and (min-width: 620px)
<style>
.css-1yf13mp {
    font-size: 60px;
}
@media screen and (min-width: 400px)
<style>
.css-1yf13mp {
    font-size: 45px;
}

If I use: <Heading fontSize={{ base: "30px", sm: "45px", md: "60px", lg: "90px", xl: "180px" }}> The css generated is in the wrong order thus the font size applied is not the right one.

@media screen and (min-width: 620px)
<style>
.css-yxyd02 {
    font-size: 60px;
}
@media screen and (min-width: 400px)
<style>
.css-yxyd02 {
    font-size: 45px;
}
@media screen and (min-width: 80em)
<style>
.css-yxyd02 {
    font-size: 180px;
}
@media screen and (min-width: 62em)
<style>
.css-yxyd02 {
    font-size: 90px;
}

In that case for instance on a desktop (1920px), it’s the 620px breakpoint size which is applied.

Expected behavior

I’d expect the generated media queries to be in the right order.

System information

• OS: Linux
• Browser (if applies): Chrome (but not tested on other browsers)
• Version of @chakra-ui/core: 1.0.0-rc.3
• Version of Node.js: 12.15.0

[trompx]

My bad I did a simple yarn add @chakra-ui/theme-tools. All is working perfectly now, thanks! There is just a small typo in the docs: import { createBreakpoints } from "chakra-ui/theme-tools" is missing the @ in front of chakra-ui.

[ljosberinn]

Neat, glad its resolved 😃 Regarding the typo, thanks, yes, we have a PR for that which I should merge anyways.