From f211a17da913e60921c5074d4d6b0e159056e0a5 Mon Sep 17 00:00:00 2001
From: Maxim Alyoshin <mgreen097@gmail.com>
Date: Tue, 1 Dec 2020 02:40:38 +0300
Subject: [PATCH] fix: fix readme (#854)

* fix: fix readme

* feat(default-breakpoints): add xs

* build: increase the limit
---
 README.md            | 1 +
 core/index.js        | 1 +
 package.json         | 6 +++---
 test/index.spec.js   | 8 +++++---
 test/library.spec.js | 3 ++-
 test/mocks.js        | 1 +
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 0aefa392..327d3461 100644
--- a/README.md
+++ b/README.md
@@ -103,6 +103,7 @@ yarn styled-breakpoints
 
 ```js
 {
+  xs: '0px',
   sm: '576px',
   md: '768px',
   lg: '992px',
diff --git a/core/index.js b/core/index.js
index 3493e658..0ff4b91c 100644
--- a/core/index.js
+++ b/core/index.js
@@ -6,6 +6,7 @@ exports.makeStyledBreakpoints = (options) => {
     pathToMediaQueries: _options.pathToMediaQueries || ['breakpoints'],
     errorPrefix: _options.errorPrefix || '[styled-breakpoints]: ',
     defaultMediaQueries: _options.defaultMediaQueries || {
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',
diff --git a/package.json b/package.json
index c1b8f1ca..c1ae6c53 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
       "import": {
         "index.js": "{ up, dow, between, only }"
       },
-      "limit": "1020 B"
+      "limit": "1080 B"
     },
     {
       "name": "core + react-styled",
@@ -60,7 +60,7 @@
         "index.js": "{ up, dow, between, only }",
         "react-styled/index.js": "{ useBreakpoint }"
       },
-      "limit": "1.15 KB",
+      "limit": "1.18 KB",
       "ignore": [
         "react",
         "styled-components"
@@ -72,7 +72,7 @@
         "index.js": "{ up, dow, between, only }",
         "react-emotion/index.js": "{ useBreakpoint }"
       },
-      "limit": "1.15 KB",
+      "limit": "1.18 KB",
       "ignore": [
         "react",
         "@emotion/react"
diff --git a/test/index.spec.js b/test/index.spec.js
index 9dd0d07c..98a9af34 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -56,7 +56,7 @@ describe('throwIsInvalidBreakName', () => {
       expect(true).toEqual(false);
     } catch (e) {
       expect(e.message).toEqual(
-        "[styled-breakpoints]: 'blabla' is invalid breakpoint name. Use 'sm, md, lg, xl'."
+        "[styled-breakpoints]: 'blabla' is invalid breakpoint name. Use 'xs, sm, md, lg, xl'."
       );
     }
   });
@@ -73,7 +73,7 @@ describe('custom error prefix', () => {
       expect(true).toEqual(false);
     } catch (e) {
       expect(e.message).toEqual(
-        "[typographist]: 'blabla' is invalid breakpoint name. Use 'sm, md, lg, xl'."
+        "[typographist]: 'blabla' is invalid breakpoint name. Use 'xs, sm, md, lg, xl'."
       );
     }
   });
@@ -132,6 +132,7 @@ describe('toEm', () => {
 describe('getBreakpointsFromTheme', () => {
   it('return  breakpoints from custom theme', () => {
     expect(getBreakpointsFromTheme(CUSTOM_THEME)).toEqual({
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',
@@ -140,7 +141,8 @@ describe('getBreakpointsFromTheme', () => {
   });
 
   it('return  default breakpoints', () => {
-    expect(getBreakpointsFromTheme(EMPTY_THEME)).toMatchObject({
+    expect(getBreakpointsFromTheme(EMPTY_THEME)).toEqual({
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',
diff --git a/test/library.spec.js b/test/library.spec.js
index 731e0c7e..e643c92c 100644
--- a/test/library.spec.js
+++ b/test/library.spec.js
@@ -24,6 +24,7 @@ describe('type', () => {
 describe('get', () => {
   it('return value stored at the specified path', () => {
     expect(get(['theme', 'breakpoints'], PROPS_WITH_CUSTOM_THEME)).toEqual({
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',
@@ -47,7 +48,7 @@ describe('withMinAndMaxMedia', () => {
 describe('makeErrorMessage', () => {
   it('build error message', () => {
     expect(makeErrorMessage('blabla', BREAKPOINTS)).toEqual(
-      "'blabla' is invalid breakpoint name. Use 'sm, md, lg, xl'."
+      "'blabla' is invalid breakpoint name. Use 'xs, sm, md, lg, xl'."
     );
   });
 });
diff --git a/test/mocks.js b/test/mocks.js
index 05c52ca7..53bf3613 100644
--- a/test/mocks.js
+++ b/test/mocks.js
@@ -10,6 +10,7 @@ const INVALID_BREAKPOINTS = {
 const PROPS_WITH_CUSTOM_THEME = {
   theme: {
     breakpoints: {
+      xs: '0px',
       sm: '576px',
       md: '768px',
       lg: '992px',